Question

我对React / Redux很陌生，但到目前为止我喜欢玩它。我来到accros的东西实际上困扰我，但我甚至不确定它是一个真实的＆＃34;问题我应该关心。无论如何，这里是。

让我们说我有一个组件，它实际上是一个用于更新记录的表单，从数据库中检索。此记录有几个不同表的外键。（我们说我的主要表格为Training，其中包含Format，Type，Place ...所有这些数据来自其他表格）。

为了能够向用户显示每个外键的所有可能值，我必须请求所有不同的表来获取数据，并在下拉列表中显示这些值。

现在，我正在做类似的事情：

dispatch(new CrudActions(places).getAll());
dispatch(new CrudActions(trainingFormats).getAll());
dispatch(new CrudActions(trainingTypes).getAll());

这些行中的每一行都将调度redux操作，因此，根据检索的数据更新状态的一部分。然后我的组件将只从状态：

获取值

function mapStateToProps(state) {
    return {
        places: state.places.list,
        trainingFormats: state.trainingFormats.list,
        trainingTypes: state.trainingTypes.list
    }
}

它实际上正在工作，但结果是：每当一个动作完成并更新状态时，我的组件就会被重新渲染......让我们想象一下我的主要训练有10个外键：对于单个页面加载以显示更新表单，我的组件将呈现10次。不会导致糟糕的表现吗？有没有更好的方法来检索外国数据？

Answer 1

让我重新说一下。您的每个记录组件都有地点，培训格式和培训类型的下拉列表。下拉选项通过ajax检索。当你有几条记录时，会有很多请求和重新渲染。

解决方案：不要让每个记录组件自行检索下拉值。对于每个相应的下拉列表，无论如何它们都是相同的。而是将它们加载到其中一个父组件中，并将它们作为属性传递给记录组件，例如availablePlaces，availableFormats，availableTypes。

您的父组件甚至不必通过ajax加载可用的下拉选项。它可以用它初始化。

有关重新渲染的进一步优化，请查看https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate。

Facebook建议在https://facebook.github.io/react/docs/react-component.html#componentdidupdate进行ajax调用。

React / Redux - 如何在加载组件时处理多个异步调用

1 个答案: