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

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 0In callback 1begin of setTimeout 1setTimeout setState callback 2end of setTimeout 2setTimeout of settimeout 2和渲染无关的状态尽量不要放在 state 中来管理通常 state 中只来管理和渲染有关的状态 ，从而保证 setState 改变的状态都是和渲染有关的状态。这样子就可以避免不必要的重复渲染。其他和渲染无关的状态，可以直接以属性的形式保存在组件中，在需要的时候调用和改变，不会造成渲染。避免不必要的修改，当 state 的值没有发生改变的时候，尽量不要使用 setState 。虽然 shouldComponentUpdate 和 PureComponent 可以避免不必要的重复渲染，但是还是增加了一层 shallowEqual 的调用，造成多余的浪费。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。            
            
                        
            分享名称：浅谈使用React.setState需要注意的三点            
            转载注明：http://xiwangwangguoyuan.com/article/pcgshh.html
        
    
    
        其他资讯
        
            
                    腾讯云服务器桌面太小 腾讯云服务器图形界面
                
                    电脑怎么设置域名固定打开 windows设置域名
                
                    php删除多出的数据 php删除语句
                
                    vbnet应用 net vb
                
                    域名服务器怎么下载 域名服务器存放在哪里
                        
    


    
        
            免费获取网站建设与品牌策划方案报价
            *主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上云锦诚科技。
            
                
                
                
                提交需求