React 延迟渲染

dabusidede

于 2021-10-07 13:11:47 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactJS 进阶文章标签： react.js

本文链接：https://blog.youkuaiyun.com/dabusidede/article/details/120635041

ReactJS 进阶专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在React组件中使用shouldComponentUpdate方法，使得组件在接收到isLoading属性改变后延迟1秒再进行渲染，确保UI平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

props 改变后如何让组件在1s后才进行渲染呢？？不多说，上代码

shouldComponentUpdate(nextProps: Readonly<{isLoading: boolean}>){
    // 延迟1s关闭
    if(this.props.isLoading == true && nextProps.isLoading == false){
        setTimeout(() => {
            this.setState({});
        }, 1000);

        return false;
    }

    return true;
}