介绍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

React.memo的更多相关文章

  1. [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 i ...

  2. [React] Use React.memo with a Function Component to get PureComponent Behavior

    A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This be ...

  3. React.Component 和 React.PureComponent 、React.memo 的区别

    一 结论 React.Component 是没有做任何渲染优化的,但凡调用this.setState 就会执行render的刷新操作. React.PureComponent 是继承自Componen ...

  4. React.memo All In One

    React.memo All In One https://reactjs.org/docs/react-api.html#components React.memo const MyComponen ...

  5. 30分钟学会React Hook, Memo, Lazy

    我们来学习React 16.8里的新特性. 1. 自行配置好React的环境,推荐你使用Create React APP, 你也可以下载本文档Zip解压到本地直接运行. https://github. ...

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

    前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...

  7. React 特性剪辑(版本 16.0 ~ 16.9)

    Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...

  8. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  9. 一、基础知识 React API 一览

    1.10 Hooks 参考文章:https://juejin.im/post/5be3ea136fb9a049f9121014 demo: /** * 必须要react和react-dom 16.7以 ...

随机推荐

  1. Flask【第5篇】:用Falsk实现的分页

    用flask实现的分页 一.flask实现的分页组件 from urllib.parse import urlencode,quote,unquote class Pagination(object) ...

  2. SpringCloud学习系列-Rest微服务构建

    总体介绍 承接着我们的springmvc+mybatis+mysql初级高级课程,以Dept部门模块做一个微服务通用案例Consumer消费者(Client)通过REST调用Provider提供者(S ...

  3. 【NOIP2012模拟8.20】Memory

    题目 话说某一天,CD在爬树的时候发现了树干上有一大串奇怪的符文,于是好奇的CD就从头到尾看了一遍.看完一遍以后CD觉得,最后一段文字好像很眼熟,好像在前面见过.对于CD来说,一开始看到的符文会印象特 ...

  4. 【leetcode】473. Matchsticks to Square

    题目如下: 解题思路:居然把卖火柴的小女孩都搬出来了.题目的意思是输入一个数组,判断能否把数组分成四个子数组,使得每个子数组的和相等.首先我们可以很容易的求出每个子数组的和应该是avg = sum(n ...

  5. C# 基础:DataTable操作、发邮件

    本文出自:https://www.cnblogs.com/2186009311CFF/p/6865909.html DataTable操作 据参数删除为0的列:包括遍历.删除.取值 public st ...

  6. 【BZOJ1132】Tro(叉积)

    题意:平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 N个点的坐标,其值在[0,10000] 思路:按从左到右的预处理点排序 每次枚举最左点作为原点,把叉积从大到小排 ...

  7. window cmd 命令行下创建文件夹和文件

    新建文件夹命令: makedir 文件名 新建文件命令: type null> 文件名.文件类型 链接

  8. Windows 搭建Hadoop 2.7.3开发环境

    1.安装配置Java环境 1.1.安装Windows版本的jkd应用程序 当前的系统环境是64位Windows 7,因此下载64位JDK,下载地址:http://download.oracle.com ...

  9. [Codeforces 274E]:Mirror Room(模拟)

    题目传送门 题目描述 有一个$n\times m$的格子图,其中有一些是黑色的,另一些为白色.从某个白色格子的中心点向左上($NW$),左下($SW$),右上($NE$),右下($SE$)四个方向中的 ...

  10. UI自动化之js\jquery的应用

    js\jquery的应用,有很多难以定位到的,可以通过js或者jquery来处理 目录 1.js 2.jquery 1.js 1.1js有5种定位,最后execute_script(js)来执行js ...