React.memo

介绍React.memo之前,先了解一下React.ComponentReact.PureComponent

React.Component

React.Component是基于ES6 class的React组件。

React允许定义一个class或者function作为组件,那么定义一个组件类,就需要继承React.Component.

例如:


class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

注意:继承React.Component的React组件类中,render()为必须方法,其他都为可选。

React.PureComponent

React.PureComponentReact.Component类似,都是定义一个组件类。不同是React.Component没有实现shouldComponentUpdate(),而 React.PureComponent通过propsstate的浅比较实现了。

如果组件的propsstate相同时,render的内容也一致,那么就可以使用React.PureComponent了,这样可以提高组件的性能。

例如:


class Welcome extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

当props和state中有复杂数据结果时,不好使用PureComponent

React.memo

React.memo是一个高阶组件,类似于React.PureComponent,不同于React.memofunction组件,React.PureComponentclass组件。

示例:


const MyComponent = React.memo(props => {
  /* render using props */
  return (

  );
});

这种方式依然是一种对象的浅比较,有复杂对象时无法render。在React.memo中可以自定义其比较方法的实现。

例如:


function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

该方法在V16.6.0才支持

推荐阅读《React 手稿》

来源:https://segmentfault.com/a/1190000016933809

原文地址:https://www.cnblogs.com/datiangou/p/10158690.html

时间: 2024-11-12 20:03:21

React.memo的相关文章

[React] Preventing extra re-rendering with function component by using React.memo and useCallback

Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle it. Have a TodoList component, every time types in NewTodo input fields, will trigger the re-rendering for all components. import React, { useState, us

React.memo与PureComponent

React.memo是一个高阶组件,本质就是一个函数.基本形式如下: React.memo(functionl Component, areEqual) React.memo与PureComponent作用一样,都是用来减少组件渲染.区别如下: 1.  React.memo针对函数式组件,PureComponent针对类组件 2. React.memo可以传入第二个参数,props比较函数,自定义比较逻辑,PureComponent只会使用默认的props浅比较 原文地址:https://www

React性能优化之PureComponent 和 memo使用分析

前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈react性能优化. 其主要目的就是防止不必要的子组件渲染更新. 子组件何时更新? 首先我们看个例子,父组件如下: import React,{Component} from 'react'; import ComponentSon from './components/ComponentSon'; im

【React Hooks】memo和useCallback搭配所带来的性能优化

前言 最近在用ts+hooks这些新特性开发新的项目,前沿的东西开发的感觉是很丝滑美妙的,时时刻刻都在踩坑,无法自拔. 问题描述 目录结构大概是这样的 --RtDetail ----Home ------index.scss ------index.tsx ----Search ------index.scss ------index.tsx ----Detail ------index.scss ------index.tsx 然后我在Home组件中引入了Search和Detail组件,伪代码

React 顶层 API

概览 组件 使用 React 组件可以将 UI 拆分为独立且复用的代码片段,每部分都可独立维护.你可以通过子类 React.Component 或 React.PureComponent 来定义 React 组件. React.Component React.PureComponent 如果你不使用 ES6 的 class,则可以使用 create-react-class 模块来替代.请参阅不使用 ES6 以获取更多详细信息. React 组件也可以被定义为可被包装的函数: React.memo

React Hooks究竟是什么呢?

摘要: React Hooks原理解析. 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能? React 早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接 16.6 出来的 React.memo函数. React 16.8 新出来的Hook可以让React 函数

2019年17道高频React面试题及详解

以下面试题来源于github项目前端面试指南,那里有超过200道高频前端面试题及答案,目前拥有1400star. 为什么选择使用框架而不是原生?框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护.易于组合拓展.天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC.MVP还是MVVM 模式都能帮助我们进行分层,代码解耦更易于读写.生态: 现在主流前端框架都自带生态,不管是数据流管理

react新特性介绍

10月23日,React发布了16.6版本,在此版本中带来了一些非常有用的新特性.主要的新特性包括: context suspense memo React.memo() Using memo() React.memo() 是能作用在简单的函数组件,类似于React.PureComponent对于class组件的作用.它本质上是一个高阶函数,达到的效果就是,自动帮组件执行shouldComponentUpdate() , 但是只是执行浅比较 React.lazy() static context

React性能优化相关

React渲染页面包括两个很重要的组成部分: 1.构建虚拟dom 2.根据虚拟dom变化渲染真实dom 对于第二部分来说,我们很难深入到React核心的diff算法等,因此主要从第一部分入手来优化性能. 针对第一部分,从优化角度来说,最直观想到的就是缩短构建虚拟dom的时间.具体到组件层面,就是减少无状态组件的函数执行以及类组件的render. 函数组件: hooks是专门针对函数组件来设计的模式,如果不使用hooks,函数组件便无法保存和管理自己的状态,直白一点理解就是函数每次执行的时候内部的