React 中的 Redux 和 Context/Providers 之间有什么实际区别？

Question

createContext我是一名新开发人员，当、和 Providers等事物存在时，我很难理解 Redux 的重要性useContext。根据我天真的观察，您似乎只需在顶层组件中使用全局上下文提供程序就可以完成 Redux 可以做的所有事情（减去状态跟踪开发工具扩展）。

例如，这样的事情：

function App() {
  const [stateOne, setStateOne] = useState();
  const [stateTwo, setStateTwo] = useState();

  return (
    <ContextProvider shared={{
      stateOne,
      setStateOne,
      stateTwo,
      setStateTwo
    }}>
      ...
    </ContextProvider>
  )
}

现在所有后代组件都可以访问全局状态，这似乎是 Redux 的要点。我是否遗漏了 Redux 的一个重要差异化因素？

Answer 1

Context 和 Redux 是非常不同的工具，它们解决不同的问题，但也有一些重叠。

上下文不是“状态管理”工具。它是一种依赖注入机制，其唯一目的是使 React 组件的嵌套树可以访问单个值。由您决定该价值是什么以及如何创建它。通常，这是使用来自 React 组件状态的数据来完成的，即useState和useReducer。所以，你实际上是在自己做所有的“状态管理”——上下文只是为你提供了一种将其传递到树上的方法。

Redux 是一个库和一种模式，用于将状态更新逻辑与应用程序的其余部分分开，并可以轻松跟踪状态何时/何地/为何/如何更改。它还使您的整个应用程序能够访问任何组件中的任何状态。

此外，Context 和 (React-)Redux 传递更新的方式也存在一些明显的差异。上下文有一些主要的性能限制 - 特别是，任何使用上下文的组件都将被迫重新渲染，即使它只关心部分上下文值。

Context 本身就是一个很棒的工具，我经常在自己的应用程序中使用它。但是，Context 不会“取代 Redux”。当然，您可以使用它们来传递数据，但它们不是同一件事。这就像问“我可以用螺丝刀代替锤子吗？”。不，它们是不同的工具，您使用它们来解决不同的问题。

更详细的可以看我的帖子：

• 为什么 React Context 不是“状态管理”工具（以及为什么它不取代 Redux）
• Redux - 还没有死！
• 何时（何时不）使用 Redux
• React、Redux 和上下文行为。
• React 渲染行为（大部分）完整指南