先來看官網(wǎng)解釋：

React.memo 為高階組件。
如果你的組件在相同 props 的情況下渲染相同的結(jié)果，那么你可以通過將其包裝在 React.memo 中調(diào)用金赦，以此通過記憶組件渲染結(jié)果的方式來提高組件的性能表現(xiàn)跷究。這意味著在這種情況下，React 將跳過渲染組件的操作并直接復(fù)用最近一次渲染的結(jié)果般甲。

使用方式為：

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

也就是說肋乍，React.memo能夠?qū)崿F(xiàn)子組件根據(jù)props是否變更來判斷該子組件是否發(fā)生重新渲染，也是屬于性能優(yōu)化的一個東西敷存。先看下面的例子：

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)} >點(diǎn)擊次數(shù)：{count}</button>
      <Child seconds={1}/>
    </>
  );
}

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

image.png

可以看到墓造，當(dāng)我在父組件中點(diǎn)擊按鈕的時候，子組件Child也跟隨發(fā)生渲染锚烦。很明顯子組件的渲染是沒有必要的觅闽，因?yàn)樗⒉灰蕾嘽ount這個狀態(tài)，那么這個時候該如何解決呢涮俄？
此時當(dāng)然是 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)} >點(diǎn)擊次數(shù)：{count}</button>
      <MemoChild seconds={1}/>
    </>
  );
}

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

只需要使用React.memo將子組件包裹起來，返回一個新的組件就可以了彻亲。實(shí)際運(yùn)行效果如下：

image.png

可以看到孕锄，我在父組件中點(diǎn)擊按鈕更新count狀態(tài)多次吮廉，但子組件并不受影響。說明此時React.memo起作用了畸肆。

const [seconds, setSeconds] = useState(0);
  return (
    <>
      <button onClick={()=>setCount((count)=>count+1)} >點(diǎn)擊次數(shù)：{count}</button>
      <button onClick={()=>setSeconds((seconds)=>seconds+1)} >seconds：{seconds}</button>
      <MemoChild seconds={seconds}/>
    </>
  );

image.png

現(xiàn)在我將seconds傳入子組件宦芦，在父組件中通過另一個按鈕點(diǎn)擊改變它的值，發(fā)現(xiàn)子組件正常渲染恼除。

另外踪旷，React.memo還有第二個參數(shù)，類似于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是高階組件徽级，用于包裝整個組件使其達(dá)到性能優(yōu)化气破，相當(dāng)于在class組件中的PureComponent，而useMemo則是在組件內(nèi)部針對局部進(jìn)行性能優(yōu)化餐抢。

完现使。