在等待在 ReactJS 渲染中获取数据时显示加载微调器

Posted 2023-02-22

【中文标题】在等待在 ReactJS 渲染中获取数据时显示加载微调器

【英文标题】：Show loading spinner while waiting for data to be fetched in ReactJS render

【发布时间】：2017-03-16 00:28:08

【问题描述】：

我正在尝试编写 ReactJS 组件，该组件将显示由状态中加载的标志切换的 2 种视图类型。我问的是加载器微调器，但考虑到基于该标志显示 2 个不同的 DOM 树，这个问题可能会更复杂。我真的很想让我的代码尽可能清晰。

我想到的是两种写法：

第一种方式对我来说非常直观但不可读 + 我必须在 else 语句中添加另一个包装 div：

render() 
    return (
        <div>
            !this.state.loaded ? <Loader /> : (
                <div>
                    <Arrow direction="left" onClick=this.slideLeft/>
                    <ul>
                        
                            this.props.images.map((image, index) => 
                                return (
                                    <li key=index styleName=index === this.state.active ? 'active' : ''>
                                        <ImageItem src=image />
                                    </li>
                                )
                            )
                        
                    </ul>
                    <Arrow direction="right" onClick=this.slideRight/>
                </div>
            )
        </div>
    );

第二种方法是在渲染任何加载的代码之前返回，这样在渲染函数中保留逻辑是一个好习惯吗？ + “内容”类 div 重复：

render() 
    if(!this.state.loaded)
        return <div className="content"><Loader /></div>;
    

    return (
        <div className="content">
            <Arrow direction="left" onClick=this.slideLeft/>
            <ul>
                
                    this.props.images.map((image, index) => 
                        return (
                            <li key=index styleName=index === this.state.active ? 'active' : ''>
                                <ImageItem src=image />
                            </li>
                        )
                    )
                
            </ul>
            <Arrow direction="right" onClick=this.slideRight/>
        </div>
    );

也许您对我有其他建议？谢谢。

【问题讨论】：

两个代码都很好。它们没有任何问题，请使用您认为更具可读性或实用性的任何一个。

【参考方案1】：

据我所知，这是一种常见的做法。但是，您应该以某种方式重构您的组件，即您的渲染函数中只有一个或没有逻辑。

你的父组件观察加载状态并渲染加载器组件或“加载”的组件。

如果你的状态逻辑变得更高级，那么你应该看看 Flux 架构及其实现库 Redux。