React原理解密

1. setState() 的说明

1.1 更新数据

• setState() 是异步更新数据的
• 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()
• 可以多次调用 setState() ，只会触发一次重新渲染

this.state = { count: 1 }
this.setState({
	count: this.state.count + 1
})
console.log(this.state.count) // 1

1.2 推荐语法

• 推荐：使用 setState((state, props) => {}) 语法
• 参数state：表示最新的state
• 参数props：表示最新的props

this.setState((state, props) => {
   
return {
   
	count: state.count + 1
}
})
console.log(this.state.count) // 1

1.3 第二个参数

• 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
• 语法： setState(updater[, callback])

this.setState(
	(state, props) => {
   },
	() => {
   console.log('这个回调函数会在状态更新后立即执行')}
)

this.setState(
	(state, props) => {
   },
	() => {
   
		document.title = '更新state后的标题：' + this.state.count
	}