javascript - react /预 react : how to temporarily avoid updating the DOM for a certain component?

Question

我正在使用带有 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 />的输出服务器已返回。

Answer 1

您可以使用 shouldComponentUpdate() 。当您返回 false 时，它不会更新组件。

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