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类上进行设置一样。 PURE COMPONENT是优化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

redux导致组件重新渲染

1 个答案: