react缓存【类组件shouldComponentUpdate/PureComponent】【子组件React.memo】【函数组件useMemo值、useCallback函数】

已于 2024-02-01 19:37:32 修改
阅读量114 收藏
点赞数
分类专栏： 前端面试 react 文章标签： react.js 前端 javascript
于 2023-10-04 16:29:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28838891/article/details/133555121
版权
本文介绍了React中的shouldComponentUpdate生命周期函数的用法，以及如何通过React.memo和useMemo进行组件优化，强调了浅比较在缓存和响应式数据中的应用，以提高性能。
摘要由CSDN通过智能技术生成

目录

类组件

生命周期函数shouldComponentUpdate ​​(nextProps, nextState)=>{return bool}​​​​

extends PureComponent，自动shouldComponentUpdate

函数组件

React.memo(函数组件(props))

钩子：useMemo、useCallback

限制：浅比较

Object.is(val0, val1)：NaN等，±0不等

useMemo(calculateValue, dependencies)：记忆值

应用：慢的1ms+，计算时间复杂度T(1000+)

 time/timeEnd：计算时间

参数说明

calculateValue：要缓存计算值的函数

fn：想要缓存的函数

useCallback(fn, dependencies)：记忆函数

memo和callback类似call和bind：返回函数但不调用

类组件

生命周期函数shouldComponentUpdate ​​(nextProps, nextState)=>{return bool}​​​​

shouldComponentUpdate = (nextProps, nextState) => {
        if(this.state.msg === nextState.msg){
            return false;
        }
        else{
            return true;//重新渲染
        }
    }

extends PureComponent，自动shouldComponentUpdate

React.PureComponent 是 React.Component 的一个子类

函数组件

React.memo(函数组件(props))

高阶组件

当父组件的 props 没有发生变化时，React.memo 会使用之前渲染的结果，从而避免重新渲染。

let Welcome = (props) => {  
    const [ count, setCount ] = useState(0);
    const handleClick= () => {
        setCount(count+1);
    }
    const foo = () => {}
    return (
        <div>
            <button onClick={handleClick}>点击</button>
            hello Welcome
            <Head onClick={foo} />
        </div>
    );
}
let Head = React.memo(() => {
    return (
        <div>hello Head, { Math.random() }</div>
    )
})

钩子：useMemo、useCallback

限制：浅比较

Object.is(val0, val1)：NaN等，±0不等

react中的比较，无论是缓存，还是响应式数据，都是用的浅比较（引用对象比较地址值）

要想比较对象，需要复制之前的对象值并新建

{
        ...state,
        age: state.age + 1
}

useMemo(calculateValue, dependencies)：记忆值

缓存返回值的方式也叫做 记忆化（memoization）

应用：慢的1ms+，计算时间复杂度T(1000+)

 time/timeEnd：计算时间

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

参数说明

calculateValue：要缓存计算值的函数

fn：想要缓存的函数

没有参数的纯函数，返回任意类型。

React 将会在首次渲染时调用该函数；

在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。

否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。

useCallback(fn, dependencies)：记忆函数

memo和callback类似call和bind：返回函数但不调用

