React.memo
介绍React.memo
之前,先了解一下React.Component
和React.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.PureComponent
和 React.Component
类似,都是定义一个组件类。不同是React.Component
没有实现shouldComponentUpdate()
,而 React.PureComponent
通过props
和state
的浅比较实现了。
如果组件的props
和state
相同时,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.memo
是function
组件,React.PureComponent
是class
组件。
示例:
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的更多相关文章
- [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 ...
- [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 ...
- React.Component 和 React.PureComponent 、React.memo 的区别
一 结论 React.Component 是没有做任何渲染优化的,但凡调用this.setState 就会执行render的刷新操作. React.PureComponent 是继承自Componen ...
- React.memo All In One
React.memo All In One https://reactjs.org/docs/react-api.html#components React.memo const MyComponen ...
- 30分钟学会React Hook, Memo, Lazy
我们来学习React 16.8里的新特性. 1. 自行配置好React的环境,推荐你使用Create React APP, 你也可以下载本文档Zip解压到本地直接运行. https://github. ...
- React性能优化之PureComponent 和 memo使用分析
前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...
- React 特性剪辑(版本 16.0 ~ 16.9)
Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- 一、基础知识 React API 一览
1.10 Hooks 参考文章:https://juejin.im/post/5be3ea136fb9a049f9121014 demo: /** * 必须要react和react-dom 16.7以 ...
随机推荐
- Flask【第5篇】:用Falsk实现的分页
用flask实现的分页 一.flask实现的分页组件 from urllib.parse import urlencode,quote,unquote class Pagination(object) ...
- SpringCloud学习系列-Rest微服务构建
总体介绍 承接着我们的springmvc+mybatis+mysql初级高级课程,以Dept部门模块做一个微服务通用案例Consumer消费者(Client)通过REST调用Provider提供者(S ...
- 【NOIP2012模拟8.20】Memory
题目 话说某一天,CD在爬树的时候发现了树干上有一大串奇怪的符文,于是好奇的CD就从头到尾看了一遍.看完一遍以后CD觉得,最后一段文字好像很眼熟,好像在前面见过.对于CD来说,一开始看到的符文会印象特 ...
- 【leetcode】473. Matchsticks to Square
题目如下: 解题思路:居然把卖火柴的小女孩都搬出来了.题目的意思是输入一个数组,判断能否把数组分成四个子数组,使得每个子数组的和相等.首先我们可以很容易的求出每个子数组的和应该是avg = sum(n ...
- C# 基础:DataTable操作、发邮件
本文出自:https://www.cnblogs.com/2186009311CFF/p/6865909.html DataTable操作 据参数删除为0的列:包括遍历.删除.取值 public st ...
- 【BZOJ1132】Tro(叉积)
题意:平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 N个点的坐标,其值在[0,10000] 思路:按从左到右的预处理点排序 每次枚举最左点作为原点,把叉积从大到小排 ...
- window cmd 命令行下创建文件夹和文件
新建文件夹命令: makedir 文件名 新建文件命令: type null> 文件名.文件类型 链接
- Windows 搭建Hadoop 2.7.3开发环境
1.安装配置Java环境 1.1.安装Windows版本的jkd应用程序 当前的系统环境是64位Windows 7,因此下载64位JDK,下载地址:http://download.oracle.com ...
- [Codeforces 274E]:Mirror Room(模拟)
题目传送门 题目描述 有一个$n\times m$的格子图,其中有一些是黑色的,另一些为白色.从某个白色格子的中心点向左上($NW$),左下($SW$),右上($NE$),右下($SE$)四个方向中的 ...
- UI自动化之js\jquery的应用
js\jquery的应用,有很多难以定位到的,可以通过js或者jquery来处理 目录 1.js 2.jquery 1.js 1.1js有5种定位,最后execute_script(js)来执行js ...