每次全局变化时，如何在不渲染的情况下访问一部分上下文状态？

Question

我有下一个问题...

是否可以共享上下文中的状态部分，在特定子项中使用，而不是每次整个状态发生变化而不是这部分时都渲染它？（不通过 props 传递）

这是一个代码示例（使用 props），但是我想使用 "useContext of a state part" 而不是每次全局上下文更改时都进行渲染：

container.tsx

export const App: React.FunctionComponent<AppContextProps> = props => {
  const [appState, appDispatch] = React.useReducer(reducer, initialAppState);

  return (
    <>
      <ThemeProvider theme={theme}>
        <>
          <GlobalStyle />
          <AppDispatch.Provider value={appDispatch}>
            <FixedBottomContainer
              bookForm={<BookForm />}
              listContainer={
                <ListContainer
                  books={appState.books}
                  discount={appState.discount}
                />
              }
              discountContainer={
                <DiscountContainer discount={appState.discount} />
              }
            />
          </AppDispatch.Provider>
        </>
      </ThemeProvider>
    </>
  );
};

DiscountContainer.tsx

export const DiscountContainer: React.FunctionComponent<
  DiscountContainerProps
> = ({ discount }) => {
  const appDispatch = React.useContext(AppDispatch);

  const handleDiscount = (event: React.ChangeEvent<HTMLInputElement>) =>
    appDispatch({ type: "addDiscount", payload: event.target.value });

  return (
    <>
      <StyledDiscountField value={discount} onChange={handleDiscount} />
    </>
  );
};

提前致谢！

最佳，

Answer 1

您是否运行遇到了由不必要的渲染引起的某种严重的性能瓶颈？这通常是您应该关心这种优化的唯一原因。尽量不要在不必要的时候过早地优化 React——这真的不值得。进行渲染的成本是微不足道的，因为 React 本身经过了很好的优化。理想情况下，您的应用程序编写成 "extra" 渲染不会改变它的功能。

不过，如果你坚持，你可以查看 React.Memo，这是一个功能组件，只有 re-renders 如果 props 发生变化。

Answer 2

很遗憾没有。

React 文档说：

All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.

一旦全局状态的一部分发生变化，整个状态就会变成一个不同的对象，因为我们不会改变现有状态，而是复制旧状态并进行更改，我们需要获得一个新状态（行动中的不变性）。

也就是说，您仍然可以创建多个上下文。就像在你的例子中创建 BooksContext, DiscountContext.

看看 Kent Dodds 关于 React 中的状态管理的好文章 blog post。

每次全局变化时，如何在不渲染的情况下访问一部分上下文状态？

How to access a part of the context state without rendering each time the global changes?

typescript

reactjs

react-hooks