使用 React.memo、useCallback、useMemo 防止对象重新渲染

Posted 2023-02-25

【中文标题】使用 React.memo、useCallback、useMemo 防止对象重新渲染

【英文标题】：Prevent rerenders for objects with React.memo, useCallback, useMemo

【发布时间】：2021-06-18 12:57:31

【问题描述】：

防止原始值的重新渲染工作正常（React.memo），但是当我尝试将对象传递给子组件时问题就开始了。我尝试使用 useMemo 和 useCallback 但没有成功。 只有使用 JSON.srtingify() 来传递数据，然后在子组件中使用 JSON.parse() 的解决方案 - 但这个解决方案看起来很hacky。

import React, useState from 'react';

const TextExample1 = (name, surname, infoText) => 
  console.log(infoText);
  return (
    <p>
      infoText name surname
    </p>
  );
;

const TextExample2 = React.memo((name, surname, infoText) => 
  console.log(infoText);
  return (
    <p>
      infoText name surname
    </p>
  );
);

const TextExample3 = React.memo((data, infoText) => 
  console.log(infoText);
  return (
    <p>
      infoText data.name data.surname
    </p>
  );
);

const TextExample4 = React.memo((data, infoText) => 
  console.log(infoText);
  const parsedData = JSON.parse(data);
  return (
    <p>
      infoText parsedData.name parsedData.surname
    </p>
  );
);

const App = () => 
  console.log('----- NEW RENDER -----');
  const [forceRerenderNumber, setForceRerenderNumber] = useState(0);

  const sourceData = 
    name: 'Joe',
    surname: 'Moore',
  ;

  return (
    <div>
      <TextExample1
        name="Joe"
        surname="Moore"
        infoText="1 - Works fine - intented rerenders :)"
      />
      <TextExample2
        name="Joe"
        surname="Moore"
        infoText="2 - Works fine - intented no rerenders. Rendered only onece :)"
      />
      <TextExample3
        data=sourceData
        infoText="3 - Doesn't work fine - there are unintented rerendars :( How to stop it?"
      />
      <TextExample4
        data=JSON.stringify(sourceData)
        infoText="4 - Works. - intented no rerenders. But JSON.stringify() and JSON.parse() looks like really hacky way. How to improve it?"
      />
      <Button
        onClick=() => 
          setForceRerenderNumber(forceRerenderNumber + 1);
        >
        Rerender
      </Button>
    </div>
  );
;

export default App;

日志：

 LOG  ----- NEW RENDER -----
 LOG  1 - Works fine - intented rerenders :)
 LOG  2 - Works fine - intented no rerenders with primitive data. Rendered only onece :)
 LOG  3 - Doesn't work fine - there are unintented rerendars :( How to stop it?
 LOG  4 - Works. - intented no rerenders. But JSON.stringify() and JSON.parse() looks like really hacky way. How to improve it?
 LOG  ----- NEW RENDER -----
 LOG  1 - Works fine - intented rerenders :)
 LOG  3 - Doesn't work fine - there are unintented rerendars :( How to stop it?
 LOG  ----- NEW RENDER -----
 LOG  1 - Works fine - intented rerenders :)
 LOG  3 - Doesn't work fine - there are unintented rerendars :( How to stop it?

【参考方案1】：

如果sourceData是一个不变的常数，你可以把它放在组件之外：

const sourceData = 
  name: "Joe",
  surname: "Moore",
;

const App = () => 

如果sourceData可以改变，可以使用useMemo：

const sourceData = useMemo(
    () => (
      name: "Joe",
      surname: "Moore",
    ),
    []
  );