首页 > 其他分享 >react useMemo

react useMemo

时间:2023-04-11 16:55:06浏览次数:30  
标签:缓存 渲染 useMemo react 计算 组件 row

useMemo 是 React 提供的一个用于优化组件性能的钩子函数。它可以缓存组件的计算结果,并在依赖项发生变化时重新计算。这可以避免在每次组件渲染时都重新计算相同的值,从而提高组件的性能。

useMemo 的语法如下:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

其中,computeExpensiveValue 是一个计算函数,它会在组件渲染时调用,并返回需要缓存的值。ab 是计算函数的依赖项,当依赖项发生变化时,useMemo 会重新计算缓存的值。

使用 useMemo 的一个常见场景是在渲染大量数据时进行性能优化。例如,在渲染一个表格时,我们可能需要根据表格的数据进行一些复杂的计算,如计算每行数据的总和、平均值等。如果在每次渲染时都进行这些计算,会导致页面的响应变慢。使用 useMemo 可以缓存这些计算结果,并在数据发生变化时重新计算,从而提高页面的性能。

下面是一个使用 useMemo 的示例,该示例计算一个数组的总和:

import React, { useState, useMemo } from 'react';

function App() {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);

  const sum = useMemo(() => {
    console.log('Calculating sum...');
    return numbers.reduce((acc, val) => acc + val, 0);
  }, [numbers]);

  return (
    <div>
      <p>Numbers: {numbers.join(', ')}</p>
      <p>Sum: {sum}</p>
      <button onClick={() => setNumbers([...numbers, Math.floor(Math.random() * 10)])}>
        Add Number
      </button>
    </div>
  );
}

export default App;

在上面的示例中,我们使用 useMemo 缓存了数组 numbers 的总和。当 numbers 发生变化时,useMemo 会重新计算总和。这样,我们就避免了在每次渲染时都重新计算总和的操作,从而提高了组件的性能。

需要注意的是,useMemo 的缓存值并不会在组件的多次渲染之间共享。每次渲染都会调用计算函数,并返回一个新的缓存值。因此,我们应该避免将 useMemo 的结果用作可变对象的引用,而应该将其用作值类型的数据。如果需要缓存可变对象,应该使用其他的缓存方案。

下面是一个使用 useMemo 优化表格组件性能的示例:

import React, { useMemo } from 'react';

function Table(props) {
  const { data } = props;

  const columns = useMemo(
    () => [
      {
        Header: 'ID',
        accessor: 'id',
      },
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'Age',
        accessor: 'age',
      },
      {
        Header: 'Email',
        accessor: 'email',
      },
    ],
    []
  );

  const tableData = useMemo(() => {
    console.log('Computing table data...');
    return data.map((row) => ({
      id: row.id,
      name: row.name,
      age: row.age,
      email: row.email,
    }));
  }, [data]);

  return (
    <table>
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={column.Header}>{column.Header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {tableData.map((row) => (
          <tr key={row.id}>
            <td>{row.id}</td>
            <td>{row.name}</td>
            <td>{row.age}</td>
            <td>{row.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Table;

在上面的示例中,我们使用了两个 useMemo 钩子函数:一个用于缓存表格的列定义,另一个用于缓存表格的数据。

在表格中,每次渲染都需要进行列的定义和数据的处理。由于这些操作可能比较耗时,因此我们可以使用 useMemo 缓存它们的结果。在第一次渲染时,useMemo 会计算出缓存的结果,并在后续渲染中直接使用缓存的结果,从而避免了重复计算的开销。

需要注意的是,我们在 useMemo 中指定了依赖项,以便在依赖项发生变化时重新计算缓存的结果。对于第一个 useMemo,我们没有指定任何依赖项,因为表格的列定义是静态的,不会随着时间的推移而改变。对于第二个 useMemo,我们指定了 data 作为依赖项,因为表格的数据可能会随着用户的操作而改变。

这样,我们就使用了 useMemo 钩子函数来优化表格组件的性能,从而提高了应用程序的响应速度。

标签:缓存,渲染,useMemo,react,计算,组件,row
From: https://www.cnblogs.com/wen-web/p/17306827.html

相关文章

  • electron+antdesignpro+react
    如果你想在Electron应用中使用AntDesignPro和React框架,可以按照以下步骤进行:创建一个基于React的AntDesignPro项目。将该项目作为渲染进程代码集成到Electron中。根据需要添加Electron的主进程代码。在第二步中,有两种方法将React和AntDesignPro项目......
  • react useCallback
    useCallback是一个ReactHooksAPI,它可以用于优化函数组件的性能,避免不必要的重新渲染。useCallback接受两个参数:第一个参数是一个回调函数,第二个参数是一个依赖数组,用于控制何时重新创建回调函数。当依赖数组中的任何一个值发生变化时,useCallback将返回一个新的回调函数。否......
  • react useEffect的用法
    useEffect是ReactHook的一种,用于在函数组件中定义副作用操作,比如改变DOM、发送网络请求、订阅事件等等。useEffect用于替代类组件中的生命周期方法。它接受一个函数作为第一个参数,在组件更新时调用这个函数,如果你需要在组件挂载时调用这个函数,需要传入一个空数组作为第二个参数;如......
  • 前端工程化实战:React 的模块化开发、性能优化和组件化实践
    前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。模块化开发在React中实现模块化开发的方式有两种:Com......
  • react-three-fiber
    npxcreate-react-app.当前目录下面安装className/htmlFor注视{/**/} useState第二个参数:最好使用函数来设置值,因为可能有异步的情况导致值设置不正确getItem('count')??0undefined或者null children是一个数组,可以直接写成prop的形式[...Array(4)]......
  • ReactJS到React-Native,架构原理概述
    React是一个纯JS的UI库,只能干HTML/CSS/JS提供的Web服务(新的H5API不一定支持), React-Native厉害在于它能打通JS和NativeCode,让JS能够调用丰富的原生接口,充分发挥硬件的能力,实现非常复杂的效果,同时能保证效率和跨平台性。在一定程度上,ReactNative和NodeJS有异曲同工之妙......
  • React 井字棋
    React井字棋参考React的文档,用React搞个井字棋。代码实现主要还是参考的文档,不过也在原有的基础上也做了点优化和美化。原型先看原型的构成(其实是最终做完的效果,暂且当原型用):且页面的HTML结构和CSS样式已经完成:<!DOCTYPEhtml><html><head><metacharset="UTF......
  • React的行内样式与CSS
    如何为组件添加CSS的class?传递一个字符串作为className属性:render(){return<spanclassName="menunavigation-menu">Menu</span>}CSS的class依赖组件的props或state的情况很常见:render(){letclassName='menu';if(this.props.isActive)......
  • 浅谈React与SolidJS对于JSX的应用
    React将JSX这一概念深入人心。但,并非只有React利用了JSX,VUE、SolidJS等JS库或者框架都使用了JSX这一概念。网上已经有大量关于JSX的概念与形式的讲述文章,不在本文的讨论范围。前言实际上,JSX并不是合法有效的JS代码或HTML代码。目前为止也没有任何一家浏览器的引擎实现了对JSX的......
  • 第一节:react简介和入门用法
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblogs.com/yaopengfei/声     明1:如有错误,欢迎讨论,请勿谩骂^_^。声     明2:原创博客请在转载......