【React】关于React.memo和useMemo

2 年 ago
新, 韵
2 minutes

组件的记忆化 memo

由于父组件的状态变量text的更新，导致没有任何变化的Child1也会被多余地重新渲染。

const Child1 = () => {
  return (
    <div>
      <p>子コンポーネント1</p>
    </div>
  );
};

export const Parent = () => {
  // 状態変数textが更新される度にParentがレンダリングされる
  // Child1の中身に変化はないが、Child1まで再レンダリングされてしまう
  const [text, setText] = React.useState(''); 

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  return (
    <div>
      <p>親コンポーネント</p>
      <input type="text" onChange={handleChange} />
      <Child1 />
    </div>
  );
};
React.memo 会通过检查等值性（即值是否相等）来判断是否重新渲染。如果前后的值没有变化，则不会重新渲染。

在以下的情况下，已经进行了记忆化的Child1将不会被渲染。
Child2没有进行记忆化，因此会被渲染出来。

const Child1 = React.memo(() => {
  return (
    <>
      <p>子コンポーネント1</p>
    </>
  );
});

const Child2 = () => {
  return (
    <>
      <p>子コンポーネント2</p>
    </>
  );
};

export const Parent = () => {
  const [text, setText] = React.useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  return (
    <div>
      <p>親コンポーネント</p>
      <input type="text" onChange={handleChange} />
      <Child1 />
      <Child2 />
    </div>
  );
};

使用useMemo进行复杂计算处理的记忆化

当处理复杂思维时，父组件每次渲染时，子组件会执行繁重的计算处理，即使计算结果没有变化，这将导致无谓的渲染浪费。

在以下情况下

    • フォームに入力すると状態変数のtextが変化する。

 

    • すると親コンポーネントがレンダリングされる。

doubleCountという計算処理が再度走る。

textを更新しただけでは、doubleCountの計算処理結果は変わらないので、余分な処理になってしまう。

export const Parent = () => {
  const [text, setText] = React.useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const [count, setCount] = React.useState(0);

  // 重い計算処理
  const double = (count: number) => {
    let i = 0;
    while (i < 100000000) i++;
    return count * 2;
  };

  const doubleCount = double(count);

  return (
    <div>
      <p>親コンポーネント</p>
      <input type="text" onChange={handleChange} />
      <p>重い計算処理</p>
      <p>{doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
};
通过使用useMemo，可以跳过不必要的重新计算。仅在依赖数组更新时才执行重新计算。

只在count发生变化时运行计算处理，需要注意的是，对于轻量级处理的记忆化可能会适得其反。

export const Parent = () => {
  const [text, setText] = React.useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const [count, setCount] = React.useState(0);

  const double = (count: number) => {
    let i = 0;
    while (i < 100000000) i++;
    return count * 2;
  };

  // useMemoを使用することで、依存配列が更新された場合のみ再計算が実行される
  const doubleCount = React.useMemo(() => double(count), [count]);

  return (
    <div>
      <p>親コンポーネント</p>
      <input type="text" onChange={handleChange} />
      <p>重い計算処理</p>
      <p>
        {count}
        {doubleCount}
      </p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
};

请参考

 

bannerAds