5

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

演示

这是它的工作原理还是我错过了什么？谢谢，斯宾塞

4

2 回答 2

11

我避免使用反应上下文 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} />

演示

代码沙盒演示

结论

MyComponent仅当上下文中的具体道具更新为新值时才会重新渲染，如果值相同，则不会重新渲染。此外，它还避免重新渲染未在内部使用的上下文中的任何其他值MyComponent。每次上下文更新时，select 中的代码都会执行，但由于它什么都不做，没关系，因为不会MyComponent浪费重新渲染。

于 2019-04-16T17:08:07.487 回答
5

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

引用 React 的内容 API：

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

欲了解更多信息，请查看此处

于 2018-07-08T16:30:54.023 回答