A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This behavior of the HOC is similar to what you’d get when using React.PureComponent or shouldComponentUpdate in a React Class Component. However, now with the introduction of React.memo, you can leverage this behavior for React Function Components. The end result is that React will skip rendering the component if the props have not changed and will reuse the last rendered result.

To prevent extra rendering, we can use 'shouldComponentUpdate' in the past, new API 'React.memo' is a high order component which is doing the same things with cleaner API:

const Greeting = React.memo(({ text }) => {
console.log("I'm in Greeting");
return <h3>Hello, {text}!</h3>;
});

If the 'text' prop doesn't change, then the Greeting component won't be re-rendered

[React] Use React.memo with a Function Component to get PureComponent Behavior的更多相关文章

  1. React源码 memo Fragment StrictMode cloneElement createFactory

    1.memo react 16.6 推出的 api ,他的用意是给 function component 也有 PureComponent 这样一个类似的功能,因为我们知道 PureComponent ...

  2. [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 ...

  3. error : Hooks can only be called inside of the body of a function component. 依赖包和主包加载多个react 引发冲突问题

    1. 结论: 在依赖包和主包的node-modules中,同时install包含react , react-dom 或者react-redux时,跑测试或者启动的时候,显示如下error.当然出现这个 ...

  4. [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

    In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that ...

  5. React报错之React Hook 'useEffect' is called in function

    正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...

  6. [React Intl] Use a react-intl Higher Order Component to format messages

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...

  7. react 使用react-router-dom 在Route对象上component 参数接收的是一个方法而非一个对象

    其实对于jsx语法 一直觉的它有点清晰都不是很好,js和html混在一起有点不伦不类的样子,以下是我在使用react中遇到的一个很奇葩的事情 假定你定义了一个component Mine import ...

  8. [React & Debug] Quick way to debug Stateless component

    For example we have the following code: const TodoList = (props) => ( <div className="Tod ...

  9. 精读《Function Component 入门》

    1. 引言 如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性.但在尝试之前,最好先阅读本文,对 Function Component 的思维模式有 ...

随机推荐

  1. mysql8忘记root密码修改密码(mac)

    0.在/etc/my.cnf修改验证方式 [mysqld] default_authentication_plugin=mysql_native_password 1.切换root权限: sudo s ...

  2. 牛客网暑期ACM多校训练营(第六场) J Heritage of skywalkert(数论, eth_element)

    链接: https://www.nowcoder.com/acm/contest/144/J 题意: 给定一个函数, 求它n次结果中任意两次的lcm最大值 分析: 首先要看出这个函数并没有什么含义, ...

  3. Python3的基本数据类型及常用的方法

    python3的基本数据类型: 在python3当中有这么几种基本的数据类型:int(整形).str(字符串).list(列表).tuple(元组).dict(字典).bool(布尔值)等.数字整体划 ...

  4. xhtml css 漏 整理

    1)文档类型 代码最上部有如下这句话: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. search Paths $(SRCROOT)和$(PROJECT_DIR)区别

    $(SRCROOT)代表的时项目根目录下 $(PROJECT_DIR)代表的是整个项目 PS:往项目添加文件时,例如.a等,要先showinfinder ,复制到项目中,然后再拖到xcode项目中

  6. HDU 5527 Too Rich

    Too Rich Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  7. 九度oj 题目1111:单词替换

    题目描述: 输入一个字符串,以回车结束(字符串长度<=100).该字符串由若干个单词组成,单词之间用一个空格隔开,所有单词区分大小写.现需要将其中的某个单词替换成另一个单词,并输出替换之后的字符 ...

  8. php.ini配置参数详解

    下面对php.ini中一些安全相关参数的配置进行说明 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  9. SPOJ GSS1 Can you answer these queries I ——线段树

    [题目分析] 线段树裸题. 注意update的操作,写结构体里好方便. 嗯,没了. [代码] #include <cstdio> #include <cstring> #inc ...

  10. [luoguP4035] [JSOI2008]球形空间产生器(高斯消元)

    传送门 设球心的坐标为未知量 用最后一个点来表示球面到球心的距离,那么它和前n个式子相等 移项乱搞 最后高斯消元 #include <cmath> #include <cstdio& ...