Question

我收到有关状态的频繁更新，这会导致无法访问变化的状态属性的组件发生不必要的重新渲染。

以相同的方式创建组件A和B，组件A具有valueKeys ['speed'，'time']，而组件B没有valueKeys []。

更新速度和时间后，将每个数组再增加一个值，组件A将按预期重新渲染，但是组件B也将重新渲染。

我认为这是因为makeValuesSelector引用的valuesSelector输入正在更改？尽管该值是一个空数组。

在这种情况下，有什么方法可以防止组件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不会重新渲染。

fut = client.compute(dataframe_thing)

希望这对以后的人有所帮助。

使用redux / reselect时如何防止组件重新渲染？

1 个答案: