useEffect、useMemo、useCallback使用场景分析

useEffect、useMemo、useCallback使用场景分析
- useEffect：会在组件渲染完毕后执行，和渲染无关的副作用。
- useMemo：会在在组件首次加载和重渲染期间执行，执行的函数需要和渲染相关的。
- useCallback：会在渲染期间执行，返回一个函数。
一、区别
1. useCallback 和 useMemo 的参数跟 useEffect 一致，他们之间最大的区别有是 useEffect 会用于处理副作用，而前两个hooks不能。
2. useCallback 和 useMemo 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行。
3. 并且这两个hooks都返回缓存的值，useMemo 返回缓存的变量，useCallback 返回缓存的函数。
4. 如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。
5. React.useMemo将调用fn函数并返回其结果，而React.useCallback将返回fn函数而不调用它：useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
6. useMemo缓存的变量所代表的意义不是组件的state，组件的state改变会触发组件重渲染，而useMemo缓存的变量可能会因state改变而改变，是“被动的”；
二、使用场景
```
function App() {
 
    const [name, setName] = useState('')
 
    const getName = () => {
        console.log('getName-----')
        if (name === '') {
            return "张三"
        } else {
            return name
        }
    }
 
    return (
        <div className="App">
            <p>名称：p>
            <p>{getName()}p>
            <p onClick={() => setName('哈哈')}>
                <button>改变Namebutton>
            p>
        div>
    );
}
 
 
            {name}
            <p onClick={() => setName('哈哈')}>
                <button>改变Namebutton>
            p>
        
```
);
}

getName()会在每次组件渲染的时候执行dom，尽管name没有变化，我们需要让name变化的时候才渲染dom，否则保持原有的数据，这时候就用到了useMemo。

三、使用useMemo改造


function App() {
 
    const [name, setName] = useState('')
 
    const getName = useMemo(() => {
        console.log('useMemo-----')
        if (name === '') {
            return "张三"
        } else {
            return name
        }
    },[name])
 
    return (
        <div className="App">
            <p>名称：p>
            <p>{getName}p>
            <p onClick={() => setName('哈哈')}>
                <button>改变Namebutton>
            p>
        div>
    );
}

四、使用场景区别

useCallback 对于子组件渲染优化，当做函数传递时候。
useMemo 对于当前组件高开销的计算优化。

参考示例：https://www.e-learn.cn/topic/2694248

一、区别

二、使用场景

三、使用useMemo改造

四、使用场景区别