摘要：而不是在方法中在通過來獲取使用回調函數方法接收一個作為回調函數。這樣子直接輸出，回調函數，對比如果默認為輸入的結果是和渲染無關的狀態盡量不要放在中來管理通常中只來管理和渲染有關的狀態，從而保證改變的狀態都是和渲染有關的狀態。

原文: https://medium.com/@mweststra...
作者: Michel Weststrate

這篇文章原標題是3 Reasons why I stopped using React.setState，但是我對原文作者提出的論點不是很感冒，但是作者提出的三點對React新手來說是很容易忽略的地方，所以我在這里只提出部分內容，而且把標題改為使用React.setState需要注意的三點。

對React新手來說，使用setState是一件很復雜的事情。即使是熟練的React開發，也很有可能因為React的一些機制而產生一些bug，比如下面這個例子：

文檔中也說明了當使用setState的時候，需要注意什么問題：

注意：
絕對不要 直接改變this.state，因為之后調用setState()可能會替換掉你做的改變。把this.state當做是不可變的。
setState()不會立刻改變this.state，而是創建一個即將處理的state轉變。在調用該方法之后訪問this.state可能會返回現有的值。
對setState的調用沒有任何同步性的保證，并且調用可能會為了性能收益批量執行。
setState()將總是觸發一次重繪，除非在shouldComponentUpdate()中實現了條件渲染邏輯。如果可變對象被使用了，但又不能在shouldComponentUpdate()中實現這種邏輯，僅在新state和之前的state存在差異的時候調用setState()可以避免不必要的重新渲染。

總結出來，當使用setState的時候，有三個問題需要注意:

很多開發剛開始沒有注意到setState是異步的。如果你修改一些state，然后直接查看它，你會看到之前的state。這是setState中最容易出錯的地方。 setState這個詞看起來并不像是異步的，所以如果你不假思索的用它，可能會造成bugs。下面這個例子很好的展示了這個問題：

class Select extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      selection: props.values[0]
    };
  }
  
  render() {
    return (
      

        {this.props.values.map(value =>
          
 this.onSelect(value)}
          >
            {value}
          
 
        )}  
      
    )
  }
  
  onSelect(value) {
    this.setState({
      selection: value
    })
    this.fireOnSelect()
  }

  onKeyDown = (e) => {
    const {values} = this.props
    const idx = values.indexOf(this.state.selection)
    if (e.keyCode === 38 && idx > 0) { /* up */
      this.setState({
        selection: values[idx - 1]
      })
    } else if (e.keyCode === 40 && idx < values.length -1) { /* down */
      this.setState({
        selection: values[idx + 1]
      })  
    }
    this.fireOnSelect()
  }
   
  fireOnSelect() {
    if (typeof this.props.onSelect === "function")
      this.props.onSelect(this.state.selection) /* not what you expected..*/
  }
}

ReactDOM.render(
   console.log(value)}
  />,
  document.getElementById("app")
)
第一眼看上去，這個代碼似乎沒有什么問題。兩個事件處理中調用onSelect方法。但是，這個Select組件中有一個bug很好的展現了之前的GIF圖。onSelect方法永遠傳遞的是之前的state.selection值，因為當fireOnSelect調用的時候，setState還沒有完成它的工作。我認為React至少要把setState改名為scheduleState或者把回掉函數設為必須參數。
這個bug很容易修改，最難的地方在于你要知道有這個問題。
2. setState會造成不必要的渲染
setState造成的第二個問題是：每次調用都會造成重新渲染。很多時候，這些重新渲染是不必要的。你可以用React performance tools中的printWasted來查看什么時候會發生不必要渲染。但是，大概的說，不必要的渲染有以下幾個原因：

新的state其實和之前的是一樣的。這個問題通常可以通過shouldComponentUpdate來解決。也可以用pure render或者其他的庫來解決這個問題。

通常發生改變的state是和渲染有關的，但是也有例外。比如，有些數據是根據某些狀態來顯示的。

