react生命周期

componentWillMount( )

在渲染前调用，在服务器端也客户端

render( )

渲染

componentDidMount( )

在第一次渲染后调用，只在客户端。此时已经生成了dom结构，可以在这个函数中调用setTimeout（），setInterval、发送AJAX请求等
componentDidMount() 方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。

componentWillReceiveProps （）

在组件接收一个新的props时被调用，这个方法在初始化render时不会被调用

shouldComponentUpdate( )

返回一个boolean值，当组件接收新的props或者state时调用，这个方法在初始化的时候不会被调用。
可以在你确认不需要更新组件时使用

componentWillUpdate()

在组件接收新的props或者state后，准备更新组件,还没有render()时调用

componentDidUpdate( )

在组件完成更新后立即调用

componentWillUnMount()

在组件卸载之前调用

image.png

新生命周期 getDerivedStateFromProps

react16.4新版本后出现
这个生命周期替换了componentWIllReceiverProps ，他是一个静态函数，也就是说不能通过this来访问class的属性，也不推荐直接访问，
而是通过参数nextProps，和preState比较来判断，根据新传入的props来映射state，
如果传入的props不影响state，则返回null

static getDerivedStateFromProps(nextProps,prevState){

    // state无更新时return null
    return null;
}

getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate 函数调用于 render 函数之后 componentDidUpdate 函数之前，主要用于获取更新前的 DOM 元素的信息。

hooks函数组件

useEffect 介绍
useEffect 函数用于创建一个 effect hook。effect hooks 用于在函数式组件的更新后执行一些 side effects，其之于函数式组件就相当于 componentDidMount 和 componentDidUpdate 之于 class 组件。useEffect 的基本用法为：

const App = () => {
   const [text, setText] = useState('');
   useEffect(() => {
       window.addEventListener('keydown', writing, false);
       return () => {
           window.removeEventListener('keydown', writing, false);
       }
   });
   function writing(e){
       setText(text + e.key);
   }
   return (
       <div className="App">
           <p>{text}</p>
       </div>
   );
};