使用React.setState需要注意的三点

摘要：而不是在方法中在通过来获取使用回调函数方法接收一个作为回调函数。这样子直接输出，回调函数，对比如果默认为输入的结果是和渲染无关的状态尽量不要放在中来管理通常中只来管理和渲染有关的状态，从而保证改变的状态都是和渲染有关的状态。

原文: 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服务器
                                             
                         私有云
                                                                                                                                                 
                                      
                     
                    
                                                                                               需要注意
                                                                                                           买域名需要注意什么
                                                                                                           购买域名需要注意什么
                                                                                                           出售域名需要注意什么
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/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（下）
                            
阅读 1803·2021-11-15 11:39
                                                       
如何下载Tomcat
                            
阅读 3067·2021-10-09 09:41
                                                       
Codepen 每日精选（2018-4-1）
                            
阅读 1385·2019-08-30 14:20
                                                       
响应式布局开发
                            
阅读 3097·2019-08-30 13:53
                                                       
【静态页面架构】CSS之表格
                            
阅读 3224·2019-08-29 16:32
                                                       
IE8 CSS 样式兼容性清单
                            
阅读 3184·2019-08-29 11:20
                                                       
React 造轮子系列：Icon 组件思路
                            
阅读 2904·2019-08-26 13:53
                                                       
坚持：学习Java后台的第一阶段，我学习了那些知识
                            
阅读 676·2019-08-26 12:18
                                                
                      
                

                   
              
  

                  
最新活动
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
阅读需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    









<