React Context-仅渲染特定的子组件？

Question

我只是想知道React Context API是否可以实现这种效果，因为我找不到实现此目的的方法。

我有一个处于最高级别的App组件，它呈现了包装在提供程序中的组件。

我想在树的下一个组件根据消耗的Context值重新渲染，而无需重新渲染中间父级，例如：

应用组件：

<AppContext.Provider>
 <MiddleComponent {...someProps} />
<AppContext.Provider>

MiddleComponent：

<div>
<SomeJSX>
...
<AppContext.Consumer>
  { value => <SmallComponent>{value.something}</SmallComponent> }
<AppContext.Consumer>
...
</div>

现在，我只希望SmallComponent随Context的改变而重新渲染，但是当上下文值改变时，React似乎对整个MiddleComponent进行了强制渲染。