不要扩展 React.Component答案

【问题标题】：do not extend React.Component不要扩展 React.Component
【发布时间】：2016-03-29 23:02:28
【问题描述】：

创建 React 组件的 es6 语法是 export default class ExampleComponent extends React.Component。但是当 export default class ExampleComponent 没有 extends React.Component 时它仍然可以工作，条件是 import React from 'react';为什么会这样

【问题讨论】：

前者可以访问生命周期方法（例如componentDidMount），而后者没有；它是一个静态组件。
@lux 后者确实可以访问render 检查此github.com/gaearon/flux-react-router-example
只有render()，根据文档：facebook.github.io/react/blog/2015/10/07/… --> "These components behave just like a React class with only a render method defined"
最后一件事，针对这种情况的推荐阅读：medium.com/@dan_abramov/… 由撰写您引用的 repo 的人撰写
What are the differences between plain es6 class and extend React.Component的可能重复

标签： reactjs ecmascript-6

【解决方案1】：

在这种情况下很容易错过正在发生的事情，但差别真的很大：不扩展 React.Component，你只是在创建一个 JS 类。此外：

因为它满足 React 类的要求（您可以使用 React.createClass() 或作为 ES6 类创建），它仍然可以“工作”，
但是你不会获得 lifeCyle 方法或访问状态（如果我对此有误，请有人纠正我，很确定你不会只使用一个类 bc 没有附加支持实例）。
这些“更简单”的组件对于 React 来说通常可以更快地处理并且需要更少的“机器”，因为它们只是一个（希望是）呈现某些东西的纯函数。
因此，它们的主要区别在于，仅使用具有渲染方法的类，您就不会“需要”那么多。这应该足够大多数时间了；您不需要访问 state 的所有权限

希望有帮助！

【讨论】：

关于此主题的 React 文档：facebook.github.io/react/docs/state-and-lifecycle.html。我同意@markthethomas。来自文档：“......定义为类的组件具有一些附加功能。本地状态就是这样：仅对类可用的功能。”文档没有为生命周期钩子明确说明这一点，但对于那些钩子显然也是如此。

【解决方案2】：

您正在创建一个“纯”JavaScript class，但是一旦它不扩展 React.Component，您将无法访问特定的 React 行为。检查how extends work。

【讨论】：

检查这个github.com/gaearon/flux-react-router-example，很多 React 组件没有扩展 React.Component 但仍然可以正常工作
我相信这是因为这个已弃用的库：github.com/gaearon/react-pure-render