function ProductPage({ productId, referrer, theme }) {
  // 在多次渲染中缓存函数
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // 只要这些依赖没有改变

  return (
    <div className={theme}>
      {/* ShippingForm 就会收到同样的 props 并且跳过重新渲染 */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

参宿7
关注
专栏目录
React.memo； react.memo 与useMemo区别
xbczrz的博客
06-24 888
react性能优化之react.memo
详解React.memo、useMemo、useCallback
程序员界科比的博客
04-10 1007
1：前言 最近开发中使用到了这几个API，这几个API不经常用，刚看到的时候理解也有点模糊，于是网上找了一些讲解并自己动手做了些实验，算是搞明白了。本文主要讲解React.memo、useMemo、useCallback的知识。 2：React.memo React.memo为高阶组件。 如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染..
【React】shouldComponentUpdate与React.PureComponent
richest_qi的博客
07-16 390
UI=render(data)，你负责提供data，React负责render。 React的工作就是渲染，就是操作DOM，而且是很有智慧地操作DOM。 组件的state或props变化时，React会比对这次虚拟DOM和上次虚拟DOM，然后根据二者的不同，来操作真实DOM。 index.js import React from 'react'; import ReactDOM from 'react-dom'; import CountDown from "./countDown.js"; React
React性能优化之shouldComponentUpdate
2401_84097678的博客
04-07 372
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
React 性能优化：避免不必要的渲染 - 深入探讨 `shouldComponentUpdate` 和 `PureComponent`
最新发布
weixin_41978174的博客
08-10 908
在 React 应用中，性能优化是一个需要持续关注的领域。不必要的渲染不仅会消耗系统资源，还可能导致用户体验下降。通过合理利用。
【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架
川峰的博客
01-02 1449
一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期； React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能； 生命周期和生命周期函数的关系： 生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段； 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程； 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程； 比如卸载过程（Unmount），组件从DOM树中被移除的过程；
React.useCallback(function,array)使用，React中的函数组件和类组件的取值（快照or最新值）
AIWWY的博客
11-29 1329
React.useCallback(function,array)使用，React中的函数组件和类组件的闭包、React.memo、函数组件和类组件中取值快照或最新值、
react-react面试题之提高组件的渲染效率.zip
03-20
3. **useMemo和useCallback**：这两个React Hooks分别用于值的缓存和函数的缓存。`useMemo`可以确保当依赖项未变时，返回的值不会重新计算，减少昂贵的计算开销。`useCallback`则用来缓存回调函数，防止每次渲染时...
react useMemo 缓存导致缓存组件点击事件获取不到最新值
Cahier
09-03 1545
假如我们有一下两个文件AB, 代码如下 A文件: 通过useMemo把span缓存下来了, 因为只需要menu, 第二个缓存参数只写了menu, 当我们点击span 打印出data数据, 假设初始化 data 为 1, 则打印1 const { menu, data} = useContext(Global) const [memo] const test = useMemo(()=>{ return menu.map(item=>{ return ( <span oncli
React优化子组件render的使用
10-17
对于函数式组件，React提供了一个高阶组件memo，它可以用来缓存组件的渲染结果，从而避免不必要的渲染。类似于PureComponent，memo接收一个组件作为参数，并返回一个包装过的组件。当组件的props没有变化时，memo会...
React性能优化-PureComponent、React.memo、useMemo、useCallback
EmotionComputer
06-27 442
参考官网链接：https://zh-hans.reactjs.org/docs/react-api.html#overview React.PureComponent 用在class组件中用： React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。 如果赋予 React
js--纯函数
muzidigbig的博客
11-26 267
定义 简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看： 函数的返回结果只依赖于它的参数。 函数执行过程里面没有副作用。 不能调用Date.now()或Math.random()等不纯的方法，因为每次会得到不一样的结果。 let a = 1 const foo = (b) => a + b foo(2) // => 3 foo 函数不是一个纯函数，因为它返回的结果依赖于外部变量 a，我们在不知
React入门（4）--react提升项目性能的Api(pureComponent、memo、useMemo、useCallback)
云中客的博客
05-27 453
先看下面的例子 import React, { Component } from 'react'; class Child extends Component { render() { console.log('Foo render') return null } } class App extends Component { state = { count: 0 } render() { return ( <div&...
React纯组件pureComponent、React.memo(FunComponent,compareFunction)、React.useMemo(callback,array)
AIWWY的博客
11-28 449
React纯组件pureComponent、React.memo(FunComponent,compareFunction)、React.useMemo(callback,array)
react 组件进阶之 pureComponent(纯组件)
twinkle的博客
03-13 782
阅读下面的代码，请回答 render 总共执行了多少次？这个问题涉及到react的生命周期。 代码如下 import React, { Component, PureComponent } from 'react' /** * 组件有两个状态，一个是li,另一个是添加li */ interface ITestPureComponentS { lis: number[], addLi: (li: number) => void } // 测试li 组件 class TestLi ex.
react关于组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback)
qq_50646256的博客
12-08 3687
在一个组件中, 其state变化会引起render的重新执行, 函数式组件中, 使用setHook更新state也会引起render的重新执行 render执行会带来两个方面的影响 当前组件需要重新渲染, 除了那些状态和生命周期初始化被保留的,其余正常的都会重新执行。 子组件会重新渲染, 即使其是一个无状态组件 针对上述问题, react给出来解决方案: pureComponent, React.memo, useMemo, useCallback 下面将具体说明这几个都使用场景和解决的问题：
细说useCallback问题和隐患并给出解决方案
zz_jesse的博客
03-03 7917
点上方蓝字关注公众号「前端技术江湖」本文来自作者：胡耀的投稿，原文地址：https://github.com/huyaocode/webKnowledge/issues/12官网对 use...
React Hooks系列之useCallback
Boboy
03-19 5219
前言 react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。 优势： 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更...
react.memo和usememo
03-16
使用React.memo时，需要将组件作为React.memo函数的参数传递，例如： ``` import React from 'react'; const MyComponent = React.memo(props => { // 组件代码 }); export default MyComponent; ``` useMemo是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值