reactjs - Redux mapStateToProps 被多次调用

Question

我有一个非常简单的组件，它连接到 redux 状态并返回 {fruit, Vegetables}。一切工作正常，但假设我在组件内有一个图表，并且如果仅从 API 接收更新的 vegetable，则每次都会重新创建图表。

这是我的组件:

const Products = ({ fruit, vegetable }) =>
  <div className='Products'>
      <div>{vegetable.map(....logic here)}</div>
      <div>{Math.random()}</div> // this is to illustrate the component is rendering every time
      <Graph>Here will be a chart or a graph with fruit</Graph> //but it gets re-rendered even though there is no new fruit
  </div>

const mapStateToProps = (state) => {
  return {
    fruit: state.data.fruit,
    vegetable:  state.data.vegetable,
  }
}

export default connect(mapStateToProps)(Products)

在我看来，每次，无论更新哪个状态，它都会重新渲染整个组件。

有办法防止这种情况发生吗？

Answer 1

当 React 组件被渲染时，它下面的整个组件树也会被渲染 - 除了 shouldComponentUpdate 钩子(Hook)返回 false 的组件。因此，在您的情况下，如果 Products 组件被渲染，那么 Graph 组件也会渲染，这是正常的。

这里有两个选择:

• 如果您的 Products 组件未在 Graph 组件之外使用 fruit 属性，您可以直接连接您的 Graph 组件到 fruit 状态，并使用 connect 函数的 pure 选项来避免在 fruit 执行时重新渲染不改变

• 您可以在 Graph 组件中定义 shouldComponentUpdate Hook 来手动跳过不必要的渲染，或者使用辅助库来为您执行此操作，例如recompose 库的 pure 助手

第一个选项是优化 React/Redux 应用程序/避免不必要的渲染通常开始:将您的组件连接到有意义的最低级别的商店。第二种选择更像是一个逃生舱口 - 但通常仍然有用。

正如您提到的，您使用无状态组件，您可以使用高阶组件来从 shouldComponentUpdate Hook 中受益。要了解其工作原理，其简单实现如下所示:

function pure(BaseComponent, shouldUpdateFn) {
    return class extends Component {
        shouldComponentUpdate(nextProps) {
            return shouldUpdateFn(this.props, nextProps);
        }
        render() {
            return <BaseComponent { ...this.props } />;
        }
    }
}

这将为您提供一个pure HOC，您可以在您的应用程序上重用它，以避免不必要的渲染:它的工作原理是将您的无状态组件包装到具有所需钩子(Hook)的新组件中。您可以像这样使用它，例如:

export default pure(Graph, (props, nextProps) => props.fruit !== nextProps.fruit)

不过，我强烈鼓励您看看 recompose，它有更细粒度的实现，并且可以避免您重新发明轮子。