ReactJS-组件生命周期

ReactJS是一个用于构建用户界面的JavaScript库，组件生命周期是React中非常重要的一个概念，它涵盖了组件从创建到销毁的整个生命周期过程。

组件的生命周期图示：

组件的生命周期方法

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

1. Mounting：组件被创建并插入到DOM中。
2. Updating：组件数据更新，重新render并更新DOM。
3. Unmounting：组件从DOM中移除。

一些常用的生命周期方法：

Mounting

• constructor(props)：组件被创建时执行，通常在构造函数中初始化state状态和一些其他的设置。
• getDerivedStateFromProps(props, state)：当props发生变化时调用，通常用于更新state，不推荐使用。
• render()：组件被渲染时执行，它是实现组件UI的地方。
• componentDidMount()：组件被插入到DOM中后执行，通常在此设置组件的定时器、异步请求等操作。

Updating

• shouldComponentUpdate(nextProps, nextState)：组件在更新前执行，通常用于判断组件是否需要更新，返回true或false。
• getSnapshotBeforeUpdate(prevProps, prevState)：组件更新前执行，用于获取上一个props或state的快照，通常用于数据比对和保存组件滚动位置等操作。
• componentDidUpdate(prevProps, prevState, snapshot)：组件更新后执行，通常用于更新页面状态，执行API调用等操作。

Unmounting

• componentWillUnmount()：组件被移除时执行，通常用于清除定时器、取消异步请求等操作。

生命周期方法的用途

• constructor()：初始化组件状态，绑定方法。
• getDerivedStateFromProps()：根据props更新state。
• render()：生成组件的UI。必须返回React元素（单个顶层组件）或null。
• componentDidMount()：访问API、添加订阅事件、设置定时器，更新state均可以放在这里。需要注意的是，在这里更新state的操作会重新调用render()方法。
• shouldComponentUpdate()：在组件更新前进行性能优化，通过返回false可以阻止不必要的渲染，提高性能。
• getSnapshotBeforeUpdate()：获取组件更新前的底层状态，比如滚动位置、焦点状态，以便在componentDidUpdate()中使用。
• componentDidUpdate()：在组件更新后进行各种副作用操作，比如访问API、处理DOM更新，更新state。
• componentWillUnmount()：在组件卸载前执行一些清理操作，比如取消订阅事件、清除定时器、取消异步请求等。

参考资料

• React Component Lifecycle Methods