【react】生命周期(旧)
创始人
2024-06-03 01:01:35

生命周期的三个阶段:

  1. 初始化阶段:由ReactDOM.render()触发——初次渲染
  • constructor() 构造器
  • componentWillMount() 组件将要挂载
  • render() 初始化渲染和状态更新之后调用,调1+n次
  • componentDidMount() 常用 组件挂载完毕之后调用,只调一次 render的兄弟
    一般在这个钩子中做一些初始化的事:开启定时器、发送网络请求、订阅消息
  1. 更新阶段:由组件内部this.setState()或父组件重新render触发
  • shouldComponentUpdate() 控制组件更新的"阀门" 返回false时,页面就不会更新了,后面的生命周期也不会再执行
  • componentWillUpdate() 组件将要更新的钩子
  • render() 必须用的一个
  • componentDidUpdate() 组件更新完毕的钩子
  1. 卸载组件:由ReactDOM.unmountComponentAtNode()触发
  • componentWillUnmount() 常用
    一般在这个钩子中做一些收尾的事:关闭定时器、取消订阅消息

(以上是官方版本)
以下是我自己总结的,更详细点:

进入页面后生命周期的执行顺序
constructor 构造器

componengtWillMount 组件将要挂载

render 初始化渲染和状态更新之后调用,调1+n次

componentDidMount 组件挂载完毕之后调用,只调一次 render的兄弟

componentWillUnmount 组件将要卸载 可以用来清除定时器

以下是走setState之后的生命周期执行顺序
执行setState

shouldComponentUpdate 控制组件更新的"阀门" 返回false时,页面就不会更新了,后面的生命周期也不会再执行

componentWillUpdate 组件将要更新的钩子

render

componentDidUpdate 组件更新完毕的钩子

componentWillUnmount 组件将要卸载

以下是forceUpdate —— 不更改任何状态中的数据,强制更新的生命周期的执行顺序
执行forceUpdate

componentWillUpdate 组件将要更新的钩子

render

componentDidUpdate 组件更新完毕的钩子

父组件给子组件传值时生命周期的执行顺序
父组件的render

子组件的componentWillReceiveProps 但是第一次传值不会走这个生命周期,第二次传才会走

子组件的shouldComponentUpdata

子组件的componentWillUpdate

子组件的render

子组件的componentDidUpdate

其他生命周期
ReactDom.unmountComponentAtNode 卸载组件

相关内容

热门资讯

失恋后的qq个性签名 失恋后的... 失恋后的qq个性签名 1、我知道,我将会输得很惨烈,爱你是一件我消费不起的事 2、我们是...
qq女生失恋个性签名 qq女生... 1、亲爱的自己,不要哭,不要想,忘记他,好好过自己的生活、 2、我害怕了我自己,明明是难过,我...
qq经典失恋个性签名 qq经典... 1、我们相爱,却不能相守,留下的只有遗憾。 2、朋友我们一起哭泣,哭泣着拿着酒杯麻醉失恋的悲伤...
女人个性签名 女人个性签名 女... 1、女人不要记性太好,回忆越多幸福越少。 2、别和我谈恋爱,虚伪。有本事咱俩结婚。 3、...
霸气女人个性签名 霸气女人个性... 1、魅力女人,就是有充分的意志力去抵挡男人的进攻,也有足够多的魅力阻挡男人的撤退。 2、当一个...