在我公司，我們正在將Web應用程序的前端遷移到ReactJS。我們正在使用create-react-app（更新為v16），而沒有Redux?，F在，我停留在頁面上，該頁面可以通過以下圖像簡化：在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.jsclass 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.jsclass RightContainer extends React.Component {  constructor(props) {    super(props);    this.state = {      selectedItems: [ ... ]    };  }  onDataSelection(e) {    const itemId = e.target.id;    // ... handle itemId and selectedItems ...  }