Question

假设我在一个父组件中连接了3个组件。

伪示例：

<div>
 <Parent />
 <ChildMetaData />
 <ChildData />
</div>

点击<Parent />我使用以下作为道具传递的功能：

handleParentClick(tid,sifUser) {
    this.setState({
        tid : tid , 
        sifUser : sifUser
    },
    () => {
        this.loadChildRequestsFromServer();
        this.loadUserDataFromServer();
    });
}

状态变化。

=＆GT;所有3个组件都会重新渲染。

当我的loadChildRequestsFromServer()完成时，它会改变全局变量的状态

=＆GT;所有3个组件都会重新渲染。

当我的loadUserDataFromServer()完成时，它会改变全局变量的状态

=＆GT;所有3个组件都会重新渲染。

正如您所看到的，当我点击我的父母时，我的组件会重新渲染3次。（我通过在组件的一个render函数中运行console.log来检查它，如<ChildData />。）

这是一种可以接受的行为，还是我做错了什么？

我应该注意到来自服务器＆＃34;的加载和＃34;函数是AJAX调用。由于loadChildRequestsFromServer()和this.loadUserDataFromServer()被链接在一起，也许我不应该在第一个函数结束后立即更新状态。而是将数据传递给下一个函数并在那里更新它。

Answer 1

组件重新渲染3次完全没问题因为您父母有3种不同的状态：

没有任何ajax结果
使用第一次调用的ajax结果
两次调用带来ajax结果

React会过滤掉所有不必要的DOM更新，这是主要的性能瓶颈。您可以通过实施shouldComponentUpdate()来过滤掉不必要的更新。这也可以防止不必要地执行render()函数。

（更新）如果第一个孩子只需要第一个ajax呼叫结果，而第二个孩子只需要第二个呼叫结果，那么你也可以考虑给每个孩子状态，并从其各自的孩子中调用每个功能。
这样，每个孩子都可以独立更新，并且您可以获得更少的渲染调用。与原始解决方案相比，DOM更新的数量将保持不变=最小。

如果您从不需要仅具有一个ajax调用结果的状态，那么您可以按照您描述的方式进行链接。但这会使任何错误处理变得更加棘手。

在ReactJS中重新渲染孩子3次是否可以接受？

1 个答案: