Question

我正在编写一个带子级的高阶组件，然后根据上下文提供者的状态重新呈现它们。

请考虑以下简化示例：

index.js

const ChildElem = () => {
   return(
     <div/>
   )
}

class Example extends React.Component{
   render(){
      return(
        <FocusProvider>
          <ChildElem/>
          <ChildElem/>
          <ChildElem/>
        </FocusProvider>
      )
   }
}

FocusProvider.js

class FocusProvider extends React.Component{
   renderChildren = (providerState) => {
      //Does nothing with state and simply returns children yet they still re render
      return this.props.children
   }

   render(){
      return(
        <Provider>
           <Subscribe to={[ContextProvider]}>
             {provider => this.renderChildren(provider.state)}
           </Subscribe>
        </Provider>
      )
   }
}

从示例中可以看到，FocusProvider的子级是从预订上下文的函数中返回的。

我遇到的问题是，即使对它们没有任何更改，也正在重新渲染孩子。唯一要更改的是它们所预订的上下文提供者的状态。

任何建议将不胜感激

Answer 1

您可以控制组件是否应该更新，是否具有react组件类的功能

shouldComponentUpdate ( nextProps, nextState, nextContext ) {
/* compare nextState with your current states properties if you want to update on any basis return true if you want to render the component again  */
return true; // will re-render component , 
return false; // do not re-render component even if you change component states properites
}

nextProps包含支持新道具的属性，nextState包含新的State属性

阻止子组件通过上下文订阅重新呈现

1 个答案: