React / Preact：如何暂时避免为某个组件更新DOM？

Question

I'm using server-side rendering with Webpack's code-splitting. The server returns the HTML for the component. However, when React initializes, since I'm using code-splitting, the React component I want to render isn't downloaded yet. Typically, I'd want to display a loading screen. However, the HTML for the component is already rendered, so I don't want to replace it with a loading screen.

Is there a way to get React to temporarily ignore the component and not update the DOM?

The component looks something like this:

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 />
    );
  }
}

The output of <Component /> is already returned by the server.

Answer 1

You can use . When you return false it will not update the component.

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