redux导致组件重新呈现

Question

我有一个组件，它连接到全局存储并从全局存储中获取一些数据。从这些数据的某一部分通过props发送到另一个组件，在该组件内部，我根据数据生成了所需的jsx。此外，在子组件中，还使用了mapdispatchtoprops，它也连接到全局存储。问题场景是子组件重新呈现依赖于全局存储数据。全局存储的密钥如下所示-

foods : {
  'list' : '',
  's'  : '',
  fetching : 0,
  slist : '',
  category : '',
  cproducts : ''
}

我猜发生的事情是子组件被重新渲染了7次，因为全局存储中食物的键的数量是7。如果有人感兴趣，他/她可以分享他/她的观点。

Answer 1

组件有一个render方法，该方法返回呈现给DOM的JSX标记。对于更改检测，React使用本地状态，该状态仅对组件是本地的，当状态更改时，组件及其子组件将被重新呈现以更新更改后状态的UI。

React文档中的一句话：

这些组件不能保留内部状态，不能有备份实例，也不能有组件生命周期方法。它们是输入的纯函数变换，没有样板。但是，您仍然可以通过将.propTypes和.defaultProps设置为函数的属性来指定它们，就像在ES6类上设置它们一样。纯组件是优化React应用程序最重要的方法之一。Pure Component的使用大大提高了性能，因为它减少了应用程序中渲染操作的数量。

所以把你的应用程序改成这样吧

import React, {PureComponent} from 'react';
class Sample extends PureComponent {
  render() { 

        return (
<div>your structure here</div>
)
}
}

export default Sample;

请阅读有关react PureComponent的更多信息。here