React/生命周期

每一个组件都包含“生命周期方法”，你能够重写这些方法，以便于在运行过程当中特定的阶段执行这些方法。

挂载

当组件实例被建立并插入 DOM 中时，其生命周期调用顺序以下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序以下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载

当组件从 DOM 中移除时会调用以下方法：

• componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用以下方法：

• setState()
• forceUpdate() 

 

详解

render（）

render()是 class 组件中惟一必须实现的方法。

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回如下类型之一：

• React 元素。一般经过 JSX 建立。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，不管是 <div /> 仍是 <MyComponent /> 均为 React 元素。
• 数组或 fragments。 使得 render 方法能够返回多个元素。欲了解更多详细信息，请参阅 fragments 文档。
• Portals。能够渲染子节点到不一样的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档
• 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)

render() 函数应该为纯函数，这意味着在不修改组件 state 的状况下，每次调用时都返回相同的结果，而且它不会直接与浏览器交互。

如需与浏览器进行交互，请在 componentDidMount() 或其余生命周期方法中执行你的操做。保持 render() 为纯函数，可使组件更容易思考。

若是 shouldComponentUpdate() 返回 false，则不会调用 render()。

---

 

若是不初始化 state 或不进行方法绑定，则不须要为 React 组件实现构造函数。
constructor(props)

在 React 组件挂载以前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在其余语句以前前调用 super(props)。不然，this.props 在构造函数中可能会出现未定义的 bug。

一般，在 React 中，构造函数仅用于如下两种状况：

• 经过给 this.state 赋值对象来初始化内部 state。
• 为事件处理函数绑定实例

在 constructor() 函数中不要调用 setState() 方法。若是你的组件须要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state

---

componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）当即调用。依赖于 DOM 节点的初始化应该放在这里。如需经过网络请求获取数据，此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。若是添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅 。

你能够在 componentDidMount() 里能够直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕以前。如此保证了即便在 render() 两次调用的状况下，用户也不会看到中间状态。请谨慎使用该模式，由于它会致使性能问题。一般，你应该在 constructor() 中初始化 state。若是你的渲染依赖于 DOM 节点的大小或位置，好比实现 modals 和 tooltips 等状况下，你可使用此方式处理。

---

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被当即调用。首次渲染不会执行此方法。

当组件更新后，能够在此处对 DOM 进行操做。若是你对更新先后的 props 进行了比较，也能够选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

你也能够在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，正如上述的例子那样进行处理，不然会致使死循环。它还会致使额外的从新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。 欲了解更多有关内容，请参阅为何 props 复制给 state 会产生 bug。

若是组件实现了 getSnapshotBeforeUpdate() 生命周期（不经常使用），则它的返回值将做为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。不然此参数将为 undefined。

若是 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。

---

 会在组件卸载及销毁以前直接调用。在此方法中执行必要的清理操做，例如，清除 timer，取消网络请求或清除在  中建立的订阅等。
 中不该调用 ，由于该组件将永远不会从新渲染。组件实例卸载后，将永远不会再挂载它。
css的隐藏并不会触发，只有dom元素的销毁才会触发componentWillUnmount()
componentWillUnmount()componentDidMount()componentWillUnmount()setState()

---

shouldComponentUpdate(nextProps, nextState)

根据  的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会从新渲染。大部分状况下，你应该遵循默认行为。
当 props 或 state 发生变化时， 会在渲染执行以前被调用。返回值默认为 true。首次渲染或使用  时不会调用该方法。
此方法仅做为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，由于这可能会产生 bug。你应该考虑使用内置的  组件，而不是手动编写 。 会对 props 和 state 进行浅层比较，并减小了跳过必要更新的可能性。
若是你必定要手动编写此函数，能够将  与  以及  与 进行比较，并返回  以告知 React 能够跳过更新。请注意，返回  并不会阻止子组件在 state 更改时从新渲染。
咱们不建议在  中进行深层比较或使用 。这样很是影响效率，且会损害性能。shouldComponentUpdate()shouldComponentUpdate()forceUpdate()PureComponentshouldComponentUpdate()PureComponentthis.propsnextPropsthis.statenextStatefalsefalseshouldComponentUpdate()JSON.stringify() 

 

---

  componentWillReceiveProps(nextProps)

该名称将继续使用至 React 17。

会在已挂载的组件接收新的 props 以前被调用。若是你须要更新状态以响应 prop 更改（例如，重置它），你能够比较 this.props 和 nextProps 并在此方法中使用 this.setState() 执行 state 转换。

请注意，若是父组件致使组件从新渲染，即便 props 没有更改，也会调用此方法。若是只想处理更改，请确保进行当前值与变动值的比较。

 在挂载过程当中，React 不会针对初始 props 调用 UNSAFE_componentWillReceiveProps()。组件只会在组件的 props 更新时调用此方法。调用 this.setState() 一般不会触发 UNSAFE_componentWillReceiveProps()。

---

 

componentWillUpdate(nextProps, nextState)

该名称将继续使用至 React 17。

当组件收到新的 props 或 state 时，会在渲染以前调用 componentWillUpdate()。使用此做为在更新发生以前执行准备更新的机会。初始渲染不会调用此方法。
注意，你不能此方法中调用 this.setState()；在 componentWillUpdate() 返回以前，你也不该该执行任何其余操做（例如，dispatch Redux 的 action）触发对 React 组件的更新。
一般，此方法能够替换为 componentDidUpdate()。若是你在此方法中读取 DOM 信息（例如，为了保存滚动位置），则能够将此逻辑移至 getSnapshotBeforeUpdate() 中。
componentWillUpdate()this.setState()componentWillUpdate()componentDidUpdate()getSnapshotBeforeUpdate()

---

static getDerivedStateFromProps(props, state)

 会在调用 render 方法以前调用，而且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，若是返回 null 则不更新任何内容。
getDerivedStateFromProps

---

getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）以前调用。它使得组件能在发生更改以前从 DOM 中捕获一些信息（例如，滚动位置）。今生命周期的任何返回值将做为参数传递给 componentDidUpdate()。getSnapshotBeforeUpdate()componentDidUpdate()

---

static getDerivedStateFromError(error)

今生命周期会在后代组件抛出错误后被调用。 它将抛出的错误做为参数，并返回一个值以更新 state

---

componentDidCatch(error, info)

今生命周期在后代组件抛出错误后被调用。 它接收两个参数：

1. error —— 抛出的错误。
2. info —— 带有 componentStack key 的对象，其中包含有关组件引起错误的栈信息。

componentDidCatch() 会在“提交”阶段被调用，所以容许执行反作用。 它应该用于记录错误之类的状况