在react js上加载组件
在react js上加载组件
提问于 2020-07-29 15:20:30
我在React上使用单页应用程序，我遇到了一个函数问题，所以返回结果和渲染结果需要一些时间。因此，我想问一下，是否可以将其更改为异步函数，以便在它返回后获得结果，但其他组件也不会被卡住。
我可能会误解它应该如何工作，但这里是我的问题的基本示例：
class Example extends React.Component {
state = {
data: "whatever"
}
myHeavyFunction(data){
//while this function works whole page on browser freezes for 3-5 second
return (<div>{result}</div>);
}
buttonClicked(){
this.setState({data: "new whatever"});
}
render(){
return(
<div>{this.myHeavyFunction(this.state.data)}</div>
);
}
}我没有使用任何API请求，它只是一个处理大数据的函数。在我的例子中，"myHeavyFunction“是一个不同的组件，我尝试使用React.lazy/Suspense，但不幸的是，它只在刷新页面时加载。
所以我想要一个函数，它在我点击按钮后与加载微调器异步渲染，这样页面就不会刷新，其他组件也不会冻结。
回答 1
Stack Overflow用户
发布于 2020-07-29 15:45:56
您可以将myHeavyFunction转换为返回Promise，并且在任何处理程序中，您都可以使用Promise-chain，或者使处理程序成为async函数并等待返回值。再加上一些“加载”状态，你就可以显示一个加载指示器了。
class Example extends Component {
state = {
data: "whatever",
loading: false, // <-- loading state
};
myHeavyFunction = () => {
return new Promise(resolve => {
setTimeout(() => resolve("new whatever"), 5000); // <-- "expensive cmoputation"
});
};
buttonClicked = async () => { // <-- async function
this.setState({
loading: true // <-- loading true
});
const data = await this.myHeavyFunction(); // await expensive computation
this.setState({
data,
loading: false // <-- loading false
});
};
render() {
const { data, loading } = this.state;
return (
<div>
<div>{loading ? "loading..." : data}</div> // <-- conditional render
<button onClick={this.buttonClicked}>Update</button>
</div>
);
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63148317
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号