react的生命周期

[kangkang123269]

React15组件的生命周期可以分为三个阶段：

1. 挂载阶段 (Mounting phase)：constructor ---> getDerivedStateFromProps ---> render方法转虚拟dom ----> componentDidMount

在这个阶段，组件被创建并且被插入到 DOM 中。React组件的挂载阶段包括以下生命周期方法：

• constructor(props): 组件被创建时，首先执行构造函数，可以在这里初始化状态(state)和绑定事件处理器。
• static getDerivedStateFromProps(props, state): 在组件创建后和更新props时，此方法会被调用。它接收props和state两个参数，返回一个对象，用于更新组件状态或返回null。该方法不应该使用组件的实例属性或调用组件的方法。
• render(): 在组件创建或更新时，此方法被调用。它返回一个React元素，用于构建组件的DOM结构。
• componentDidMount(): 组件被插入到 DOM 后，此方法被调用。它可以用于发起网络请求，订阅事件等操作。

2. 更新阶段 (Updating phase)：getDerivedStateFromProps --> shouldComponentUpdate --> getSnapshotBeforeUpdate --> componentDidUpdate
   在这个阶段，组件的props或state被修改，组件需要重新渲染。React组件的更新阶段包括以下生命周期方法：

• static getDerivedStateFromProps(props, state): 同上述方法。
• shouldComponentUpdate(nextProps, nextState): 在组件更新前，此方法被调用。它接收nextProps和nextState两个参数，用于判断是否需要重新渲染组件。默认情况下，React会总是重新渲染组件。
  render(): 同上述方法。
• getSnapshotBeforeUpdate(prevProps, prevState): 在组件更新前，此方法被调用。它接收prevProps和prevState两个参数，用于获取组件更新前的快照。该方法返回的值将传递给componentDidUpdate()方法的第三个参数。
• componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后，此方法被调用。它接收prevProps、prevState和snapshot三个参数，用于在组件更新后进行一些操作，如更新DOM、请求数据等。

3. 卸载阶段 (Unmounting phase)：componentWillUnmount
   在这个阶段，组件从 DOM 中移除，进行清理工作。React组件的卸载阶段只包括一个生命周期方法：

• componentWillUnmount(): 在组件被卸载前，此方法被调用。它可以用于取消订阅事件、清除定时器、释放内存等清理工作。
  除了上述生命周期方法，React还提供了一些其他的钩子函数，如componentDidCatch()和getDerivedStateFromError()等，用于处理组件中出现的错误。