旧版本生命周期介绍
组件从创建到死亡会经历一些特定的阶段
React组件中包含一系列钩子函数(生命周期回调函数) 会在特定的时刻调用
在定义组件时会在特定的生命周期回调函数中做特定的动作
测试:
页面初次加载时调用构造,将要挂载和挂载完毕回调
每次调用 组件更新阀门,将要更新回调和更新完毕回调
组件消失,调用将要卸载回调
下面把阀门关闭
更新阀门回调返回值调整为false
再测试点击add
经过多次点击后数值没有发生变化,说明此时组件的更新已被关闭
这个时候 强制更新按钮的回调就起作用了
此时我们点击强制更新按钮
可以看到数值直接变为了10 那是因为刚才在连点10次add,但是阀门关闭,所以页面没有被渲染,但是数值是确确实实有改变的,只是没有渲染显示,此时点击强制更新,在阀门关闭的情况下,强制渲染了页面,直接将数值渲染出来了 可以看到调用的回调
子组件接收父组件新的属性值时的回调
总结
红色表示常用
初始化阶段: 由 ReactROM.render()触发 --初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidmount()
一般在这个回调中做一些初始化的事 例如:开启定时器 发送网络请求 订阅消息
更新阶段: 由组件内部this.setState()或父组件render()触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render()
4. componentDidUpdate()
卸载阶段 : 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()
一般这个回调中做一些收尾的事 例如: 关闭定时器 取消订阅消息
