State的注意事项

State的注意事项

函数组件中state

// setState方法更新状态是同步的，但是表现为延迟更新状态(注意：非异步更新状态)
// 调用setState时，将所有更新状态对象放在一个react的更新任务队列中暂存起来（没有立即更新），
// 如果多次调用 setState更新状态，状态会进行合并，后面覆盖前面
// 等到所有的操作都执行完毕，React会拿到最终的状态，然后触发组件更新
//优势：多次调用setState()，只会触发一次重新渲染，提升性能
state = {
    count: 0,
}
addCount = () => {
    this.setState({
        count: this.state.count + 1,
    })
    this.setState({
        count: this.state.count + 2,
    })
    this.setState({
        count: this.state.count + 3,
    })
    console.log('count:',this.state.count)		// count:0，只执行了一次
}

render() {
    console.log('render')		//render，只执行一次
    return (
        <>
        <div>{this.state.count}</div>	//3
        <br />
        <button onClick={this.addCount}>按钮</button>
		</>
	)
}
// 如果后面的状态需要依赖前一项状态的值，可以使用箭头函数的形式
// React内部会拿到第一次回调函数的结果，然后把这个最新的状态结果作为参数，传递给下次调用的回调函数
//这样，下一次调用就可以拿到上一次调用的结果（也是上一次更新后的状态值）
this.setState((previousState) => {
    return { count: previousState.count + 1 }
})