react生命周期

react生命周期

参考
1.官方中文网
2.详解React生命周期(包括react16版)

---

1.组件的constructor构造,只是书写super(props),react会建议删除
2.componentWillMount组件挂载之前
3.render渲染
4.componentDidMount组件挂载之后(官方建议这里使用axios请求,我喜欢在1或者2)

---

更新:
componentWillReceiveProps(props变化引起的更新)中使用this.setState不回引起prop修改渲染后再一次state修改渲染,他通过判断props是否变化来激发setState重新渲染,所以不会出现第二次setState的渲染
shouldComponentUpdate(判断props或者state的状态变化来选择是否继续下一步)通过判断更新前后props或者state属性值是否改变来选择是否重新渲染组件
render()
componentDidUpdate(更新之后)

---

卸载:
componentWillUnmount卸载前处理操作

---

16推出之后
componentWillMount
componentWillReceiveProps
componentWillUpdate
由于 their potential misuse may be more problematic with async rendering(在异步渲染中潜在的滥用可能导致更大的问题),所以这三个弟弟被加了新的前缀UNSAFE_弟弟,不安全的弟弟

---

挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

---

更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

---

错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

static getDerivedStateFromError()
componentDidCatch()

---

详细可以去中文官网了解