Государственные машины и пользовательский интерфейс: рендеринг на основе состояний "уровня узла" вместо состояний "листа"

Ответ 1

Попробуйте предложить решение для вашей архитектурной проблемы. Не уверен, будет ли это удовлетворительным, поскольку я не полностью уверен в своем понимании вашей проблемы.

Возьмем вашу проблему с того момента, когда у вас возникнут реальные проблемы, дерево компонентов экзамена.

Как вы заявили, проблема в том, что вам нужно копировать свои листья в каждом возможном "состоянии узла".

Что делать, если вы можете сделать некоторые данные доступными для любого из компонентов в дереве? Для меня это звучит как проблема, которая может использовать Контекстный API, который предоставляет React 16+.

В вашем случае я создам Провайдера, который обертывает все мое приложение/ветвь дерева, которое меня интересует в обмене контекстом:

Таким образом, вы можете получить доступ к своему контексту из любого из компонентов и его можно динамически и с помощью сокращения.

Затем для ваших компонентов пользовательского интерфейса просто осталось оставить логику для обработки состояния пользовательского интерфейса, предоставленного или рассчитанного с заданным контекстом. Остальная часть приложения может сохранять структуру без усложнения нижних уровней или дублирующих узлов, вам просто нужно добавить оболочку (Поставщик), чтобы сделать доступным контекст.

Некоторые примеры использования этого человека:

Материал UI <- Они передают тему как контекст и получают доступ к ней всякий раз и везде (тема может также изменяться динамически). Очень похоже на случай локали, который вы показали. WithStyles - это HOC, который связывает компонент с темой в состоянии. Чтобы упростить:

ТемаProvider содержит данные темы. Под ним могут быть Routes, Switch, Connected компоненты (очень похоже на ваши узлы, если я правильно понял). И тогда у вас есть компоненты, которые используются с withStyles, имеют доступ к данным темы или могут использовать данные темы для вычисления чего-то, и они вставляются в компонент в качестве опоры. ***

И только для того, чтобы закончить, я могу создать вид реализации в нескольких строках (я не пробовал, но это просто для объяснения с использованием объяснения контекста):

QuestionStateProvider

export const QuestionState = React.createContext({
  status: PLAYING,
  pause: () => {},
});

AppContainer

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status : PLAYING,
    };

    this.pause = () => {
      this.setState(state => ({
        status: PAUSE,
      }));
    };
  }

  render() {
    return (
      <Page>
        <QuestionState.Provider value={this.state}>
          <Routes ... />
          <MaybeALeaf />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    );
  }
}

Лист - это просто контейнер, который получает вопросы от государства и ставит вопрос или даже больше...

Q1

function Question(props) {
  return (
    <ThemeContext.Consumer>
      {status => (
        <button
          {...props}
          disable={status === PAUSED}
        />
      )}
    </ThemeContext.Consumer>
  );
}

Надеюсь, я правильно понял ваш вопрос, и мои слова достаточно ясны.

Поправьте меня, если я вас неправильно понял или вы хотите обсудить дальше.

*** Это крайне неопределенное и общее объяснение того, как работает материал