react里useEffect、useMemo的区别

useEffect

Effect Hook可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找dom 
 

useEffect类似于class组件中的生命周期函数，useEffect可以代替class组件中的三个生命周期，分别是：

componentDidMount 组件渲染执行函数、

componentDidUpdate 组件更新执行的函数、

componentWillUnmount 组件销毁执行时函数

const [count, setCount] = useState(0);

useEffect(() => {
    console.log('xxx') // 表示你要执行的动作
}, [count]); // 表示在count的值发生变化的时候，useEffect中的方法再执行一次，类似componentDidUpdate函数

useEffect是一个方法，其中有两个参数，一个是一个方法，表示你要执行的动作，另一个是依赖项，表示什么时候更新。

如果useEffect中第二个参数不填，表示只在组件第一次渲染的时候执行，类似于componentDidMount函数

  useEffect(() => {
    const timer = setInterval(() => {
      // do something
    }, 1000);

    // 表示在组件销毁的时候执行清楚定时器的动作，类似于componentWillUnmount函数
    return () => clearInterval(timer);
  }, []);

useEffect 的第二个参数，有三种情况

1、什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
2、传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
3、传入一个数组，其中包括变量，只有这些变量任意一个变动时，useEffect 才会执行

useMemo（主要针对当前组件中使用函数，优化性能）

useEffect和组件的生命周期有关，但useMemo跟生命周期不挂钩。

useMemo 是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate， 判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。

const [ count, setCount ] = useState(0)
const add = useMemo(() => count + 1 , [count])


<div>
  点击次数: { count }<br/>
  次数加一: { add }<br/>
  <button onClick={() => { setCount(count + 1)}}>点我</button>
</div>
  

参考文档：

React Hooks: 深入剖析 useMemo 和 useEffect - 知乎

React Hook 理解使用 useState、useEffect、useContext、useRef、自定义hook_芝芝葡萄的博客-CSDN博客_自定义hook的使用场景