关于setState()

React.js学习 本文总阅读量次

setState()是异步的

setState是一个异步方法，可以集中执行多数据的更新，从而减少虚拟DOM比对次数，提升性能。

不推荐在setState()中直接修改state数据

不推荐直接修改state中的数据，如：

1
2
3
4
this.state.list.splice(xxx)
this.setState({
  list:this.state.list  
})

这样做确实可以生效，但应该遵循immutable的原则而尽量避免直接修改state中的数据，应改为（注意：一维数组可以这样，但是如果数组元素有引用对象就要注意深拷贝）：

1
2
3
4
5
const list = [...this.state.list]
list.splice(xxx)
this.setState({
   list
})

推荐使用setState()返回函数

setState()可以返回一个函数，也推荐大家尽量使用函数式setstate()，如：

1
2
3
4
5
6
handleInputChange(e){
  const value = e.target.value
  this.setState(()=>({
    inputValue: value
  }))
}

注意:
不能直接inputValue:e.target.value，而要先在setState()外做一份拷贝保存一下，再在setState()内使用，否则会由于异步的问题报错。

setState()的回调函数接收两个参数

函数式setState()的回调函数可以接受两个参数：prevState, props

1
2
3
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment 
 }))

第一个参数是原始state，等同于this.state，第二个参数是父组件传递的属性。

setState()的第二个参数（回调函数）

setState()接收的第一个参数是异步的，而setState()本身还可以接收第二个参数（回调函数），这个函数解决由于setState是异步的，有些事件我们需要等setState更新完才触发的问题。如:

1
2
3
4
5
6
7
this.setState(()=>{
  return {
    inputValue: value
  }
}, ()=>{
  console.log("this is a callback")
})

注意：该回调函数会在componentDidUpdate之后执行。

React.js学习