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

Question

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

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

代码（大大简化）：

 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>
    )
  }