React中Memo实现指定组件进行渲染

最新推荐文章于 2024-06-09 14:14:34 发布
最新推荐文章于 2024-06-09 14:14:34 发布
阅读量1.2k 收藏 3
点赞数 2
分类专栏： react 文章标签： react memo PureComponent
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013565133/article/details/104000153
版权

memo可以解决react渲染时的效率问题，react可以将数据渲染在视图中，如果数据没有变化，视图还是重新渲染

import React, { Component } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
class Foo extends Component {
  render() {
    console.log('Foo reander');
    return null;
  }
}

class App extends Component {

  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button
          onClick={() => { this.setState({ count: this.state.count + 1 }) }}>
          Add
        </button>
        <Foo name="happychen" />
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
发现每次点击Foo子组件就会被重新渲染，即使它里面的数据没有发生变化不需要重新渲染，这就可以优化。react中有个生命周期函数shouldComponentUpdate可以控制组件是否重新渲染。

import React, { Component } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

class Foo extends Component {
  render() {
    console.log('Foo reander');
    return null;
  }
}

class App extends Component {

  state = {
    count: 0
  };

  //nextProps是下次渲染用到的props
  shouldComponentUpdate(nextProps, nextState) {
    //将下次渲染用到的props和当前props对比
    if (nextProps.name === this.props.name) {
      return false;//返回false则当前组件不会被重新渲染
    }
    return true;//返回true则当前组件需要被重新渲染
  }

  render() {
    return (
      <div className="app">
        <p>{this.state.count}</p>
        <button
          onClick={() => { this.setState({ count: this.state.count + 1 }) }}>
          Add
        </button>
        <Foo name="happychen" />
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
虽然App组件重新渲染了，但在它的子组件Foo中加上shouldComponentUpdate生命周期函数后，Foo组件可以通过name前后值是否发生变化来判断是否重新渲染。
也可以通过react中的PureComponent组件达到同样的效果。

import React, { Component, PureComponent } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

class Foo extends PureComponent {
  render() {
    console.log('Foo reander');
    return null;
  }
}

class App extends Component {

  state = {
    count: 0
  };

  render() {
    return (
      <div className="app">
        <p>{this.state.count}</p>
        <button
          onClick={() => { this.setState({ count: this.state.count + 1 }) }}>
          Add
        </button>
        <Foo name="happychen" />
      </div>
    )
  }
}

export default App;

但是PureComponent的实现和使用场景是有局限性的，比如在state中定义一个引用类型的状态。

import React, { Component, PureComponent } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

class Foo extends PureComponent {
  render() {
    console.log('Foo reander');
    return <div>子组件person.age的值：{this.props.person.age}</div>;
  }
}

class App extends Component {

  state = {
    count: 0,
    person: {
      age: 18
    }
  };

  render() {
    const person = this.state.person;
    return (
      <div className="app">
        <p>父组件person.age的值：{person.age}</p>
        <Foo person={person} />
        <button
          onClick={() => {
            person.age++;
            this.setState({
              person
            })
          }}>
          Add
        </button>
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
此时Foo组件本应该重新渲染但并没有重新渲染，是因为PureComponent提供的shouldComponentUpdate发现person的句柄本身没有发生变化才拒绝重新渲染。只有传入的props第一级发生变化才会触发重新渲染。

另外一个陷阱是：下面不改变person属性的值，而是向Foo组件传入一个回调函数。

import React, { Component, PureComponent } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

class Foo extends PureComponent {
  render() {
    console.log('Foo reander');
    return <div>子组件person.age的值：{this.props.person.age}</div>;
  }
}

class App extends Component {

  state = {
    count: 0,
    person: {
      age: 18
    }
  };



  render() {
    const person = this.state.person;
    return (
      <div className="app">
        <p>父组件person.age的值：{person.age}</p>
        <Foo person={person} cb={() => { }} />
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            })
          }}>
          Add
        </button>
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
这是因为虽然person本身没有发生变化，但每次父组件重新渲染时 传入子组件的内联函数句柄会发生变化，所以Foo组件依然每次重新渲染。

换种回调函数写法：

import React, { Component, PureComponent } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

class Foo extends PureComponent {
  render() {
    console.log('Foo reander');
    return <div>子组件person.age的值：{this.props.person.age}</div>;
  }
}

class App extends Component {

  state = {
    count: 0,
    person: {
      age: 18
    }
  };

  callback(){}

  render() {
    const person = this.state.person;
    return (
      <div className="app">
        <p>父组件person.age的值：{person.age}</p>
        <Foo person={person} cb={this.callback} />
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            })
          }}>
          Add
        </button>
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
Foo组件没有重新渲染。但这样导致的后果是callback函数中的this指向会发生变化。

接着修改this的指向<Foo person={person} cb={this.callback.bind(this)} />，这样依然会创建新的函数对象，修改完this的指向后Foo组件还是会每次重新渲染。

接着改：将callback改成类属性

import React, { Component, PureComponent } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

class Foo extends PureComponent {
  render() {
    console.log('Foo reander');
    return <div>子组件person.age的值：{this.props.person.age}</div>;
  }
}

class App extends Component {

  state = {
    count: 0,
    person: {
      age: 18
    }
  };

  callback = () => { }

  render() {
    const person = this.state.person;
    return (
      <div className="app">
        <p>count值：{this.state.count}</p>
        <Foo person={person} cb={this.callback} />
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            })
          }}>
          Add
        </button>
      </div>
    )
  }
}

export default App;

这样利用箭头函数不会修改this指向，运行发现Foo组件不会每次重新渲染，这样就相对完美了，这是最常见的写法。

将Foo组件改写成函数组件：

import React, { Component, PureComponent } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

function Foo(props){
    console.log('Foo reander');
    return <div>子组件person.age的值：{props.person.age}</div>;
}

class App extends Component{

