1

我有一组通过容器组件使用中央存储（即 redux 存储）的组件。这些组件往往是简单的并且驻留在 HOC 组件中。HOC 组件使用react-redux connect。

class HOComponent extends Component {
   const { data1, data2 } = this.props;
   render() {
      <Component1 data={data1} />
      <Component2 data={data2} />
   }
}
const selector = (state) => ({
    data1 = selectors.data1(state),
    data2 = selectors.data2(state),
    other = selectors.other(state)
});

上面分别是子组件Component1和 Component2的选择器。

下面是使用reselect的选择器的外观。

const alldata = (state) => 
    state.alldata;

 export other = (state) =>
     state.other;

 export data1 = createSelector(
 [alldata], 
 (alldata) => {
    //lets assume
    return alldata.filter(d => d.criteria === data1.criteria);
  })

 export data2 = createSelector(
 [alldata], 
 (alldata) => {
    //lets assume
    return alldata.filter(d => d.criteria === data2.criteria);
  })

问题是重新选择的正确用法我注意到这是无效的，因为如果我的 HOC其他选择器触发了Component1 Component2无论如何也会被重新渲染。我应该检查shouldComponentUpdate方法中的每个数据流。我认为重新选择使用将首先解决这个问题。我误会了吗。它只是防止重新计算部分吗？

这是我之前的帖子的延续， 防止在 redux 中触发子组件的选择器

4

0 回答 0