react生命周期
2021-03-11 本文已影响0人
A_dfa4
旧版声明周期
总结:
初始化阶段: 由ReactDom.render( 触发 ) --- 初次渲染
a. constructor()
b. componentWillMount()
c. render() // ====>必须调用
d. componentDidMount() // ===> 常用 (常用来做初始化 请求 订阅)
更新阶段: 由于组件内部 this.setState()或父组件render触发
a. shouldComponentUpdate()
b. componentWillUpdate()
c. render()
d. componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode(触发)
a. componentWillUnMount // ===>常用 (常用移除 销毁 取消订阅)
组件挂载时
1. constructor 构造器
2. componentWillMount 组件将要挂载
3. render
4. componentDidMount 组件挂在完成
// 初始化 >>> 组件将要挂载>>>渲染组件>>> 组件挂载完成
5. componentWillUnMount 组件将要卸载
setState流程
1. shouldComponentUdate =>true // 是否可以更新 ->可以(不可以直接结束) 控制组件是否要更新 // 返回是true更新 返回false 中断钩子 不写钩子默认返回true
2. componentWillUpdate // 准备更新了
3. render // 更新/渲染
4. componentDidupdate // 更新完成
forceUpdate 强制更新
// 使用场景 不修改任何状态数据 强制更新dom
1. componentWillUpdate
2. render
3. componentDidUpdate
父组件render
1. componentWillReceiveProps(props) // 第一次不算 (newProps) 组件将要接受新的props的钩子
2. shouldComponentUdate // 是否可以更新
3. componentWillUpdate // 将要更新
4. render // 去更新
5. componentDidupdate // 更新完成
新版生命周期
getDerivedStateFormProps() // 如果state的值任何时候都取决于props,name可以用
getSnapshotBeforeUpdate() // 更新之前的快照 能获取更新前的所有属性 比如 scrollTop
对比
旧版将要删除三个钩子函数
新版新增俩个钩子函数