React Context，如何在一个分支中更新上下文，以在另一个分支中使用

Question

我可以使用 React Context API 来管理 itemsInCart 的全局状态，允许 Product 更新上下文，并且只有 Nav 可以使用和重新渲染。我不想在更改时重新渲染整个应用程序。

阅读 React 文档，我看到 Context 用户需要在提供者的下游，所以不确定这是否可行

代码（大大简化）：

 function NavBar () {
    const [itemsInCart, setItemsInCart] = useState(0)

    return (
      <button onClick={openCart}>{itemsInCart}</button>
    )
  }

 function Product() {

    function incrementCart () {
      ???
    }

    return (
      <button onClick={() => incrementCart}>add product to cart</button>
    )
  }

  function App () {
    return (
      <NavBar/>
      <Router>
        <Product/>
      </Router>
    )
  }

Answer 1

你想用useContext来做。

调用useContext的组件总是会重新渲染上下文 值变化。如果重新渲染组件代价高昂，您可以 使用记忆优化它。

例如：

export const CartContext= React.createContext();

export const CartProvider = ({ children }) => {
  const [itemsInCart, setItemsInCart] = useState(null);

  return (
    <CartContext.Provider
      value={
        itemsInCart
      }
    >
      {children}
    </CartContext.Provider>
  );
};

然后在某些功能中您可以使用来更新购物车：

  const {itemsInCart, setItemsInCart} = useContext(CartContext);

最后，更新 Provider 包装如下：

  function App () {
    return (
     <CartProvider>
      <NavBar/>
      <Router>
        <Product/>
      </Router>
     </CartProvider>
    )
  }