在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。
1、this.setState的两种定义方式
定义初始状态
state = { count: 0 }
(1)传递对象 this.setState({ count: this.state.count + 1}) (2)传递函数 this.setState((state, props) => ({ count: count + 1 }))
如果变更的state的值需要依赖于上一次的state的值，这种情况就需要用到函数的形式，比如以下这种情况
addCount(){ this.setState({ count: this.state.count + 1}) this.setState({ count: this.state.count + 1}) this.setState({ count: this.state.count + 1}) }
addCount(){ this.setState((state, props) => ({ count: count + 1 })) this.setState((state, props) => ({ count: count + 1 })) this.setState((state, props) => ({ count: count + 1 })) }
3、setState是同步还是异步的?
☆☆☆☆☆ 是异步的
(1) 即我们通过this.setState修改了状态之后，在它的下一行输出state的值并不会得到新的值
(2) 为什么是异步?
有两个原因，一是提高效率，每次修改state的值都会造成render的重新渲染，将多次修改state的值合并统一更新可以提高性能；二是render的更新会晚一些，如果render中有子组件，子组件的props依赖于父组件的state，props和state就不能保持一致
(3) 如何获取异步时的state值?
① 在setState的回调函数中，
this.setState({ count: this.state.count + 1}, ()=>{ console.log(this.state.count) })
componentDidUpdate(){ console.log(this.state.count) }
(1) 即我们通过this.setState修改状态之后，在它的下一行输出state是新的值
(2) 什么场景下是同步的？
① 原生js获取dom元素，并绑定事件
<button id="addBtn">点我+1</button> componentDidMount(){ const addBtn = document.getElementById(‘addBtn‘) changeBtn.addEventListener(‘click‘,()=>{ this.setState({ count: this.state.count + 1}) console.log(this.state.message) }) }
<button onClick={ e => this.addOne() }>点我+1</button>
addOne(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
console.log(this.state.count ) },0)
}
原文：https://www.cnblogs.com/vigourice/p/14705077.html