初始化阶段
constructor
1、定义state
2、可以给state赋值初始化props
3、给普通函数绑定this
4、通过super 继承props this.props = props
componentWillMount 表示组件即将挂载
1、可以进行数据修改
2、17版本弃用了 因为容易造成异步滥用
3、如果你在17版本还想用它,加 UNSAFE_componentWillMount
render
1、解析this.state和this.props
2、通过createElement这个api将jsx转成vdom
!!! 切记不能用setState
因为js单线程 ,不能再当前任务还没完成时去执行其他的任务
componentDidMount
1、获取了真实的DOM,可以进行真实DOM操作【第三方库实例化】
2、可以进行数据请求、数据修改
更新阶段update()
两条线 props变更和state变更
更新阶段触发条件 1-setState, 2-forceUpdate
# props变更 ---
### componentWillReceiveProps( )
1. props改变才会触发
2. 可以通过参数获取最新属性
3. this.props vs nextProps可以监听属性是否该改变
!!!17版本弃用了 可以使用shouldComponent来代替它
### shouldComponentUpdate( )
1、react 性能优化的关键钩子函数
2、返回值是true 组件更新,false不更新
3、可以进行比较
this.state vs nextState
this.props vs nextProps
4、工作问题 多次渲染的问题找这个钩子函数
### componentWillUpdate( )
1、组件更新前的准备
2、17版本被弃用了和componentWillMount 被弃用原因一样
### componentDidUpdate( )
1、组件更新结束
2、通过Filber算法比对得到patch 补丁对象将patch补丁对象渲染到页面
3、再次渲染得到渲染后的真实DOM。可以做真实dom操作
4、也可以再次发送数据请求
# state变更 ---shouldComponentUpdate()---成功success--componentWillUpdate( )--render---componentDidUpdate( )
# state变更 ---shouldComponentUpdate()---失败false--更新-->shouldComponentUpdate()---成功success--componentWillUpdate( )--render---componentDidUpdate( )
forceUpdate 激活 componentWillUpdate( )--render---componentDidUpdate( ) 它们三个 强制渲染更新
组件卸载时触发 componentWillUnMount( )
1、清除计时器 定时器
2、清除组件无法删除的事件 比如绑定在window 或者document身上的事件
3、删除第三方库的实例
componentDidCatch 错误处理阶段
1、捕获子组件错误
2、显示回退UI