React useMemo和useCallback的使用场景

 更新时间:2021年04月09日 08:57:57   作者:woking  
这篇文章主要介绍了React useMemo和useCallback的使用场景,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下

useMemo

我们知道当父组件发生重新渲染时,其所有(状态、局部变量等)都是新的。一旦子组件依赖于父组件的某一个对象变量,那么无论对象是否发生变化,子组件拿到的都是新的对象,从而使子组件对应的 diff 失效,依旧会重新执行该部分逻辑。在下面的例子中,我们的副作用依赖项中包含了父组件传入的对象参数,每次父组件发生更新时,都会触发数据请求。

function Info({
  style,
}) {
  console.log('Info 发生渲染');

  useEffect(() => {
    console.log('重新加载数据'); // 每次发生重新渲染时,都会重新加载数据
  }, [style]);

  return (
    <p style={style}>
      这是 Info 里的文字
    </p>
  );
}

function Page() {
  console.log('Page 发生渲染');

  const [count, setCount] = useState(0);
  const style = { color: 'red' };

  // 计数器 +1 时,引发 Page 的重新渲染,进而引发 Info 的重新渲染
  return (
    <div>
      <h4>计数值为:{count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <Info style={style} />
    </div>
  );
}

React Hooks 给我们提供了解决方案,useMemo 允许我们缓存传入的对象,仅当依赖项发生变化时,才重新计算并更新相应的对象。

function Page() {
  console.log('Page 发生渲染');

  const [color] = useState('red');
  const [count, setCount] = useState(0);
  const style = useMemo(() => ({ color }), [color]); // 只有 color 发生实质性改变时,style 才会变化

  // 计数器 +1 时,引发 Page 的重新渲染,进而引发 Info 的重新渲染
  // 但是由于 style 缓存了,因此不会触发 Info 内的数据重新加载
  return (
    <div>
      <h4>计数值为:{count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <Info style={style} />
    </div>
  );
}

useCallback

React Hooks 在数据流上带来的变化有两点:一是支持更友好的使用 context 进行状态管理,避免层级过多时向中间层承载无关参数;二是允许函数参与到数据流中,避免向下层组件传入多余的参数。

useContext 作为 hooks 的核心模块之一,可以获取到传入 context 的当前值,以此达到跨层通信的目的。React 官网有着详细的介绍,需要关注的是一旦 context 值发生改变,所有使用了该 context 的组件都会重新渲染。为了避免无关的组件重绘,我们需要合理的构建 context ,比如从第一节提到的新思维模式出发,按状态的相关度组织 context,将相关状态存储在同一个 context 中。

在过去,如果父子组件用到同一个数据请求方法 getData ,而该方法又依赖于上层传入的 query 值时,通常需要将 query 和 getData 方法一起传递给子组件,子组件通过判断 query 值来决定是否重新执行 getData。

class Parent extends React.Component {
   state = {
    query: 'keyword',
  }

  getData() {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${this.state.query}`;
    // 请求数据...
    console.log(`请求路径为:${url}`);
  }

  render() {
    return (
      // 传递了一个子组件不渲染的 query 值
      <Child getData={this.getData} query={this.state.query} />
    );
  }
}

class Child extends React.Component {
  componentDidMount() {
    this.props.getData();
  }

  componentDidUpdate(prevProps) {
    // if (prevProps.getData !== this.props.getData) { // 该条件始终为 true
    //   this.props.getData();
    // }
    if (prevProps.query !== this.props.query) { // 只能借助 query 值来做判断
      this.props.getData();
    }
  }

  render() {
    return (
      // ...
    );
  }
}

在 React Hooks 中 useCallback 支持我们缓存某一函数,当且仅当依赖项发生变化时,才更新该函数。这使得我们可以在子组件中配合 useEffect ,实现按需加载。通过 hooks 的配合,使得函数不再仅仅是一个方法,而是可以作为一个值参与到应用的数据流中。

function Parent() {
  const [count, setCount] = useState(0);
  const [query, setQuery] = useState('keyword');

  const getData = useCallback(() => {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${query}`;
    // 请求数据...
    console.log(`请求路径为:${url}`);
  }, [query]);  // 当且仅当 query 改变时 getData 才更新

  // 计数值的变化并不会引起 Child 重新请求数据
  return (
    <>
      <h4>计数值为:{count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <input onChange={(e) => {setQuery(e.target.value)}} />
      <Child getData={getData} />
    </>
  );
}

function Child({
  getData
}) {
  useEffect(() => {
    getData();
  }, [getData]); // 函数可以作为依赖项参与到数据流中

  return (
    // ...
  );
}

以上就是React useMemo和useCallback的使用场景的详细内容,更多关于React useMemo和useCallback的使用的资料请关注脚本之家其它相关文章!

相关文章

  • 详解开发react应用最好用的脚手架 create-react-app

    详解开发react应用最好用的脚手架 create-react-app

    本篇文章主要介绍了详解开发react应用最好用的脚手架 create-react-app,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Native时间转换格式工具类分享

    React Native时间转换格式工具类分享

    这篇文章主要为大家分享了React Native时间转换格式工具类,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • react开发中如何使用require.ensure加载es6风格的组件

    react开发中如何使用require.ensure加载es6风格的组件

    本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • react中hook介绍以及使用教程

    react中hook介绍以及使用教程

    这篇文章主要给大家介绍了关于react中hook及使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    这篇文章主要介绍了D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本) ,本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2019-05-05
  • VSCode配置react开发环境的步骤

    VSCode配置react开发环境的步骤

    本篇文章主要介绍了VSCode配置react开发环境的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React Native 脚手架的基本使用详解

    React Native 脚手架的基本使用详解

    这篇文章主要介绍了React Native 脚手架的基本使用详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React Native项目框架搭建的一些心得体会

    React Native项目框架搭建的一些心得体会

    React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。接下来通过本文给大家分享React Native项目框架搭建的一些心得体会,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • 如何对react hooks进行单元测试的方法

    如何对react hooks进行单元测试的方法

    这篇文章主要介绍了如何对react hooks进行单元测试的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • React学习之事件绑定的几种方法对比

    React学习之事件绑定的几种方法对比

    这篇文章主要给大家介绍了关于React学习之事件绑定的几种方法对比,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09

最新评论