React.memo() 是什么？

React 16.6.0 发布了两个新的重要功能：

• React.memo()
• React.lazy(): 使用 React Suspense 进行代码拆分和懒加载

这里简单介绍下React.memo()的用法。

React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。

组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染。

由于只有需要被渲染的组件被渲染了，所以这是一个性能提升。

PureComponent 要依靠 class 才能使用。而 React.memo() 可以和 functional component 一起使用。

import React, { useState } from "react";
const UserInfoComponent = React.memo(function userInfo(props) {
  return(
    <div>props.count</div>
  )
});

function Info(props) {
  const [count, setCount] = useState(1);
  ...
  return(
    ...
    <UserInfoComponent
      count={count}
     >
    ...
  )
}
export default Info

组件Info在渲染的时候，如果count没有改变，子组件UserInfoComponent是不会被渲染的。

结语

React.memo() 对于 React 非常有用的新功能，因为我们之前只能使用 class component 来利用 PureComponent 带来的性能优势。而现在，我们有了 React.memo()，就可以使用 functional component 了！