我在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)
}