小白一看就会的React学习笔记 六( 生命周期 )

47 阅读1分钟

记住!!只有 《类组件》有,函数组件没有!!!!!

image.png projects.wojtekmaj.pl/react-lifec…

1. 生命周期 - 挂载阶段

目标任务:  能够说出在组件挂载阶段执行的钩子函数和执行时机

钩子 函数触发时机作用
constructor创建组件时,最先执行,初始化的时候只执行一次1. 初始化state  2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render每次组件渲染都会触发渲染UI(注意: 不能在里面调用setState()
componentDidMount组件挂载(完成DOM渲染)后执行,初始化的时候执行一次1. 发送网络请求   2.DOM操作

2. 生命周期 - 更新阶段

目标任务:  能够说出组件的更新阶段的钩子函数以及执行时机

钩子函数触发时机作用
render每次组件渲染都会触发渲染UI(与 挂载阶段 是同一个render)
componentDidUpdate组件更新后(DOM渲染完毕)DOM操作,可以获取到更新后的DOM内容,不要直接调用setState

3. 生命周期 - 卸载阶段

目标任务:  能够说出组件的销毁阶段的钩子函数以及执行时机

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