组件的生命周期
所谓的生命周期就是指某个事物从开始到结束的各个阶段,当然在 React.js 中指的是组件从创建到销毁的过程,React.js 在这个过程中的不同阶段调用的函数,通过这些函数,我们可以更加精确的对组件进行控制,前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数
生命周期演变
- 生命周期,16.3 之前,16.3, 16.4 及之后
- 挂载阶段 (组件创建–>把组件创建的虚拟 DOM,生成真实 DOM,添加到我们的 DOM 树中)
- constructor
- static getDerivedStateFromProps(props)
- 注意 this 问题
- render
- componentDidMount – 处理副作用(请求)
- 更新阶段 – 组件重新渲染 - static getDerivedStateFromProps(props, state) - shouldComponentUpdate() – 判断是否更新 - render() - getSnapshotBeforeUpdate() - componentDidUpdate() – 处理副作用(请求)
- 卸载阶段
- componentWillUnmount – 删除添加在全局的一些信息或操作
挂载阶段
挂载阶段(mount)- 从组件初始化到生成真实DOM节点并挂载真实DOM树中:
- constructor(props) 组件初始化
- static getDerivedStateFromProps(props,state) 将 props 中内容关联到 state 中
- 注意 this 问题
- render 构建当前组件的虚拟DOM
- componentDidMount 组件挂载完成 - 通常在该生命周期函数,进行副作用处理
副作用处理:
- 异步请求
- DOM 获取
更新阶段
更新阶段(update)- 从组件开始更新到修改完成真实的DOM节点:
- static getDerivedStateFromProps(props, state)
- shouldComponentUpdate(nextProps,nextState) – 判断是否更新
return true 组件更新 || false 不在继续执行更新流程 - render()
- getSnapshotBeforeUpdate(prevProps,prevState) – 获取更新前的DOM快照,该函数执行时react已经完成了新老DOM对比,即将更新真实DOM,我们可以获取更新前的DOM,用于和更新后的DOM进行对比。该方法必须配合 componentDidUpdate 一块使用,该方法的返回值,会变成 componentDidUpdate 的 pervDOM 参数
- componentDidUpdate(prevProps,prevState,pervDOM) – 组件更新完成 处理副作用(请求)
组件在什么情况下会更新:
- 调用 setState 引起当前组件进行更新
- 父组件更新,会引起子组件进行更新
- 调用 forceUpdate 方法强制组件进行更新