React / Preact: как временно избежать обновления DOM для определенного компонента? - PullRequest
0 голосов
/ 07 февраля 2019

Я использую рендеринг на стороне сервера с разделением кода в Webpack.Сервер возвращает HTML для компонента.Однако, когда React инициализируется, так как я использую разделение кода, компонент React, который я хочу визуализировать, еще не загружен.Как правило, я хотел бы отобразить экран загрузки.Однако HTML-код для компонента уже обработан, поэтому я не хочу заменять его загрузочным экраном.

Есть ли способ заставить React временно игнорировать компонент и не обновлять DOM?

Компонент выглядит примерно так:

export default class SomeRoute extends Preact.Component {
  constructor() {
    super();

    this.state = {
      Component: null,
    };
  }

  componentDidMount() {
    if (!this.state.component) {
      this.props.componentLoader().then(Component => this.setState({ Component }));
    }
  }

  render({}, { Component }) {
    if (!Component) {
      return (
        <p>Loading...</p>
      );
    }

    return (
      <Component />
    );
  }
}

Вывод <Component /> уже возвращен сервером.

1 Ответ

0 голосов
/ 07 февраля 2019

Вы можете использовать shouldComponentUpdate () .Когда вы return false не будете обновлять компонент.

shouldCompnentUpdate(nextprops,nextstate){
    return Boolean(this.state.Component)
}
...