只有class组件才有生命周期，function式的组件见没有生命周期(生命周期其实就是里面的一些回调函数)
生命周期阶段
- 挂载阶段
-
constructor(props)(在这里初始化state，这个只会执行一次)，如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
通常，在 React 中，构造函数仅用于以下两种情况：
通过给this.state赋值对象来初始化内部 state，
为事件处理函数绑定实例 - static getDerivedStateFromProps()
- render(只负责渲染，这几个带will的都在render之前执行)，如果 shouldComponentUpdate() 返回 false，则不会调用 render()和componentDidMount。
-
componentDidMount(在这个获取到真实的DOM)
-注-：Ajax请求在componentDidMount()里做
这个即将不用：
UNSAFE_componentWillMount(即将挂载)会和static getDerivedStateFromProps()互斥
- 更新(当组件的props或者state发生变化时触发)
- static getDerivedStateFromProps(新版本加入，这里面没有this，在实例创建前就已经存在)
- shouldComponentUpdate(很重要，组件是否需要更新)
- render()
- getSnapshotBeforeUpdate()
-
componentDidMount()
这两个即将不用：
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps(nextProps,nextState)
- 卸载
- componentWillUnmount(在这里会清除定时器等)
- 错误处理
- static getDerivedStateFromError()
-
componentDidcatch()
生命周期图谱
image.png
shouldComponentUpdate()可以在这里做性能优化
- 第一个做法,使用shouldComponentUpdate
shouldComponentUpdate (nextProps,nextState) {
return nextProps.isCompleted !== this.props.isCompleted
}
-
第二个做法，利用PurComponent(纯组件)，是自动在shouldComponentUpdate里做了一次浅比较，所以有时候还会再做一次shouldComponentUpdate
首先需要import引入，然后在原来写component的地方用PurComponent代替
image.png
如果想要把状态切换做成state方式：
// TodoItem.js
export default class TodoItem extends Component {
constructor () {
super()
this.state = {
completedText: ''
}
}
shouldComponentUpdate (nextProps,nextState) {
return nextProps.isCompleted !== this.props.isCompleted
}
static getDerivedStateFromProps (props) {
return {
completedText: props.isCompleted ? '完成' : '未完成'
}
}
