生命周期阶段
- 挂载阶段
- 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()
生命周期图谱
- shouldComponentUpdate()可以在这里做性能优化
-
第一个做法,使用shouldComponentUpdate
shouldComponentUpdate (nextProps,nextState) { return nextProps.isCompleted !== this.props.isCompleted }
-
第二个做法，利用PurComponent(纯组件)，是自动在shouldComponentUpdate里做了一次浅比较，所以有时候还会再做一次shouldComponentUpdate 首先需要import引入，然后在原来写component的地方用PurComponent代替
-
如果想要把状态切换做成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 ? '完成' : '未完成' } }
