React中useMemo与useCallback的区别是什么

这篇文章主要介绍“React中useMemo与useCallback的区别是什么”，在日常操作中，相信很多人在React中useMemo与useCallback的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React中useMemo与useCallback的区别是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

useMemo

把“创建”函数和依赖项数组作为参数传⼊入useMemo，它仅会在某个依赖项改变时才重新计算memoized 值。这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计算。

importReact, { useState, useMemo } from"react";
export default functionUseMemoPage(props) {
    const [count, setCount] =useState(0);
    constexpensive=useMemo(() => {
        console.log("compute");
        let sum=0;
        for (leti=0; i<count; i++) {
            sum+=i;
        }
        return sum;//只有count变化，这⾥里里才重新执⾏行行
      }, [count]);
    const [value, setValue] =useState("");
    return (<div><h4>UseMemoPage</h4>
    <p>expensive:{expensive}</p><p>{count}</p>            
　　<button onClick={() =>setCount(count+1)}>add</button>
　　<input value={value} onChange={event=>setValue(event.target.value)} /></div>  );
}

useCallback

把内联回调函数及依赖项数组作为参数传⼊入useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更更新。当你把回调函数传递给经过优化的并使⽤用引⽤用相等性去避免⾮非必要渲染（例例如shouldComponentUpdate）的⼦子组件时，它将⾮非常有⽤用

importReact, { useState, useCallback, PureComponent } from"react";
export default function UseCallbackPage(props) {
    const [count, setCount] =useState(0);
    const addClick=useCallback(() => {
    let sum=0;
    for (leti=0; i<count; i++) {
        sum+=i;    
    }
    return sum;  
    }, [count]);
    const [value, setValue] =useState("");
    return (
    <div><h4>UseCallbackPage</h4>
　　<p>{count}</p>            
　　<buttononClick={() =>setCount(count+1)}>add</button>
　　<inputvalue={value} onChange={event=>setValue(event.target.value)} />
　　<ChildaddClick={addClick} /></div>  );
}
　　class ChildextendsPureComponent {
　　　　render() {
　　　　　　console.log("child render");
　　　　　　const { addClick } =this.props;

　　　　　　return (
　　　　　　　　<div><h4>Child</h4>
　　　　　　　　<buttononClick={() =>console.log(addClick())}>add</button></div>   
　　　　 )
　　}
}

useCallback(fn, deps)相当于useMemo(() => fn, deps)。

注意依赖项数组不不会作为参数传给“创建”函数。虽然从概念上来说它表现为：所有“创建”函数中引⽤用的值都应该出现在依赖项数组中。未来编译器器会更更加智能，届时⾃自动创建数组将成为可能。

补充介绍React的memo与useMemo及useCallback

React.memo

• 概念解析

• 将组件在相同的情况下的渲染结果，缓存渲染结果

• 当组件传入props相同的参数时，浅对比之后有之前的传入项，则复用缓存最近一次结果

• 数据对比，只做浅对比。如果需要控制对比过程，需要自己写自定义比对函数。传参数置第二个参数 -请注意不要与 shouldComponetUpdate 返回值混合

类组件通过比对数据，可以控制渲染的方式？

• React.PureComponent

• shouldComponentUpdate

hooks的useMemo

• 概念解析

• 函数组件的缓存渲染结果

• 可以将当前的组件节点颗粒化

• 通过第二个参数去判断，是否更新useMemo的回调函数

• 回调函数是一个必包，如果创建使用了 useState，会缓存 state 值，不会拿到实时更新的值

hooks的useCallback

• 概念解析

• 当父级组件传递给子级组件一个函数时，无状态组件每次都会重新生成新的props函数，导致子组件刷新

• 返回一个需要缓存的函数

• 传递需要更新的依赖项，一般回调函数内部使用的数据，都需要添加在依赖项中

• 避免父子之间，子级生成新的props函数，从而刷新子组件

• 一般联合useMemo一起使用

到此，关于“React中useMemo与useCallback的区别是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！