让函数组件模拟生命周期

• 默认函数组件没有生命周期
• 函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期
• 使用 Effect Hook 把生命周期“钩”到纯函数中

使用总结

• 模拟Didmount 和 DidUpdate

  useEffect(() => {
  console.log('componentDidMount');
  });

• 模拟 componentDidMount ```jsx import { useEffect } from ‘React’;

useEffect(() => { console.log(‘componentDidMount’); }, []);

- 模拟 `componentDidUpdate`
```jsx
useEffect(() => {
  // 依赖项更新会触发
}, [depA, depB]);

• 模拟 componentWillUnMount

  useEffect(() => {
  return () => {
    console.log('componentWillUnMount');
  }
  }, []);

  useEffect 让纯函数有了副作用

• 默认情况下，执行纯函数，输入参数，返回结果，无副作用

• 所谓副作用，就是对函数之外造成影响，如设置全局定时任务
• 而组件需要副作用，所以需要 useEffect “钩” 到纯函数中