React setState使用注意事项

setState使用注意事项

1. 不要直接改变state

   直接对组件state中的属性赋值将不会触发DOM更新，react不知道state被改变了

2. state的更新可能是异步的

   react会一次处理多个对setState的调用，从而提高性能，修正方式如下：

   调用setState的时候传入一个函数，而不是一个对象

   //错误用法
   this.setState({val:this.state.val + this.props.increment});
   //正确用法
   this.setState((prevState, props) => {
       val:prevState.val + props.increment
   });
   

3. setState是对象的合并而不是替换

   • 当需要更新对象的时候，可以使用ES6展开运算符展开原来的对象，与新的的对象合并

     this.setState({...prevObj,newObj})
     

   • 当需要更新的数据量比较多，必须更新数组，可以新建一个临时变量，操作完临时变量之后，调用this.setState()

     let arr = this.state.arr;
     for(let i=0;i<tempArr.length;i++){
         //遍历数组，操作数组中的值
     }
     //等价于this.setState({arr:arr});
     this.setState({arr});