React 新版生命周期(v16.4)

Z时代
2024-01-10
分类：综合

react

生命周期简单说明

下图已经画的很详细了，简单整理一下每个生命周期的要点。

constructor()

constructor(props)

React组件的构造函数在挂载之前被调用

static getDerivedStateFromProps()

static getDerivedStateFromProps(nextProps, prevState)

这个生命周期的功能实际上就是将传入的props映射到state上面。

16.4版本，这个函数会在每次重新渲染之前被调用，props和state的变化就会调用该生命周期。

组件实例化后和接受新属性时将会调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态。

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

如果shouldComponentUpdate()返回false，render()不会被调用。

使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下你应该依赖于默认行为。

一般这个方法用来优化组件，不过不提倡过早优化，在组件遇到瓶颈的时候，可以考虑使用这个方法做一定的优化。

render()

render()函数应该纯净，意味着其不应该改变组件的状态，其每次调用都应返回相同的结果，同时不直接和浏览器交互。若需要和浏览器交互，将任务放在componentDidMount()阶段或其他的生命周期方法。保持render() 方法纯净使得组件更容易思考。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会作为参数被传递给componentDidUpdate()。

例如：

class ScrollingList extends React.Component {
  listRef = React.createRef();
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the current height of the list so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      return this.listRef.current.scrollHeight;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    if (snapshot !== null) {
      this.listRef.current.scrollTop +=
        this.listRef.current.scrollHeight - snapshot;
    }
  }
  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

componentDidMount()

无论在同步和异步模式下都仅会触发一次

此时页面中有了真正的DOM的元素，可以进行DOM相关的操作

在这个方法中调用setState()将会触发一次额外的渲染，但是它将在浏览器刷新屏幕之前发生。这保证了即使render()将会调用两次，但用户不会看到中间状态。谨慎使用这一模式，因为它常导致性能问题。然而，它对于像模态框和工具提示框这样的例子是必须的。这时，在渲染依赖DOM节点的尺寸或者位置的视图前，你需要先测量这些节点。