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中的onSocketMessage 。 此外，對組件道具的修改可能會導致重新渲染。 如果要為updateFlag遵循同步邏輯，建議您使用回調： setState(value, callback) 。

另外，還要注意從這句話在這里 ：

除非shouldComponentUpdate（）返回false，否則setState（）將始終導致重新渲染。 如果正在使用可變對象，並且不能在shouldComponentUpdate（）中實現條件渲染邏輯，則僅當新狀態不同於先前狀態時調用setState（）才能避免不必要的重新渲染。

因此，如果您的邏輯依賴於渲染，則可能是錯誤的，因為其他情況可能會觸發重新渲染。 是的，socket.io保證數據包/消息傳遞，但不能保證其他因素（例如邏輯，網絡狀態/配置）正常。 如果出現問題，建議您使用套接字客戶端和服務器檢查錯誤事件。

另外，如果您的邏輯取決於特定狀態/屬性值的更改，則應使用componentDidUpdate進行驗證。

希望我能幫上忙。