reactjs组件的生命周期

Posted 2020-12-01 阴阳师先生

这里的组件指的是有状态组件，只有有状态组件才有this.state和生命周期函数

React组件生命周期分为三部分：

  - **组件创建阶段**：特点：一辈子只执行一次

  >constructor：

  > componentWillMount:
   > render：
   > componentDidMount: 页面加载发送ajax 或者 进行dom操作

  - **组件运行阶段**：按需，根据 props 属性 或 state 状态的改变，有选择性的 执行 0 到多次

  > componentWillReceiveProps:
   > shouldComponentUpdate:
   > componentWillUpdate:
   > render:
   > componentDidUpdate:

  - **组件销毁阶段**：一辈子只执行一次

  > componentWillUnmount:

日志：2019-10-30

补充

react v16的生命周期函数 => 可以与旧的比较

旧的：

新的：

1. React16新的生命周期弃用了componentWillMount、componentWillReceivePorps，componentWillUpdate
2. 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceivePorps，componentWillUpdate）
3. React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceivePorps，componentWillUpdate
4. 新增了对错误的处理（componentDidCatch）