Question

在阅读了有关React，Redux和备忘录的文章之后，我想问一个问题...我可以摆脱这种用例吗？

假设我有一个带有以下数据的redux存储区

// reduxStore
module.exports = {
    randomData: [
        { name: 'John', age: 30 },
        { name: 'Peter', age: 25 },
        { name: 'Brenda', age: 15 }
    ];
};

现在，在我的组件中，我想获取平均年龄。我这样处理：

import React from 'react';
import { connect } from 'react-redux';

export function TestComponent(props) {
    return <p>The sum of ages is: {props.ageSum}</p>;
}

const mapStateToProps = state => ({
    ageSum: state.randomData.map(datum => datum.age).reduce((acc, curr) => acc + curr)
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent);

我觉得这与reselect和React建议的其他库给出的示例相同。

有人可以解释一下，在优化方面，这个例子是否明智？

Answer 1

该示例可以起作用，但它并非最佳性能。

在大多数情况下，在map()函数中调用mapStateToProps将导致返回新的数组引用。不同的引用意味着结果不等于上一次，因此您的组件将重新渲染。记忆可以帮助确保仅在输入值实际更改时才生成新引用（例如someArray.map()）。

在您的情况下，map的结果将立即送入reduce()，并用于计算总和。假设每次计算的总和都相同，则您的组件将不会重新渲染，因此不必担心。

但是，state.randomData可能大部分时间都没有改变，在这种情况下，map().reduce()正在做不必要的工作。记住也可以避免这种情况。

有关更多详细信息，请参见React-Redux docs on writing mapState functions和我的帖子Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance。

用Redux进行“记住”是否重要？

1 个答案: