常用的react生命周期:

最新推荐文章于 2025-08-27 11:53:43 发布

原创最新推荐文章于 2025-08-27 11:53:43 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了React组件的生命周期，包括初始化加载时的constructor、getDerivedStateFromProps、render和componentDidMount，以及更新阶段的getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate。在componentDidMount中常用于启动定时器和网络请求，componentWillUnmount则用于清理资源。了解这些生命周期对于优化React应用性能至关重要。

react的生命周期:

初始化加载的时候:

由ReactDOM.render()触发---初次渲染

1. constructor()

2. getDerivedStateFromProps

3. render()

4. componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

	      //构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
			}

			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

           render(){}

          //组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

更新的时候:

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. getDerivedStateFromProps

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate

5. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount() =====> 常用一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息