第三，有些state和渲染一點關系都沒有。有一些state可能是和事件、timer ID有關的。


3.setState并不能很有效的管理所有的組件狀態
基于上面的最后一條，并不是所有的組件狀態都應該用setState來進行保存和更新的。復雜的組件可能會有各種各樣的狀態需要管理。用setState來管理這些狀態不但會造成很多不需要的重新渲染，也會造成相關的生命周期鉤子一直被調用，從而造成很多奇怪的問題。
后話
在原文中作者推薦了一個叫做MobX的庫來管理部分狀態，我不是很感冒，所以我就不介紹。如果感興趣的，可以通過最上面的鏈接看看原文中的介紹。
基于上面提出的三點，我認為新手應該注意的地方是：

setState是不保證同步的
setState是不保證同步的，是不保證同步的，是不保證同步的。重要的事情說三遍。之所以不說它是異步的，是因為setState在某些情況下也是同步更新的。可以參考這篇文章
如果需要在setState后直接獲取修改后的值，那么有幾個方案：
傳入對應的參數，不通過this.state獲取
針對于之前的例子，完全可以在調用fireOnSelect的時候，傳入需要的值。而不是在方法中在通過this.state來獲取
使用回調函數
setState方法接收一個function作為回調函數。這個回掉函數會在setState完成以后直接調用，這樣就可以獲取最新的state。對于之前的例子，就可以這樣：
this.setState({
  selection: value
}, this.fireOnSelect)
使用setTimeout
在setState使用setTimeout來讓setState先完成以后再執行里面內容。這樣子：
this.setState({
  selection: value
});

setTimeout(this.fireOnSelect, 0);
直接輸出，回調函數，setTimeout對比
    componentDidMount(){
    this.setState({val: this.state.val + 1}, ()=>{
      console.log("In callback " + this.state.val);
    });

    console.log("Direct call " + this.state.val);   

    setTimeout(()=>{
      console.log("begin of setTimeout" + this.state.val);

       this.setState({val: this.state.val + 1}, ()=>{
          console.log("setTimeout setState callback " + this.state.val);
       });

      setTimeout(()=>{
        console.log("setTimeout of settimeout " + this.state.val);
      }, 0);

      console.log("end of setTimeout " + this.state.val);
    }, 0);
  }
如果val默認為0, 輸入的結果是：
> Direct call 0
> In callback 1
> begin of setTimeout 1
> setTimeout setState callback 2
> end of setTimeout 2
> setTimeout of settimeout 2
和渲染無關的狀態盡量不要放在state中來管理
通常state中只來管理和渲染有關的狀態，從而保證setState改變的狀態都是和渲染有關的狀態。這樣子就可以避免不必要的重復渲染。其他和渲染無關的狀態，可以直接以屬性的形式保存在組件中，在需要的時候調用和改變，不會造成渲染。或者參考原文中的MobX。
避免不必要的修改，當state的值沒有發生改變的時候，盡量不要使用setState。雖然shouldComponentUpdate和PureComponent可以避免不必要的重復渲染，但是還是增加了一層shallowEqual的調用，造成多余的浪費。
以上
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               需要注意
                                                                                                           買域名需要注意什么
                                                                                                           購買域名需要注意什么
                                                                                                           出售域名需要注意什么
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81439.html
               
                      
               

                 
                                  
上一篇：JavaScript 數組方法對比
  
                                                
                                       
下一篇：Dapp開發教程 發布Dapp到線上
                                  
              
              

                
相關文章
                

                             
                                                                                                    

                                                

                          
揭密React setState
                                                     
摘要：下面來逐步的解析圖里的流程。一將事務放進隊列中這里的可以傳也可以傳它會產生新的以一種的方式跟舊的進行合并。如果當前不在更新過程的話，則執行更新事務。以上即為的實現過程，最后還是用一個流程圖在做一個總結吧參考文檔

