React Boilerplate：当数据输入时，哑组件重新渲染

Question

我使用了反应样板来设置项目的基础。考虑我有一个容器和2个组件（哑组件），如下所示，

App
  - HomePage(Connected component with sidebarData and detailedData)
     - SideBar(data=sidebarData)
     - DetailedView(data=detailedData)
State
  {
    "sidebarData": makeSelectorSideBarData(), // reselect selector
    "detailedData": makeSelectorDetailedViewData(), // reselect selector
  }

很明显，子组件取决于单个数据。但是当我的detailedData更改时，它也会重新渲染SideBar组件。

是否有必要使用redux / reselect来避免这种情况，而无需实现shouldComponentUpdate()？

Answer 1

如果在更改给它的道具之前不希望重新渲染组件，则可以使用PureComponent。只要确保您知道简短的prop和状态比较就足以满足您的用例：

  

PureComponent的{​​{1}}仅浅表比较了   对象。如果这些包含复杂的数据结构，则可能会产生   假阴性带来更大的差异

Answer 2

您可以使用PureComponent替代方法- shouldComponentUpdate-Children -https://github.com/NoamELB/shouldComponentUpdate-Children

import {shallowEqual} from 'shouldcomponentupdate-children';

class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return shallowEqual(this.props, nextProps, this.state, nextState);
    }
}
export default MyComponent;

github链接还包含一个实时Codepen示例。