我在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 />的输出已由服务器返回。

最佳答案

您可以使用shouldComponentUpdate()。当您return false时,将不会更新组件。

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

10-07 19:48
查看更多