й компании мы переносим интерфейс веб-приложения на ReactJS. Мы работаем с приложением create-реагировать (обновлено до v16), без Redux. Теперь я застрял на странице, структуру которой можно упростить с помощью следующего изображения:

Данные, отображаемые тремя компонентами (SearchableList, SelectableList и Map), извлекаются с одним и тем же внутренним запросом вcomponentDidMount() метод MainContainer. Результат этого запроса затем сохраняется в состоянии 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.pins на карту.

SelectableList отображает флажок, чтобы разрешить действия с его элементами. Всякий раз, когда происходит какое-либо действие с элементом компонента SelectableList, оно может иметь побочные эффекты на выводах карты.

Я решил сохранить в состоянии RightContainer список, в котором хранятся все идентификаторы элементов, отображаемых с помощью SelectableList; этот список передается как реквизиты и в SelectableList, и в Map. Затем я передаю в SelectableList обратный вызов th, когда всякий раз, когда делается выбор, обновляется список идентификаторов внутри RightContainer; новые реквизиты поступают как в SelectableList и Map, и такrender() называется в обоих компонентах.

Он работает нормально и помогает сохранить все, что может случиться с SelectableList и Map внутри RightContainer, но я спрашиваю, верно ли это длялифтинг-состояние до а такжеодного источника из-истины концепции.

В качестве возможной альтернативы я подумал добавить_selected свойство каждого элемента вstate.right.data в MainContainer и передайте три уровня обратного вызова 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;

Заранее спасибо!