React.memo

先来看官网解释：

React.memo 为高阶组件。
如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

使用方式为：

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

也就是说，React.memo能够实现子组件根据props是否变更来判断该子组件是否发生重新渲染，也是属于性能优化的一个东西。先看下面的例子：

import { useState,  memo } from "react";
import * as ReactDOM from "react-dom";

function Child({seconds}){
  console.log('I am rendering');
  return (
      <div>I am update every {seconds} seconds</div>
  )
};
// const MemoChild = memo(Child);
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <button onClick={()=>setCount((count)=>count+1)} >点击次数：{count}</button>
      <Child seconds={1}/>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

image.png

可以看到，当我在父组件中点击按钮的时候，子组件Child也跟随发生渲染。很明显子组件的渲染是没有必要的，因为它并不依赖count这个状态，那么这个时候该如何解决呢？
此时当然是 React.memo来解决这个问题了！

import { useState,  memo } from "react";
import * as ReactDOM from "react-dom";

function Child({seconds}){
  console.log('I am rendering');
  return (
      <div>I am update every {seconds} seconds</div>
  )
};
const MemoChild = memo(Child);
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <button onClick={()=>setCount((count)=>count+1)} >点击次数：{count}</button>
      <MemoChild seconds={1}/>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

只需要使用React.memo将子组件包裹起来，返回一个新的组件就可以了。实际运行效果如下：

image.png

可以看到，我在父组件中点击按钮更新count状态多次，但子组件并不受影响。说明此时React.memo起作用了。

const [seconds, setSeconds] = useState(0);
  return (
    <>
      <button onClick={()=>setCount((count)=>count+1)} >点击次数：{count}</button>
      <button onClick={()=>setSeconds((seconds)=>seconds+1)} >seconds：{seconds}</button>
      <MemoChild seconds={seconds}/>
    </>
  );

image.png

现在我将seconds传入子组件，在父组件中通过另一个按钮点击改变它的值，发现子组件正常渲染。

另外，React.memo还有第二个参数，类似于class组件中shouldComponentUpdate的用法，不过返回true和false的逻辑是相反的：

function Child({seconds}){
    ...
};

function areEqual(prevProps, nextProps) {
    if(prevProps.seconds===nextProps.seconds){
        return true
    }else {
        return false
    }
}

React.memo(Child,areEqual)

比较：React.memo与useMemo？

很明显，React.memo是高阶组件，用于包装整个组件使其达到性能优化，相当于在class组件中的PureComponent，而useMemo则是在组件内部针对局部进行性能优化。

完。