react组件的生命周期
时间: 2023-10-02 19:05:39 浏览: 41
组件的生命周期包括以下几个阶段:
1. 初始化阶段:在组件被创建时,会调用构造函数,并初始化组件的状态和属性。
2. 挂载阶段:组件被挂载到页面中时,会依次调用以下函数:
- constructor:初始化组件的状态和属性。
- render:渲染组件的UI。
- componentDidMount:组件被挂载后,可以进行一些副作用操作,比如发起网络请求、订阅事件等。
3. 更新阶段:当组件的状态或属性发生变化时,会依次调用以下函数:
- shouldComponentUpdate:用于判断组件是否需要重新渲染,默认返回true,可以根据需要进行优化。
- render:重新渲染组件的UI。
- componentDidUpdate:组件更新后,可以进行一些副作用操作,比如更新DOM、发送请求等。
4. 卸载阶段:当组件从页面中被移除时,会调用以下函数:
- componentWillUnmount:在组件被卸载前,可以进行一些清理操作,比如取消网络请求、取消订阅等。
需要注意的是,只有类组件才有生命周期,而函数组件每次都会重新运行函数,旧的组件即刻被销毁。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [React组件的生命周期](https://blog.csdn.net/weixin_43512997/article/details/124708191)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [[react] 组件的生命周期](https://blog.csdn.net/qq_14993591/article/details/121660866)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]