Question

我想在加载DOM之前验证用户令牌（存储在本地存储中的令牌），因此用户将立即看到正确的DOM。 window.onload 和 document.onreadystatechange 触发得太晚了。（这是一个React应用）

什么是合适的活动？

谢谢！

Answer 1

创建一个状态变量canShow，最初将其设置为false，现在在useEffect回调函数中验证令牌并根据验证切换canShow。并且在return函数中，仅当canShow为true时才渲染dom。

P.S。您可以使用基于类的组件来做同样的事情，但是反应鼓励开发人员尽可能多地使用功能组件。

Answer 2

您可以在脚本头部添加脚本标签

<head>
  <!-- meta, css, ... -->

  <script>
    //This gets executed before
  </script>
</head>

<body>
  The body gets parsed
</body>

Answer 3

您可以尝试在App.js（起始react文件）中使用生命周期方法-componentDidMount。将您的逻辑放入此生命周期方法中。例如-

async componentDidMount() {
    await this.setState({
      user:localStorage.getItem("user")
    })
}

然后在渲染功能中使用此状态来相应地更新DOM。