1. 挂载时
2. 更新时
3. 卸载时

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram
https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops

componentWillUpdate死循环问题

1. shouldCompnentUpdate & componentWillUpdate中不能修改 this.setState
   1. 会引起循环引用，导致 render无法被调用，死循环
2. componentWillReceiveProps中修改 this.setState也会引起死循环
   1. antd Form.setFieldValues也会引起死循环，一定要对比值

state问题

1. 只有在 render及之后的声明周期方法中，this.state才指向更新后的 state
2. render之前的方法
   1. shouldComponentUpdate
   2. componentWillUpdate
   3. this.state指向的是更新前的 state

常用的生命周期

1. 只有 class类组件才有声明周期
2. 函数组件没有生命周期；不要在函数组件中调用声明周期方法

1 挂载时

2 更新时

3 卸载时

1. componentWillUnmount 组件被卸载前调用
2. 执行清除工作
   1. 清除定时器，绑定的事件，第三库的DOM元素；避免内存泄漏

全部的生命周期

getDerivedStateFromProps

1. static getDerivedStateFromProps

2. static方法里面，没有 this

   1. https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops
   2. return null 不渲染 ```jsx class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; }

   static getDerivedStateFromError(error) { // 更新 state 使下一次渲染可以显降级 UI return { hasError: true }; } render() { if (this.state.hasError) { // 你可以渲染任何自定义的降级 UI return

   Something went wrong.

   ; } return this.props.children; } } ```

getSanpshotBeforeUpdate

1. static getSanpshotBeforeUpdate

   1. https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate ```jsx class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); }

   getSnapshotBeforeUpdate(prevProps, prevState) { // 我们是否在 list 中添加新的 items ？ // 捕获滚动位置以便我们稍后调整滚动位置。 if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; }

   componentDidUpdate(prevProps, prevState, snapshot) { // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items， // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。 //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值） if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } }

   render() { return (

   {/ …contents… /}
   ); } } ```