React 生命周期

react 生命周期

React组件的生命周期分为三个阶段：mounting（挂载）、updating（更新）和unmounting（卸载），每个阶段都会触发不同的生命周期方法：

• Mounting 阶段：

  • constructor()：构造函数，在组件创建时调用，用于初始化组件的state和绑定事件处理程序等。
  • getDerivedStateFromProps(props, state)：在组件初始化、props变化时和forceUpdate()调用前触发。根据props计算新的state并返回。如果不需要更新state，则返回null。
  • render()：返回组件要渲染的内容，该函数在组件挂载和更新时都会被调用。
  • componentDidMount()：组件挂载完成后调用，通常执行网络请求，订阅事件等操作。

• Updating 阶段：

  • getDerivedStateFromProps(props, state)：同上。
  • shouldComponentUpdate(nextProps, nextState)：组件更新前被调用，用于判断组件是否需要更新，返回true表示需要更新，返回false表示不需要更新。
  • render()：同上。
  • getSnapshotBeforeUpdate(prevProps, prevState)：在render()后、更新DOM前调用，用于获取更新前的DOM信息，返回值会作为componentDidUpdate()的第三个参数。
  • componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后被调用，通常执行DOM操作、网络请求等操作。

• Unmounting 阶段：

  • componentWillUnmount()：在组件卸载前调用，通常执行一些清理操作，如取消网络请求、清除定时器等。

另外还有一些钩子方法可以被覆盖，如static getDerivedStateFromError()在子组件抛出错误时调用、componentDidCatch()在父组件捕获到子组件错误时调用等。