如何在使用redux/reselect时防止组件重呈现？

Question

我经常收到对我的状态的更新，它会在没有访问不断变化的状态属性的组件中导致一些不必要的重新呈现。

组件A和B是以相同的方式创建的，组件A具有valueKeys‘速度’、‘时间’和组件B没有valueKeys []。

当更新速度和时间时，每个数组再添加一个值，组件A按预期重新呈现，而组件B也重新呈现。

我认为这是因为用于makeValuesSelector引用的makeValuesSelector输入正在发生变化吗？尽管该值是一个空数组。

在这种情况下，有什么方法可以防止组件B重新呈现吗？

状态

{
 speed: [ 5, 4, 6],
 time: [ 1, 2, 3]
}

ValueKeys

[ 'speed', 'time']

选择器

const valuesSelector = state => state.values;
const keysSelector= (state, props) => props.valueKeys;

const makeValuesSelector = () =>
  createSelector(
    [valuesSelector, keysSelector],
    (values, keys) => {
      let usedValues = {};
      keys.forEach(key => {
        if (values[key]) {
          usedValues[key] = values[key];
        }
      });
      return usedValues;
    }
  );

组件

const makeMapStateToProps = () => {
  const valuesSelector = makeValuesSelector();
  const mapStateToProps = (state, props) => ({
    values: valuesSelector(state, props),
  });
  return mapStateToProps;
};

Answer 1

过了一段时间，我又回到了这个问题上，因为它造成了严重的性能瓶颈。我通过在选择器中使用自定义相等检查来检查状态内的对象是否发生了更改，从而解决了这个问题。

如果组件所需的对象在状态内未发生更改，则由于阻止它的自定义等式检查，makeValuesSelector将不会运行。因为makeValuesSelector还没有运行，那么它将阻止组件重新呈现。就我所描述的情况而言，组件B不会重新呈现.

const valuesSelector = state => state.values;
const keysSelector= (state, props) => props.valueKeys;

const equalityCheckShallow = (currentVal, previousVal) => {
  let noUpdate = true;
  Object.keys(currentVal).forEach(key => {
    if (currentVal[key] !== previousVal[key]) {
      noUpdate = false;
    }
  });
  return noUpdate;
};

const createSelectorWithShallowCompare = createSelectorCreator(defaultMemoize, equalityCheckShallow);

const makeValuesSelector = () =>
  createSelectorWithShallowCompare(
    [valuesSelector, keysSelector],
    (values, keys) => {
      let usedValues = {};
      keys.forEach(key => {
        if (values[key]) {
          usedValues[key] = values[key];
        }
      });
      return usedValues;
    }
  );

希望这能对未来的人有所帮助。