React 生命周期很多人都了解，但通常我们所了解的都是 单个组件 的生命周期，但针对 Hooks 组件、多个关联组件（父子组件和兄弟组件） 的生命周期又是怎么样的喃？你有思考和了解过吗，接下来我们将完整的了解 React 生命周期。

关于 组件 ，我们这里指的是 React.Component 以及 React.PureComponent ，但是否包括 Hooks 组件喃？

一、Hooks 组件

函数组件 的本质是函数，没有 state 的概念的，因此不存在生命周期一说，仅仅是一个 render 函数而已。

但是引入 Hooks 之后就变得不同了，它能让组件在不使用 class 的情况下拥有 state，所以就有了生命周期的概念，所谓的生命周期其实就是 useState、 useEffect() 和 useLayoutEffect() 。

即：Hooks 组件（使用了Hooks的函数组件）有生命周期，而函数组件（未使用Hooks的函数组件）是没有生命周期的。

下面，是具体的 class 与 Hooks 的生命周期对应关系：

无状态（hooks）组件的钩子函数

**const** MyComponent **=** React.memo((props) =>{
　　　**const** [name,setName] **=** React.useState('name');
 
   React.useMemo(() => ()=>{
      console.log('组件dom节点没有渲染之前调用一次');
   }, []);

   **const** renderDom **=** React.useMemo(() => ()=>{
      console.log('组件dom节点没有渲染之前根据依赖参数props调用');
   }, [props])

   React.useEffect(() => {
      console.log('组件初始化调用一次');
   }, [])

   React.useEffect(()=>{
      console.log('组件根据依赖参数props更新调用');
   },[props])

   React.useEffect(()=>{
      **return** ()=>{
         console.log('组件卸载调用');
      }
   },[]);

   **const** handleClick **=** React.useCallback(() =>{
      console.log('监听事件通过钩子函数包裹，优化性能');
   },[]);

   **return** (
      console.log('返回dom节点');
   )
});

1、useState：

和class的state类似，只不过是独立管理组件变量，

2、useMemo:

组件Dom节点，进行计算一些，包括要渲染的Dom或者数据，根据依赖参数进行更新

3、useEffect：

hooks的组件生命周期其实就是钩子函数useEffect的不同用法，传递参数的不同会导致不同的结果，具体分析见React.useEffect参数不同

4、useCallBack:

一个钩子函数，通过包裹我们的普通函数进行性能优化；

注意事项

useState 只在初始化时执行一次，后面不再执行；