react基础之--setState的三种写法

修改state的值

 不能直接去修改 state 的值，否则数据无法驱动关联，需要使用 setState，setState 方法接收一个参数，参数为一个对象，类似于小程序原生的 setData。

//  错误方式
this.state.name = 'ks'

//  正确方式
this.setState({ name: 'ks' })

存在props值的修改state的值  因为更新的 props 和状态是异步的。这里，我们根据这些 props 更新状态。

// 错误方式
this.setState({
  total: this.state.total + this.props.count,
})

// 正确方式
this.setState((state, props) => {
  return {total: state.total + props.count}
})

setState 还可以接收第二个参数，第二个参数为一个回调函数

this.setState(
  {
    name: 'ks',
  },
  () => {
    console.log('state值修改成功，现在的name值为' + this.state.name)
  }
)

为啥不能直接修改 state，要 setState 一下呢？setState 做的事情不仅仅只是修改了 this.state 的值，另外最重要的是它会触发 React 的更新机制，会进行 diff ，然后将 patch 部分更新到真实 dom 里。