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 仅当 context 中的 specifics props 更新为新值时才会重新渲染，如果值相同，则不会重新渲染。它还避免在MyComponent 中未使用的上下文中重新渲染任何其他值。每次上下文更新时，select 中的代码都会执行，但由于它什么都不做，没关系，因为不会浪费 MyComponent 的重新渲染。

Answer 2

这是预期的行为。当提供者数据更新时，作为消费者的组件会重新呈现。此外，shouldComponentUpdate 钩子不适用于消费者。

引用 React 的内容 API：

只要 Provider 的 value 属性发生变化，所有作为 Provider 后代的 Consumer 都会重新渲染。从 Provider 到其后代 Consumer 的传播不受 shouldComponentUpdate 方法的约束，因此即使祖先组件退出更新，Consumer 也会更新。

更多信息请查看here