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以 ...
随机推荐
- 【LuoguP3270】[JLOI2016] 成绩比较
题目链接 题目描述 G系共有n位同学,M门必修课.这N位同学的编号为0到N-1的整数,其中B神的编号为0号.这M门必修课编号为0到M-1的整数.一位同学在必修课上可以获得的分数是1到Ui中的一个整数. ...
- 【rust】Rust 的构建系统和包管理工具Cargo认识并初步使用(2)
Cargo 是 Rust 的构建系统和包管理工具,同时 Rustacean 们使用 Cargo 来管理它们的 Rust 项目.Cargo 负责三个工作:构建你的代码,下载你代码依赖的库并编译这些库.我 ...
- 【bzoj3926】[Zjoi2015]诸神眷顾的幻想乡
*题目描述: 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看.幽香当然也 ...
- 洛谷P2258 子矩阵——题解
题目传送 表示一开始也是一脸懵逼,虽然想到了DP,但面对多变的状态不知从何转移及怎么合理记录状态.之(借鉴大佬思路)后,豁然开朗,于是在AC后分享一下题解. 发现数据范围出奇地小,不过越是小的数据范围 ...
- [CF1093E]Intersection of Permutations:树套树+pbds
分析 裸的二维数点,博主用树状数组套平衡树写的,顺便pbds真好用. Update on 2018/12/20:再解释一下为什么是二维数点,第一维是\(la \leq i \leq ra\),第二维是 ...
- SpringCloud 教程 (三)高可用的服务注册中心
一.准备工作 Eureka can be made even more resilient and available by running multiple instances and asking ...
- 服务器中常见的RAID
Standalone 最普遍的单磁盘储存方式. Cluster 集群储存是通过将数据分布到集群中各节点的存储方式,提供单一的使用接口与界面,使用户可以方便地对所有数据进行统一使用与管理. Hot sw ...
- 11 November
Weakness 求数列区间 \(\{a_n\}\) 中满足 \(i < j < k, a_i > a_j > a_k\) 的 \((i, j, k)\) 对的数目. 设对 \ ...
- 【转】DataRow复制一行到另一个DataTable
源地址:http://www.cnblogs.com/pains/archive/2007/11/22/969003.html 下面两个方法是DataRow复制一行到另一个DataTable的, ...
- win7 编译postgresql9.6.8
一.环境 windows7 postgresql9.6.8 vs2010 perl5.24.3 二.编译安装 1.安装perl,安装到C:\Perl64路径下,安装完成后设置环境变量PATH和Perl ...