  state = {
    count: 0,
    person: {
      age: 18
    }
  };

  callback = () => { }

  render() {
    const person = this.state.person;
    return (
      <div className="app">
        <p>count值：{this.state.count}</p>
        <Foo person={person} cb={this.callback} />
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            })
          }}>
          Add
        </button>
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
此时PureComponent组件的特性没有用到了，Foo组件会被重新渲染。接着将函数Foo组件用react的memo包裹起来返回新的组件：

import React, { Component,memo } from 'react';
// , PureComponent, memo, useState, useMemo, useCallback
import './App.css';

const Foo = memo(function Foo(props){
    console.log('Foo reander');
    return <div>子组件person.age的值：{props.person.age}</div>;
})

class App extends Component{

  state = {
    count: 0,
    person: {
      age: 18
    }
  };

  callback = () => { }

  render() {
    const person = this.state.person;
    return (
      <div className="app">
        <p>count值：{this.state.count}</p>
        <Foo person={person} cb={this.callback} />
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            })
          }}>
          Add
        </button>
      </div>
    )
  }
}

export default App;

效果：
在这里插入图片描述
将Foo组件用react的memo包裹起来，App父组件发生变化时Foo组件没有被重新渲染。

PureComponent为组件提供了对比算法来避免组件做无意义的渲染，减少性能开销。而无状态组件是函数式的，不能继承PureComponent，但可以用memo包裹函数式组件达到同样的效果。

