React/Preact: как временно избежать обновления DOM для определенного компонента?

Я использую рендеринг на стороне сервера с разделением кода 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 /> уже возвращен сервером.


webpack reactjs javascript preact
person Leo Jiang    schedule 07.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

shouldCompnentUpdate(nextprops,nextstate){
    return Boolean(this.state.Component)
}
person Maheer Ali    schedule 07.02.2019
comment
Это не требуется для первоначального рендеринга. Кроме того, React просто использует предыдущий вывод render() - person Leo Jiang; 07.02.2019
comment
@Leo Jiang, ты хочешь предотвратить render(), даже когда компонент загружен? И вы сказали компонент и не обновлять ;DOM - person Maheer Ali; 07.02.2019