useEffectuseMemouseCallback使用场景分析

Posted 2022-11-01 一杯清泉

• 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>改变Name</button>
            </p>
        </div>
    );



            <p>name</p>
            <p onClick=() => setName('哈哈')>
                <button>改变Name</button>
            </p>
        </div>
    );

        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>改变Name</button>
            </p>
        </div>
    );

四、使用场景区别

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

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