在 React 应用程序中将 props 替换为 useContext

Question

在父 React 组件中创建状态对象并使用 useContext 在嵌套组件之间上下传递数据有什么缺点吗？这会消除对道具的需求吗？似乎是一种更简单、更合乎逻辑的数据组织方式。此方法是否有任何性能或其他问题？

Answer 1

有一些注意事项应事先考虑：

0. 您不能像数据向下流动那样向上传递数据。

1. 在嵌套组件之间传递 props 将导致反模式 - “props 钻孔”

2. “道具钻探”的解决方案就是ContextAPI

但是，使用“仅上下文”（如您所建议的）也可能会导致反模式（“上下文地狱”？），对于每个数据传递，您将创建一个Context并渲染一个Provider.

另外，我看到这种方法的主要问题是，每个使用上下文的组件都会在提供者值发生变化时呈现，尽管它们可能不使用上下文的值。

注意组件的渲染3,4：

const Context = React.createContext();

const Child = ({ id }) => {
  console.log(`rendered`, id);
  return <div>Child with id = {id}</div>;
};

const UsingContext = ({ id }) => {
  useContext(Context);
  console.log(`rendered using Context`, id);
  return <div>Using Context id = {id}</div>;
};

const MemoizedUsingContext = React.memo(UsingContext);
const Memoized = React.memo(Child);

const App = () => {
  const [value, render] = useReducer(p => p + 1, 0);

  return (
    <Context.Provider value={value}>
      <Child id={1} />
      <Memoized id={2} />
      <UsingContext id={3} />
      <MemoizedUsingContext id={4} />
      <button onClick={render}>Render</button>
    </Context.Provider>
  );
};