更新 React 上下文而不重新渲染進行更新的組件

Question

我有一個上下文和 2 個組件：一個是顯示上下文中的內容，另一個是更新它。

通過在更新程序組件中包含以下代碼，它將在更改上下文時重新渲染。

const [, setArray] = React.useContext(context);
setArray(prevArray => { return [...prevArray, []] }

這意味着無限重新渲染。 我需要避免這種情況。 由於更新程序不使用上下文中的數據，因此不應更新。

完整示例：我正在存儲和顯示有關組件的 Profiler 數據。

https://codesandbox.io/s/update-react-context-without-re-rendering-the-component-making-the-update-k8ogr?file=/src/App.js

const context = React.createContext();

const Provider = props => {
  const [array, setArray] = React.useState([]);

  const value = React.useMemo(() => [array, setArray], [array]);

  return <context.Provider value={value} {...props} />;
};

const Metrics = () => {
  const [array] = React.useContext(context);

  return <TextareaAutosize value={JSON.stringify(array, null, 2)} />;
};

const Component = () => {
  const [, setArray] = React.useContext(context);

  const onRenderCallback = (id, _phase, actualDuration) => {
    setArray(prevArray => {
      return [...prevArray, [id, actualDuration]];
    });
  };

  return (
    <React.Profiler id="1" onRender={onRenderCallback}>
      <div />
    </React.Profiler>
  );
};

export default function App() {
  return (
    <div className="App">
      <Provider>
        <Metrics />
        <Component />
      </Provider>
    </div>
  );
}

Answer 1

這就是我使用以下文章得出的結論： https://kentcdodds.com/blog/how-to-optimize-your-context-value

使用 2 個上下文，一個用於存儲 state，一個用於更新它：

const stateContext = React.createContext();
const updaterContext = React.createContext();

const array = React.useContext(stateContext);
const setArray = React.useContext(updaterContext);

完整示例： https://codesandbox.io/s/solution-update-react-context-without-re-rendering-the-component-making-the-update-yv0gf?file=/src/App.js

import React from "react";
import "./styles.css";
import TextareaAutosize from "react-textarea-autosize";

// https://kentcdodds.com/blog/how-to-optimize-your-context-value
const stateContext = React.createContext();
const updaterContext = React.createContext();

const Provider = props => {
  const [array, setArray] = React.useState([]);

  return (
    <stateContext.Provider value={array}>
      <updaterContext.Provider value={setArray}>
        {props.children}
      </updaterContext.Provider>
    </stateContext.Provider>
  );
};

const useUpdaterContext = () => {
  return React.useContext(updaterContext);
};

const Metrics = () => {
  const array = React.useContext(stateContext);

  return <TextareaAutosize value={JSON.stringify(array, null, 2)} />;
};

const Component = () => {
  const setArray = useUpdaterContext();

  const onRenderCallback = (id, _phase, actualDuration) => {
    setArray(prevArray => [...prevArray, [id, actualDuration]]);
  };

  return (
    <React.Profiler id="1" onRender={onRenderCallback}>
      <div />
    </React.Profiler>
  );
};

export default function App() {
  return (
    <div className="App">
      <Provider>
        <Metrics />
        <Component />
      </Provider>
    </div>
  );
}