前言
學過react的人都知道，setState在react里是一個很重要的方法，使用它可以更新我們數據的狀態，本篇文章從簡單使用到深入到setState的內部，全方位為你揭開...
                                                   
                          

                                

                                    JeOam
                                    2019-08-26 11:58
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
精讀《React PowerPlug 源碼》
                                                     
摘要：今天我們就來解讀一下的源碼。比較有意思，將定時器以方式提供出來，并且提供了方法。實現方式是，在組件內部維護一個定時器，實現了組件更新銷毀時的計時器更新銷毀操作，可以認為這種定時器的生命周期綁定了組件的生命周期，不用擔心銷毀和更新的問題。

1. 引言
React PowerPlug 是利用 render props 進行更好狀態管理的工具庫。
React 項目中，一般一個文件就是一個類，...
                                                   
                          

                                

                                    teren
                                    2019-08-23 15:27
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
精讀《setState 做了什么》
                                                     
摘要：要實施這個方案，最大問題就是接口約定。討論地址是精讀做了什么如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。前端精讀幫你篩選靠譜的內容。

1 引言
setState 是 React 框架最常用的命令，它是用來更新狀態的，這也是 React 框架劃時代的功能。
但是 setState 函數是 react 包導出的，他們又是如何與 react-dom react-nativ...
                                                   
                          

                                

                                    impig33
                                    2019-08-23 14:32
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
React setState 簡單整理總結
                                                     
摘要：區別在于傳入一個更新函數，就可以訪問當前狀態值。后面兩次會同步更新，分別輸出，很顯然，我們可以將次簡單規成兩類是一類中的又是一類，因為這兩次在不同的調用棧中執行。

寫業務代碼的時候 需要經常用到setState, 前幾天review代碼的時候， 又想了一下這個API， 發現對它的了解不是很清楚， 僅僅是  setState 是異步的, 周六在家參考了一些資料，簡單整理了下，寫的比較簡單...
                                                   
                          

                                

                                    EdwardUp
                                    2019-08-22 18:29
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
React setState源碼實現理解
                                                     
摘要：新的值回調函數。官方注解是給組件做個標記需要重新渲染，并且將可選的回調函數添加到函數列表中，這些函數將在重新渲染的時候執行。一共做了兩件事一是通過執行方法來更新組件二是若方法傳入了回調函數則將回調函數存入隊列。

Q1
setState改變狀態之后，不會立即更新state值。所以，如果改變state值，react是什么時候進行組件的更新呢？setState()到底做了一些什么呢？
A1
...
                                                   
                          

                                

                                    xietao3
                                    2019-08-23 18:21
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論
   
                
 
                      

              
           
           

              
 
                

                    
                    
instein
                    
男|高級講師
                    

                     
                                                                      我要關注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
捋一捋Python中的List（下）
                            
閱讀 2044·2021-11-15 11:39
                                                       
如何下載Tomcat
                            
閱讀 3226·2021-10-09 09:41
                                                       
Codepen 每日精選（2018-4-1）
                            
閱讀 1491·2019-08-30 14:20
                                                       
響應式布局開發
                            
閱讀 3262·2019-08-30 13:53
                                                       
【靜態頁面架構】CSS之表格
                            
閱讀 3325·2019-08-29 16:32
                                                       
IE8 CSS 樣式兼容性清單
                            
閱讀 3362·2019-08-29 11:20
                                                       
React 造輪子系列：Icon 組件思路
                            
閱讀 3018·2019-08-26 13:53
                                                       
堅持：學習Java后臺的第一階段，我學習了那些知識
                            
閱讀 775·2019-08-26 12:18
                                                
                      
                

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
閱讀需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    











<th id="6oasy"></th><ul id="6oasy"></ul>
<samp id="6oasy"></samp>
<ul id="6oasy"><pre id="6oasy"></pre></ul>
<ul id="6oasy"><tbody id="6oasy"></tbody></ul>