在我公司，我们正在将Web应用程序的前端迁移到ReactJS。我们正在使用create-react-app（更新为v16），而没有Redux。现在，我停留在页面上，该页面可以通过以下图像简化：
在componentDidMount()MainContainer方法中，使用相同的后端请求检索由三个组件（SearchableList，SelectableList和Map）显示的数据。然后，此请求的结果存储在MainContainer的状态中，其结构大致如下：
state.allData = {
left: {
data: [ ... ]
},
right: {
data: [ ... ],
pins: [ ... ]
}
}
LeftContainer state.allData.left从MainContainer 接收作为道具，并props.left.data再次作为道具传递到SearchableList。
RightContainer state.allData.right从MainContainer 接收作为道具，并传递props.right.data到SelectableList和props.right.pinsMap。
SelectableList显示一个复选框，允许对其项目执行操作。每当对SelectableList组件的一项操作发生时，它可能会对Map引脚产生副作用。
我决定在RightContainer状态下存储一个列表，该列表保留SelectableList显示的所有项目ID。此列表作为道具传递给SelectableList和Map。然后，我将一个回调传递给SelectableList，该回调使每当进行选择时都会更新RightContainer中的ID列表；新道具同时出现在SelectableList和Map中，因此render()在这两个组件中都被称为。
它工作正常，有助于将Rightable容器中的SelectableList和Map可能发生的所有事情保留在RightContainer中，但是我想问这对于提升状态和事实真相的概念是否正确。
作为可行的替代方案，我想到了向MainContainer中的_selected每个项目添加一个属性state.right.data，并将select回调三级传递给SelectableList，以处理MainContainer中的所有可能动作。但是，一旦发生选择事件，这最终将强制加载LeftContainer和RightContainer，从而引入了实现逻辑的需求，例如shouldComponentUpdate()避免无用的逻辑，render()尤其是在LeftContainer中。
从体系结构和性能的角度来看，哪种是/可能是优化此页面的最佳解决方案？
您可以在下面摘录我的组件，以帮助您了解情况。
MainContainer.js
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
allData: {}
};
}
componentDidMount() {
fetch( ... )
.then((res) => {
this.setState({
allData: res
});
});
}
render() {
return (
<div className="main-container">
<LeftContainer left={state.allData.left} />
<RightContainer right={state.allData.right} />
</div>
);
}
}
export default MainContainer;
RightContainer.js
class RightContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedItems: [ ... ]
};
}
onDataSelection(e) {
const itemId = e.target.id;
// ... handle itemId and selectedItems ...
}
忽然笑
呼唤远方
相关分类