React Context API 似乎重新渲染每个组件

Question

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

DEMO

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

Answer 1

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

引用React的内容API：

All Consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from Provider to its descendant Consumers is not subject to the shouldComponentUpdate method, so the Consumer is updated even when an ancestor component bails out of the update.

更多信息请查看here

Answer 2

我避免使用 React 上下文重新渲染的方式 API:

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

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

然后我从上下文中写一个函数到 select props:

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

React Context API 似乎重新渲染每个组件

React Context API Seems to re-render every component

javascript

reactjs

react-context

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

然后我从上下文中写一个函数到 select props:

我有我的连接 HOC 写道：

一起

用法

演示

结论