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

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

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

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

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

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

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

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

新的state其實和之前的是一樣的。這個問題通?？梢酝ㄟ^shouldComponentUpdate來解決。也可以用pure render或者其他的庫來解決這個問題。

通常發(fā)生改變的state是和渲染有關(guān)的，但是也有例外。比如，有些數(shù)據(jù)是根據(jù)某些狀態(tài)來顯示的。

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


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

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

setTimeout(this.fireOnSelect, 0);
直接輸出，回調(diào)函數(shù)，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, 輸入的結(jié)果是：
> Direct call 0
> In callback 1
> begin of setTimeout 1
> setTimeout setState callback 2
> end of setTimeout 2
> setTimeout of settimeout 2
和渲染無關(guān)的狀態(tài)盡量不要放在state中來管理
通常state中只來管理和渲染有關(guān)的狀態(tài)，從而保證setState改變的狀態(tài)都是和渲染有關(guān)的狀態(tài)。這樣子就可以避免不必要的重復渲染。其他和渲染無關(guān)的狀態(tài)，可以直接以屬性的形式保存在組件中，在需要的時候調(diào)用和改變，不會造成渲染?；蛘邊⒖荚闹械?b>MobX。
避免不必要的修改，當state的值沒有發(fā)生改變的時候，盡量不要使用setState。雖然shouldComponentUpdate和PureComponent可以避免不必要的重復渲染，但是還是增加了一層shallowEqual的調(diào)用，造成多余的浪費。
以上
           
               
                                           
                       
                 
            
                     

                 

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

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81439.html
               
                      
               

                 
                                  
上一篇：JavaScript 數(shù)組方法對比
  
                                                
                                       
下一篇：Dapp開發(fā)教程 發(fā)布Dapp到線上
                                  
              
              

                
相關(guān)文章
                

                             
                                                                                                    

                                                

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

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

                                

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

                                                

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

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

                                

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

                                                

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

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

                                

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

                                                

                          
React setState 簡單整理總結(jié)
                                                     
摘要：區(qū)別在于傳入一個更新函數(shù)，就可以訪問當前狀態(tài)值。后面兩次會同步更新，分別輸出，很顯然，我們可以將次簡單規(guī)成兩類是一類中的又是一類，因為這兩次在不同的調(diào)用棧中執(zhí)行。

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

                                

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

                                                

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

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

                                

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

                  
                  
發(fā)表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論
   
                
 
                      

              
           
           

              
 
                

                    
                    
instein
                    
男|高級講師
                    

                     
                                                                      我要關(guān)注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
捋一捋Python中的List（下）
                            
閱讀 2059·2021-11-15 11:39
                                                       
如何下載Tomcat
                            
閱讀 3239·2021-10-09 09:41
                                                       
Codepen 每日精選（2018-4-1）
                            
閱讀 1505·2019-08-30 14:20
                                                       
響應式布局開發(fā)
                            
閱讀 3279·2019-08-30 13:53
                                                       
【靜態(tài)頁面架構(gòu)】CSS之表格
                            
閱讀 3337·2019-08-29 16:32
                                                       
IE8 CSS 樣式兼容性清單
                            
閱讀 3405·2019-08-29 11:20
                                                       
React 造輪子系列：Icon 組件思路
                            
閱讀 3034·2019-08-26 13:53
                                                       
堅持：學習Java后臺的第一階段，我學習了那些知識
                            
閱讀 788·2019-08-26 12:18
                                                
                      
                

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

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












<option id="gwc0o"></option>
<button id="gwc0o"><th id="gwc0o"></th></button>
<strike id="gwc0o"><kbd id="gwc0o"></kbd></strike>
<strike id="gwc0o"></strike>