背太阳的牧羊人
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用MEMO优化函数组件重复渲染问题
chx_xuxu的专栏
04-30 387
使用memo,useCallback,useMemo优化函数组件重复渲染问题
React.memo例子
Wangdanting123的博客
01-12 1684
1. React.memo是一个高阶组件，类似于React.PureComponent，不同于React.memo是function组件，React.PureComponent是class组件。 2. 这种方式依然是一种对象的浅比较，有复杂对象时无法render。 3. 在React.memo中可以自定义其比较方法的实现（可选参数）。 //MyComponent.js import Re...
React-useMemo
qq_35260673的博客
06-09 892
总结了useMemo这个React Hook的用法
通过 useMemo 和 memo 渲染优化
文摘资讯
05-24 122
useMemo Hook 允许你通过「记住」上一次计算结果的方式在多次渲染的之间缓存计算结果：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);这行代码会调用 computeExpensiveValue(a, b)。但如果依赖数组 [a, b] 自上次赋值以来没有改变过，useMemo 会跳过二次...
React 16.6 之 React.memo()
包磊磊的博客
04-25 553
React.memo() React 16.6.0 发布了 主要更新了两个新的重要功能： React.memo() React.lazy(): 使用 React Suspense 进行代码拆分和懒加载 今天我们会重点介绍 React.memo()，后续会介绍 React.lazy() 和 Suspense。 React.memo() 是什么？ React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。 组件仅在它的 props 发生改变的时候进行重新.
react 控制按钮渲染_使用React Memo控制渲染
weixin_26750481的博客
09-07 364
react 控制按钮渲染Before React Hooks was introduced in React 16.8, we were switching between class- and function components. All the class components contained the state and the function components containe...
react-react面试题之提高组件的渲染效率.zip
03-20
以下是一些核心知识点，涵盖了如何在React面试中讨论提高组件渲染效率的主题： 1. **PureComponent和shouldComponentUpdate**：React中的PureComponent是React.Component的一个优化版本，它会对props和state进行浅...
详解使用React.memo()来优化函数组件的性能
10-17
React团队一直在不断改进，提供各种机制来避免不必要的组件渲染，从而提高性能。本文将深入探讨如何利用`shouldComponentUpdate`生命周期方法、`PureComponent`以及新引入的`React.memo()`来优化函数组件的性能。 ...
基于react实现的图片预览组件源代码
最新发布
06-12
在本文中，我们将深入探讨如何基于React实现一个功能丰富的图片预览组件，这个组件具有多种交互功能，如左右切换、手势操作以及键盘控制等。首先，我们要了解React的基础概念，它是Facebook开发的一个JavaScript库，...
ReactNative中组件变量方法的导入导出共1页.pd
11-22
- **React.memo**：对于无状态组件（Functional Component），可以包裹在`React.memo`中，以类似PureComponent的方式进行浅比较，防止不必要的重渲染。 6. **热重载（Hot Reloading）**：React Native支持热重载，...
React中的hook useMemo()参数可以是一个组件吗？组件作为参数有什么作用呢？
FanfanIT01的博客
03-22 361
的第一个参数，那么你可以使用 React.memo() 进行包装，这个函数会将组件进行记忆化，只有在组件的 props 发生变化时，才会重新渲染组件。这样可以避免不必要的渲染开销，提高应用的性能。的第一个参数中，你可以传递一个组件，但是通常情况下，我们不建议这样做。因为组件本质上是一种函数，而且渲染组件的过程本身就是一个开销很大的操作，将其作为。的作用是缓存函数的结果，并且只有当依赖项数组中的值发生变化时，才会重新计算。发生变化时才会重新渲染组件，避免了不必要的开销。但是，如果你确实需要将组件作为。
react hook函数组件之 useMemo、useCallback 、useRef
weixin_43828291的博客
04-10 3461
要想学习useMemo、useCallback 必须要先知道React.memo memo的作用: 当父组件数据变化时，代码会重新执行一遍，但是子组件数据没有变化也会跟随执行，这个时候可以使用memo将子组件封装起来，让子组件的数据只在发生改变时才会执行,节约子组件渲染的性能开销(一定要注意一点，useMemo、useCallback做性能优化时子组件要用memo包裹，没有这个前提，useMemo、useCallback优化是没用的！） 简单来说useMemo(用作缓存一个值),useCallb...
对比之前的组件优化说明React.memo的作用
weixin_45966674的博客
06-21 843
这样 我们就相当于写了个条件 如果 state 和 this.state中的cont不一样 那就是true 允许后面的生命周期执行 否则 直接返回false 后面的生命周期就不会执行 包括render。很明显 我们的子组件dom1并没有和父组件的 cont 发生关系 但 父组件的cont每次变化 dom1 也都跟着重新渲染了。需要注意的是 shouldComponentUpdate接回来的这个state中的值 是更改之前的。
React.memo的使用场景及原理
attengtiong的博客
02-25 2233
memo的原理 语法：React.memo(组件); 使用场景：当父组件重新渲染，没必要重新渲染的子组件可以使用memo包起来。 function Child(props){ console.log('Child'); return ( <button>Child</button> ) } // memo：如果你想让一个函数组件有一个功能，如果属性不变，就不要刷新。 Child=React.memo(Child); function App() { let
六分钟带你学会 react 中的 useMemo
JackChan
01-04 2803
六分钟带你学会 react 中的 useMemo
React,Hooks中useMemo的使用
weixin_45389051的博客
07-29 3791
useMemo:是为了性能的优化 1.useCallback会返回一个函数的memoized(记忆的)值 2.在依赖不变的情况下,多次定义的时候,返回的值是相同的 演示两个案例 一.复杂计算的应用 import React, { useState, useMemo } from 'react' function allTotal(count){ console.log('重新计算') let total = 0 for(let i = 0;i<=count;i++){ tota
使用 useMemo,useCallback，Reat.memo() 处理不必要的子组件渲染，以及它的实现原理
冲锋
06-24 1002
场景1- 演示一个子组件更新 父组件中一个输入框， 输入值，父组件更新， 同时引入子组件，但子组件也会跟着更新 import React, { useState } from "react"; import ReactDOM from "react-dom"; // 子组件 function Bpp() { console.log("%c Bpp render", "color:green"); return ( <> <div&g
React进阶用法和hooks的个人使用见解(Typescript版本) - 3.useCallback+useMemo+memo性能优化
mackJun的博客
08-17 6576
3.useCallback+useMemo+memo性能优化场景使用 当父组件引入子组件的情况下，往往会造成组件之间的一些不必要的浪费，下面我们通过例子来了解一下场景 3.1创建一个test.tsx文件，我们拷贝上篇博客的useState的案例 import React, { useState } from 'react'; function Test() { const [count, ...
react的useMemo
热门推荐
xiaohesong
11-22 1万+
英文: Understanding Memoization in JavaScript to Improve Performance 中文: 了解JavaScript中的Memoization以提高性能–react的应用 我们渴望提高应用程序的性能，Memoization是JavaScript中的一种技术，通过缓存结果并在下一个操作中重新使用缓存来加速查找费时的操作。 在这里，我们将看到memoi...
react 父函数组件中阻止子组件渲染
09-08
在React中，如果希望在父函数组件中阻止子组件渲染，可以使用React的shouldComponentUpdate()方法或者React的memo()函数来实现。 对于使用class组件的父函数组件，可以重写shouldComponentUpdate()方法，该方法决定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值