react基础 react组件生命周期
组件生命周期
生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁。
旧版生命周期
React < 16.0.0
初始化阶段
- constructor: 初始化阶段，初始化属性和状态
- 同一个组件对象只会创建一次
- 不能再页面第一次挂载到页面之前调用setState，最好不要在构造函数中使用setSate
挂载阶段
- componentWillMount 组件即将被挂载到页面
- 正常情况下，和构造函数一样，只会运行一次
- 可以使用setSate，但是为了避免bug,不允许使用，因为在某些情况下，可能会被调用多次
- render: 组件渲染虚拟DOM
- 返回的React元素会被挂载到虚拟DOM树中，最终渲染到页面的真实DOM树中
- render可能不只运行一次，只要重新渲染就会重新运行
- 严禁使用setState，可能会导致无限递归渲染
- componentDidMount: 虚拟DOM已经挂载到页面成为真实的DOM
- 只会运行一次
- 可以使用setSate
- 通常情况，会将网络请求、计时器等一开始需要操作，在该函数中实现
更新阶段
- componentWillReceiveProps: 即将接收到新的属性值，组件的属性被改变
- 参数为新的属性对象
- 当前组件的属性还未改变
- shouldComponentUpdate: 指示react是否要重新渲染该组件，通过返回true和false来指定，默认情况下会返回true
- 可以用来优化效率
- 参数一：新的属性、参数二：新的状态
- componentWillUpdate: 组件即将被重新渲染
- 参数一：新的属性、参数二：新的状态
- componentDidUpdate: 组件已完成重新渲染
- 参数一：之前属性、参数二：之前状态
- 往往在该函数中使用dom操作，改变元素
销毁阶段
- componentWillUnmount 组件即将被销毁
- 通常在该函数中，销毁一些组件依赖的资源，比如计时器
新版生命周期
React >= 16.0.0
初始化阶段
- constructor: 初始化阶段，初始化属性和状态
- 同一个组件对象只会创建一次
- 不能再页面第一次挂载到页面之前调用setState，最好不要在构造函数中使用setSate
挂载阶段
- static getDerivedStateFromProps
- 参数一：新的属性、参数二：新的状态
- 该函数是静态的
- 该函数的返回值会覆盖组件状态
- render: 组件渲染虚拟DOM
- 返回的React元素会被挂载到虚拟DOM树中，最终渲染到页面的真实DOM树中
- render可能不只运行一次，只要重新渲染就会重新运行
- 严禁使用setState，可能会导致无限递归渲染
- componentDidMount: 虚拟DOM已经挂载到页面成为真实的DOM
- 只会运行一次
- 可以使用setSate
- 通常情况，会将网络请求、计时器等一开始需要操作，在该函数中实现
更新阶段
- static getDerivedStateFromProps 每次运行render之前都会运行
- 参数一：新的属性、参数二：新的状态
- 该函数是静态的
- 该函数的返回值会覆盖组件状态
- shouldComponentUpdate: 指示react是否要重新渲染该组件，通过返回true和false来指定，默认情况下会返回true
- 可以用来优化效率
- 参数一：新的属性、参数二：新的状态
- getSnapshotBeforeUpdate: 获取更新前的快照，真实的DOM构建完成，但还未实际渲染到页面中
- 在该函数中，通常用于实现一些附加的dom操作
- 该函数的返回值会作为componentDidUpdate的第三个参数
- componentDidUpdate: 组件已完成重新渲染
- 参数一：之前属性、参数二：之前状态
- 往往在该函数中使用dom操作，改变元素
销毁阶段
- componentWillUnmount 组件即将被销毁
- 通常在该函数中，销毁一些组件依赖的资源，比如计时器