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. 20181121笔记(for,数字类型和字符串类型的内置方法)

    1.for循环 for循环可以遍历任何序列的项目,如一个列表或者一个字符串. for循环字典时默认取出key: dic={'x':111,'y':222,'z:333'}​for k in dic:​ ...

  2. js对象,数组,字符串的操作

    循环绑定=>变量污染 for (var i = 0;i<lis.length;i++){ lis[i].index = i;#给页面元素对象添加一个任意属性(保留索引的属性index) # ...

  3. java复习之基础环境

    环境基本介绍: JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK).在JDK的安装目录下有一个jre目录,里面有两个文件夹bin和lib,在这里可以认为b ...

  4. (转)去除背景色的方法,适合iOS5/6/7/8.0beta

    通常使用UISearchbar都需要去除其背景色来与自己的界面风格保持协调,但是UISearchbar的设计随着iOS版本的升级不断地在发生着变化,下面我们通过分析UISearchbar在各个iOS版 ...

  5. H.264分层结构与码流结构

    H.264分层结构 H.264编码器输出的Bit流中,每个Bit都隶属于某个句法元素.句法元素被组织成有层次的结构,分别描述各个层次的信息. 在H.264 中,句法元素共被组织成  序列.图像.片.宏 ...

  6. 流编辑器sed知识点总结

    sed(流文本编辑器)     每次读取一行到模式空间中,     修改的sed模式空间中的内容,并不会修改源文件,     继而输出模式空间的内容,     最后删除模式空间中的内容. sed [O ...

  7. SQLite Database Browser 2.0使用方法

    在网上找一个SQLITE查看器 这个查看器叫做:www.jb51.net/database/118822.html 这个查看器可以新建SQLITE文件数据库,可以建立表索引,写SQL语句,编辑表数据 ...

  8. 【SaltStack】SaltStack研究心得

    基础篇 ------------------------------------------------------------------------------------------------ ...

  9. spring-cloud-sleuth 学习资源

    https://www.baeldung.com/spring-cloud-sleuth-single-application https://howtodoinjava.com/spring-clo ...

  10. 学习笔记3——WordPress文件目录结构详解

    **********根目录********** 1.index.php:WordPress核心索引文件,即博客输出文件.2.license.txt:WordPress GPL许可证文件.3.my-ha ...