React 生命周期分为四个大阶段
Mounting 第一次渲染阶段
constructor() 组件类的构造函数，一般用于数据的初始化，例如 state
这里获取不到 DOM
render() 组件类的渲染函数，用于渲染组件的模板
这里也获取不到 DOM
componentDidMount() 组件完成了第一次的解析渲染
这里是第一次可以通过 ref 获取到 DOM 的钩子，适合一上来就操作 DOM 的业务需求
以上三个钩子函数在完成第一次渲染之后就不再执行了
Updating 更新渲染阶段（当state数据发生改变的时候）
render() 先调用渲染函数（数据是新的，模板是旧的）
componentDidUpdate() 渲染完成
调用该函数（数据是新的，模板也是新的）
Unmounting 卸载阶段
例如当组件处于条件渲染过程中，当不满足条件就不会渲染该组件，那么就会触发 Unmounting 阶段的生命周期函数
componentWillUnmount() 这里一般适合做一些收尾工作，例如组件运行期间开启的定时器
Error Handling 错误处理阶段
componentDidCatch() 当组件在渲染期间发生错误，则会进入该钩子函数，可以在这里提供一些渲染出错的错误提示
网友评论