React中setState方法详解

一、为什么要使用 setState 方法，如何用？

在 React 中，组件分为有状态组件和无状态组件，有状态组件就是能够定义 state 的组件，比如类组件，无状态组件反之，比如函数组件。state 就是用来描述事物在某时刻的数据，可以被改变，改变后与视图相映射，用来保存数据和响应视图。

虽然状态可以改变，但不是响应式的，动态改变并没有与视图响应，想要改变并响应视图则需要 setState 修改并更新视图。

使用方法：this.setState({ 修改的数据 })

setState并不会影响其他没有进行修改的数据，此方法是从Component中继承过来的

import React, { Component } from 'react'
import ReactDOM from 'react-dom'export default class App extends Component {// 定义 statestate = {count: 0,list: [1, 2, 3],person: {name: 'jack',age: 18,},}changeCount = () => {// this.state.count++// 上面的写法并不能更新视图，想要双向更新只能利用 setState 方法this.setState({count: this.state.count,})}changeList = () => {// 同理this.state.list.push('Hello React')this.setState({list: this.state.list,})}changePerson = () => {this.state.person.name = 'ifer'this.state.person.age = 19this.setState({person: this.state.person,})}render() {return (<div><h3>count输出</h3><p>{this.state.count}</p><button onClick={this.changeCount}>click</button><hr /><h3>list输出</h3><ul>{this.state.list.map((item, index) => (<li key={index}>{item}</li>))}</ul><button onClick={this.changeList}>click</button><hr /><h3>person输出</h3><p>{this.state.person.name} {this.state.person.age}</p><button onClick={this.changePerson}>click</button></div>)}
}ReactDOM.render(<App />, document.querySelector('#root'))

状态有个特性是不可变性，就是不可以直接修改原数据，而是直接产生一个新的数据，通过 setState 方法把新的数据覆盖原有的数据，从而进行响应视图，这么做有利于性能优化和 SCU。

二、setState 使用触发的钩子函数

render() ———— 每次组件渲染都会触发

注意：render()中不要调用 setState 方法，会发生死循环。
componentDidUpdate() ———— 组件更新(完成DOM渲染)后触发

三、setState 是同步代码

虽说 setState 很多人说是异步的，但是它本身的执行过程和代码是同步的，只是它在合并数据与钩子函数的调用顺序在更新后无法拿到值，形成了异步，我们可以通过第二个参数拿到更新后的结果。

changeText() {this.setState({age: 20}, () => {console.log(this.state.age); // 文本已经被改变,得到的是20});
}

也可以通过钩子函数获取修改后的值

componentDidUpdate() {console.log(this.state.age);
}

什么时候“同步”，什么时候“异步”？

一般情况下(常见在生命周期或者是合成事件处理函数中)，通过 setState() 方法来更新状态，表现是异步的。

state = { count: 1 }this.setState({count: this.state.count + 1,
})console.log(this.state.count) // 1
// 通过 DOM 不能立马获取更新后的值

当执行到 setState 时，React 出于性能考虑，并不会立马执行修改 state ，而是先把当前更新对象以及后续的合并到一起，放在一个更新队列里进行合并操作，这期间并不会影响后续代码执行。且多次调用会合并，以最后一次渲染为主，以此来进行性能优化。

this.setState({count: this.state.count + 1,
})
this.setState({count: this.state.count + 2,
})
this.setState({count: this.state.count + 3,
})// 最后实现更新的是最后一个代码，前面的都会被覆盖

如果想要实现一个一个实现，可以利用 setState 的第二个参数，第二个参数是一个回调函数，在更新完之后会执行

// setState 有两个参数，第二个参数可以立即拿到更新后的值
this.setState({}, () => {console.log('这个回调函数会在状态更新后立即执行')
})

this.setState(() => ({count: this.state.count + 1
}))
// prevStart 是最近一次的更新的数据
this.setState((prevStart) => ({count: prevStart.count + 2
}))
this.setState((prevStart) => ({count: prevStart.count + 3
}))

上面确实可以累加，把累加的结果渲染到页面上，但依然不能改变异步更新的表现形式

如果在 setTimeout/setInterval 或者原生事件(比如点击事件等)的回调中，或者是在 setState 前面遇到 await 后续表现都为同步的。

利用定时器

import React, { Component } from 'react'export default class App extends Component {state = {count: 1,}componentDidMount() {setTimeout(() => {this.setState({count: this.state.count + 1,})console.log(this.state.count) // 2})}render() {return <div>{this.state.count}</div>}
}

原生事件

import React, { Component, createRef } from 'react'export default class App extends Component {state = {count: 1,}countRef = createRef()componentDidMount() {this.countRef.current.onclick = () => {this.setState({count: this.state.count + 1,})console.log(this.state.count) // 2}}render() {return (<div><h2>{this.state.count}</h2><button ref={this.countRef}>点击</button></div>)}
}

async写法

import React, { Component } from 'react'export default class App extends Component {state = {count: 1,}async componentDidMount() {await this.setState({count: this.state.count + 1,})console.log(this.state.count) // 2}render() {return (<div><h2>{this.state.count}</h2></div>)}
}