React 组件生命周期

如果不初始化状态与绑定方法，则不需要为你的组件实现构造函数

通常在 React 构造函数中只用于两个目的：

不能在constructor中调用 setState(), 如果你的组件需要用到本地状态，在构造函数中直接将初始状态赋值到 this.state

避免在构造函数中引入任何副作用或订阅。对于这些用例，使用 componentDidMount()代替。

提示

避免将 props 复制到 state！这是一个常见和错误：

   constructor(props){
     super(props);
     // Don't do this
     this.state = {color: props.color}
   }

这样做完全没有必要（你可以用this.props.color来替代），并且会引起组件创建的缺陷（在color更新时不能及时反应到状态上）如果你故意想忽略 prop 更新，那么可以采用此模式

在调用呈现方法之前，在初始挂载和后续更新中调用该方法。它应该返回一个要更新状态的对象，或者返回 null 不更新任何内容。

该方法是类组件中唯一必需的方法。

当调用时，它会检测this.props和this.state,并且返回一个以下的类型：

并且具有以下规则

真实的 DOM 被渲染出来后调用，在该方法中可通过 this.getDOMNode()访问到真实的 DOM 元素。此时已可以使用其他类库来操作这个 DOM。

在服务端中，该方法不会被调用。

组件是否应当渲染新的 props 或 state，返回 false 表示跳过后续的生命周期方法，通常不需要使用以避免出现 bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。

在首次渲染期间或者调用了 forceUpdate 方法后，该方法不会被调用

getSnapshotBeforeUpdate

完成渲染新的 props 或者 state 后调用，此时可以访问到新的 DOM 元素。

组件被移除之前被调用，可以用于做一些清理工作，在 componentDidMount 方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

错误边界是指在子组件树的任何地方捕获 JavaScript 错误的响应组件，记录这些错误，并显示回退的 UI，而不是崩溃的组件树。错误边界在呈现期间、在生命周期方法中以及在它们下面的整个树的构造函数中捕获错误。

如果一个类组件定义了这个生命周期方法，它将成为一个错误边界。在其中调用 setState()可以在下面的树中捕获未处理的 JavaScript 错误并显示回退 UI。仅使用错误边界从意外异常中恢复;不要试图将它们用于控制流。

作用于组件类，只调用一次，返回对象用于设置默认的 props，对于引用值，会在实例中共享。

displayName 字符串用于调试消息。通常，您不需要显式地设置它，因为它是从定义组件的函数或类的名称中推断出来的。如果您希望为调试目的显示不同的名称，或者当您创建高阶组件时，您可能希望显式地设置它，请参阅包装显示名称，以便进行详细的调试。

状态包含特定于此组件的数据，这些数据可能随时间而改变。状态是用户定义的，它应该是一个普通的 JavaScript 对象。