javascript - React 到底什么时候渲染——在各种异步调用、socketIO 和 React 之间管理状态的问题

Question

我正在开发一个以 React 作为前端的 MERN 堆栈应用程序。这是一款依赖 socketIO 来了解其他玩家何时移动的游戏，以便游戏可以从数据库执行 REST API 调用，以允许 React 刷新游戏板。

它工作得很好，但有时 React 应用程序似乎没有收到 socketIO 消息，尽管据我所知，socketIO 保证传递。这是一个很难重现的错误。一个想法是 React 可能在消息到达时进行刷新，这不知何故把事情搞砸了。所以我添加了一个标志，当消息到达时我将其设置为 true，并在加载更新的游戏时清除标志，我将其放入 React state，导致(我希望)刷新。奇怪的是，当标志仍然是 true 时，正在调用 render。这是为什么？

伪代码

this.state = game
updateFlag = false

onSocketMessage => {
    updateFlag = true
    asyncGetNewGame
      .then(game => {
         updateFlag = false
         this.setState({game})
         })
   }

  render() {
     log.debug(updateFlag) // is true, but why?
     const {state:{game}} = this

     <SomeComponent game={game}>
  }

按照上面的说法，该标志在渲染期间保持 true，但我认为在异步调用以获取新游戏后将标志同步设置为 false会在渲染之前发生，因为据我所知，渲染是由 state 字段 game 的变化引起的，我在我更改标志之前不要设置。

我对时间表的理解是否正确？如果有人可以帮助阐明这一点，我将不胜感激。

Answer 1

好吧，setState 不是同步方法，因此，之前对它的任何调用都可能触发渲染，不一定是 onSocketMessage 中的调用。此外，对组件 Prop 的修改可能会导致重新渲染。如果您想遵循 updateFlag 的同步逻辑，我建议您使用回调:setState(value, callback)。

另外，请注意来自 here 的声明:

setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

因此，如果您的逻辑依赖于渲染，那么它可能是错误的，因为其他事情可能会触发重新渲染。是的，socket.io 保证数据包/消息的传递，但它不保证其他因素(例如您的逻辑、网络状态/配置)正常。如果出现问题，我建议您检查套接字客户端和服务器的错误事件。

此外，如果您的逻辑取决于特定状态/ Prop 值的变化，那么您应该使用 componentDidUpdate用于验证。

希望我能帮上忙。