在我公司，我们正在将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 ...
  }

  render() {
    return (
      <div className="main-container">
        <SelectableList
          data={props.right.data}
          onDataSelection={e => this.onDataSelection(e)}
          selectedItems={this.state.selectedItems}
        />
        <Map
          pins={props.right.pins}
          selectedItems={this.state.selectedItems}
        />
      </div>
    );
  }
}

export default RightContainer;

提前致谢！