React 组件的常用生命周期函数汇总

1. 概述 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。只有类组件才有生命周期。

2. 生命周期的三个阶段 每个阶段的执行时机每个阶段钩子函数的执行顺序每个阶段钩子函数的作用

2.1. 创建时（挂载阶段） 执行时机：组件创建时（页面加载时）执行顺序：constructor() -> render() -> componentDidMount()钩子函数的作用： 钩子函数触发时机作用constructor创建组件时，最先执行1.初始化state 2.为事件处理程序绑定 thisrender每次组件渲染都会触发渲染 UI （注意：不能调用setState()）componentDidMount组件挂载（完成 DOM 渲染）后1.发送网络请求 2.DOM 操作

2.2. 更新时（更新阶段） 执行时机：setState()、forceUpdate()、组件接收到新的props。说明：以上任意一种变化，组件就会重新渲染。执行顺序：render() -> componentDidUpdate() 钩子函数触发时机作用render每次组件渲染都会触发渲染 UI （与挂载阶段是同一个render）componentDidUpdate组件更新（完成 DOM 渲染）后1.发送网络请求 2.DOM 操作 注意：如果要 setState() 必须放在一个if条件中

2.3. 卸载时（卸载阶段）

执行时机：组件从页面中消失

钩子函数触发时机作用componentWillUnmount组件卸载（从页面中消失）执行清理工作（比如：清理定时器等）

到此这篇关于React 组件的常用生命周期函数汇总的文章就介绍到这了,更多相关React 组件生命周期函数内容请搜索七叶笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持七叶笔记！