可以说我有3个组件连接在一个父组件中。
伪示例:
<div>
<Parent />
<ChildMetaData />
<ChildData />
</div>
单击
<Parent />
时,我使用以下作为 Prop 传递的函数:handleParentClick(tid,sifUser) {
this.setState({
tid : tid ,
sifUser : sifUser
},
() => {
this.loadChildRequestsFromServer();
this.loadUserDataFromServer();
});
}
状态变化。
=>重新渲染所有3个组件。
当我的
loadChildRequestsFromServer()
完成后,它会更改全局变量的状态=>重新渲染所有3个组件。
当我的
loadUserDataFromServer()
完成后,它会更改全局变量的状态=>重新渲染所有3个组件。
如您所见,当我单击我的 parent 时,我的组件将重新渲染3次。 (我通过在组件的渲染功能之一(如
<ChildData />
)中运行console.log进行检查。)这是可以接受的行为,还是我做错了什么?
我应该注意,这两个“从服务器加载”功能都是AJAX调用。而且由于
loadChildRequestsFromServer()
和this.loadUserDataFromServer()
链接在一起,所以也许我不应该在第一个函数结束后立即更新状态。而是将数据传递给下一个函数并在那里更新它。 最佳答案
将组件重新渲染3次非常好。
因为您的 parent 有3种不同的状态:
两次调用
无论如何,React都会过滤掉所有不必要的DOM更新,这是主要的性能瓶颈。
您可以通过实现
shouldComponentUpdate()
过滤掉不必要的更新。这也将防止不必要地执行render()
函数。(更新)如果第一个 child 仅需要第一个ajax调用结果,而第二个 child 仅需要第二个ajax调用结果,那么您也可以考虑给出每个 child 状态,并从其各自的 child 中调用每个函数。
这样,每个 child 都可以独立更新,因此您获得的渲染调用更少。
与原始解决方案相比,DOM更新的数量将保持不变=最少。
如果您只需要一个ajax调用的结果就不需要状态,则可以像描述的那样链接。但这会使任何错误处理变得更加棘手。