react入坑之setState注意事项

• 不要直接改变state 直接对组件state中的属性赋值将不会触发DOM更新，因为React并不知道state被改变了
• state的更新可能是异步的 React会一次处理多个对setState的调用以提高性能，所以调用setState()时不应当直接基于另外一些来自state或props中的属性进行计算，很有可能当前计算的值并不是最终的值，当用于计算的另一些值再次变化后，React并不会刷新DOM（因为没有再次调用setState()）。为了修正这点，React提供另一种调用setState()函数的方式：传入一个函数，而不是对象

// 错误的用法 
this.setState({ counter: this.state.counter + this.props.increment }) 
// 正确的用法 
this.setState((prevState, props) => ({ 
// 接受一个表示前次state的参数和一个当前props的参数 
counter: prevState.counter + props.increment 
// 这里实际上是返回了一个对象，是ES6箭头函数的简写 
})) 

 

• setState是对象的合并而不是替换
  setState方法是将传入的参数对象或函数返回的对象与现有的state对象进行合并，非常类似于使用Object.assign(prevState, newState)的效果