导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

组件卸载

ReactDOM.unmountComponentAtNode(document.getElementById('demo'))

生命周期

旧

• constructor 调用构造器

• componentWillMount 组件将要挂载（用 render 挂载，所以 render 在下边）

• render 初始化渲染，状态更新以后

• componentDidMount 组件挂载完毕（render之后调用）

• componentWillUnmount 组件将要被卸载时

• shouldComponentUpdate 组件是否应该被更新

  • 控制组件更新的“阀门”
  • 默认 return true

• componentWillUpdate 组件将要被更新

• componentDidUpdate(preProps, preState,snapshotValue) 组件更新完毕的钩子

  • 参数是上一次的的props和state
  • snapshotValue 是新生命周期钩子 getSnapshotBeforeUpdate 传过来的

• componentWillRecevieProps(props) 组件将要接受新的props（父组件调用render ，子组件就会调用此钩子）

  • 子组件第一次接受父组件的props，此钩子不会被调用

• forceUpdate 方法：不更改任何状态中的数据，强制更新一下

总结

新

• static getDerivedStateFromProps(props, state) 从props中派生出一个状态
  • 类的静态方法
  • 必须返回状态对象或者null
  • 使用场景（低，不常用）：
    • state的值在任何时候都取决于 props 时，可以使用此钩子
    • 比如自己state中有个属性，传入的props也有这个属性，那么就在这个钩子中比较下，看什么条件下用父组件传入的，什么时候用自己的
• getSnapshotBeforeUpdate 在更新之前获取快照（在最近一次渲染输出（提交到DOM节点）之前调用）
  • 返回值将作为参数传递给 componentDidUpdate
  • 返回 snapshotValue 或者 null
  • 使用场景：特殊方式处理滚动位置的聊天线程等（新消息出现，当前看的消息固定定位）

总结