React+Redux登录页：无需setTimeout实现加载器随HTML加载显隐

我明白你现在的困扰——用setTimeout控制加载器显隐确实是个权宜之计，但硬编码超时时间太不灵活了：网络好的时候用户要白等，网络差的时候加载器提前消失，体验很不好。下面给你两种更可靠的方案，完全不需要依赖setTimeout：

方案一：监听页面所有资源加载完成（推荐） #

如果你的需求是等页面所有资源（包括图片、样式表、字体等）都加载完成后再隐藏加载器，可以监听window的load事件。这个事件会在页面所有资源加载完毕后触发，比固定超时准确得多。

修改你的组件代码如下：

class LoginScreen extends React.Component {
  state = { email: '', password: '', stayLoggedIn: false, isLoading: true };

  // 定义加载完成后的处理函数
  handlePageLoad = () => {
    this.setState({ isLoading: false });
    // 记得移除监听，避免组件卸载后触发导致内存泄漏
    window.removeEventListener('load', this.handlePageLoad);
  };

  componentDidMount() {
    // 先检查页面是否已经加载完成（比如从缓存进入页面的情况）
    if (document.readyState === 'complete') {
      this.handlePageLoad();
    } else {
      // 否则监听load事件
      window.addEventListener('load', this.handlePageLoad);
    }
  }

  // 组件卸载时清理监听
  componentWillUnmount() {
    window.removeEventListener('load', this.handlePageLoad);
  }

  render() {
    const { isLoading } = this.state;

    // 加载状态下显示加载器
    if (isLoading) {
      return <div className="loader">正在加载...</div>;
    }

    // 加载完成后渲染登录表单
    return (
      <div className="login-container">
        <input
          type="email"
          value={this.state.email}
          onChange={(e) => this.setState({ email: e.target.value })}
          placeholder="邮箱"
        />
        <input
          type="password"
          value={this.state.password}
          onChange={(e) => this.setState({ password: e.target.value })}
          placeholder="密码"
        />
        <label>
          <input
            type="checkbox"
            checked={this.state.stayLoggedIn}
            onChange={(e) => this.setState({ stayLoggedIn: e.target.checked })}
          />
          保持登录状态
        </label>
        <button type="submit">登录</button>
      </div>
    );
  }
}

为什么这个方案更好？ #

• 完全贴合“整个页面加载完成”的需求，不会出现加载器提前消失或延迟隐藏的情况
• 处理了页面从缓存加载的极端情况（此时load事件不会触发，直接通过document.readyState判断）
• 清理了事件监听，避免内存泄漏问题

方案二：仅等待DOM结构加载完成 #

如果你的需求只是等HTML结构渲染完成（不需要等图片等资源），其实在componentDidMount中直接设置isLoading: false就可以了。因为React的componentDidMount生命周期钩子是在组件挂载到DOM之后触发的，此时页面的HTML结构已经完全构建完成：

componentDidMount() {
  this.setState({ isLoading: false });
}

这个方案更轻量，但要注意：此时页面的图片、视频等资源可能还在加载中，页面视觉上可能还没完全渲染好，适合对加载体验要求不高的场景。

内容的提问来源于stack exchange，提问作者Vivek Singh