React生命周期

简介: React生命周期

1. 生命周期

2. 旧钩子

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
*         1. constructor()
*         2. componentWillMount()
*         3.render()
*         4. componentDidMount() ======> 常用
*                  一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息
*
* 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
*         1. shouldComponentUpdate()
*          2. componentWillUpdate()
*          3. render() ====> 必须使用
*          4. componentDidUpdate()
* 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
*          1. componentWillUnmount() =====> 常用
*                  一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息

3. 新钩子

/*1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
*         1. constructor()
*         2. getDerivedStateFromProps()
*         3.render()
*         4. componentDidMount() ======> 常用
*                  一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息
*
* 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
*         1. getDerivedStateFromProps()
*         2. shouldComponentUpdate()
*          3. render() ====> 必须使用
*         4.getSnapshotBeforeUpdate()
*          4. componentDidUpdate()
* 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
*          1. componentWillUnmount() =====> 常用
*                  一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
 
* */

4. 常用钩子总结

  1. render:初始化渲染或更新渲染调用
  2. componentDidMount(组件加载完毕钩子):开启监听,发送ajax请求
  3. compoentWillUnmount(组件即将卸载钩子):做收尾工作的钩子,如清理监听器

5. map的key选用

目录
相关文章
|
1月前
|
前端开发
react生命周期的一些坑
react生命周期的一些坑
|
1月前
|
前端开发 JavaScript 开发者
【第27期】一文了解React生命周期
【第27期】一文了解React生命周期
41 0
|
1月前
|
前端开发
React中生命周期的讲解
React中生命周期的讲解
|
1月前
|
前端开发 JavaScript
react 生命周期讲解
react 生命周期讲解
|
1月前
|
前端开发 JavaScript
react 生命周期函数
react 生命周期函数
|
1月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
24 3
|
1月前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
22 1
|
1月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
23 0
|
1月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
16 0
|
1月前
|
前端开发 JavaScript 开发者
浅谈React生命周期
浅谈React生命周期
17 0