可以说我有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种不同的状态:

  • 没有任何ajax结果
  • 第一次调用导致带有ajax的

  • 两次调用
  • 都导致带有ajax的


  • 无论如何,React都会过滤掉所有不必要的DOM更新,这是主要的性能瓶颈。
    您可以通过实现shouldComponentUpdate()过滤掉不必要的更新。这也将防止不必要地执行render()函数。

    (更新)如果第一个 child 仅需要第一个ajax调用结果,而第二个 child 仅需要第二个ajax调用结果,那么您也可以考虑给出每个 child 状态,并从其各自的 child 中调用每个函数。
    这样,每个 child 都可以独立更新,因此您获得的渲染调用更少。
    与原始解决方案相比,DOM更新的数量将保持不变=最少。

    如果您只需要一个ajax调用的结果就不需要状态,则可以像描述的那样链接。但这会使任何错误处理变得更加棘手。

  • 07-28 02:42
    查看更多