React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > 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><h3>UseMemoPage</h3>
    <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><h3>UseCallbackPage</h3>
  <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><h3>Child</h3>
        <buttononClick={() =>console.log(addClick())}>add</button></div>   
     )
  }
}

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

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

补充介绍React的memo与useMemo及useCallback

React.memo

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

hooks的useMemo

hooks的useCallback

到此这篇关于React中useMemo与useCallback的区别的文章就介绍到这了,更多相关React useMemo与useCallback区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文