React Context API似乎重新呈现了每个组件

Question

我正在尝试在我的应用程序中使用新的Context API，看起来每次更新上下文时，它都会重新渲染与其连接的所有组件。我有一个沙盒演示设置，可以查看代码和工作问题。当您输入内容时-按钮上下文将呈现，反之亦然。我最初的想法是，如果您输入输入内容，那么只会打印出输入内容。

DEMO

这是如何工作的还是我缺少什么？ 谢谢， 斯潘塞

Answer 1

避免使用React context API重新呈现的方式：

首先，我将组件编写为纯功能组件：

const MyComponent = React.memo(({
    somePropFromContext,
    otherPropFromContext, 
    someRegularPropNotFromContext  
}) => {
    ... // regular component logic
    return(
        ... // regular component return
    )
});

然后我编写了一个从上下文中选择道具的函数：

function select(){
  const { someSelector, otherSelector } = useContext(MyContext);
  return {
    somePropFromContext: someSelector,
    otherPropFromContext: otherSelector,
  }
}

我有我的连接HOC写道：

function connect(WrappedComponent, select){
  return function(props){
    const selectors = select();
    return <WrappedComponent {...selectors} {...props}/>
  }
}

在一起

import connect from 'path/to/connect'

const MyComponent ... //previous code

function select() ... //previous code

export default connect(MyComponent, select)

用法

<MyComponent someRegularPropNotFromContext={something} />

演示

Demo on codesandbox

结论

MyComponent仅在上下文中的props props用新值更新时才会重新渲染，如果值相同，则不会重新渲染。同样，它避免了在MyComponent内部未使用的上下文中重新渲染任何其他值。 select中的代码将在每次上下文更新时执行，但是因为它没有做任何事情，所以没问题，因为不会浪费MyComponent的重新渲染。

Answer 2

这是预期的行为。作为使用者的组件在其提供者数据更新时会重新呈现。此外，shouldComponentUpdate钩子对Consumers不起作用。

引用React的内容API：

  

作为提供商后代的所有消费者将在提供商的价值属性发生更改时重新呈现。从Provider到其后代的Consumer的传播不受shouldComponentUpdate方法的约束，因此即使祖先组件无法进行更新，也要对Consumer进行更新。

有关更多信息，请检查here