标签：date 处理程序 event sync work 详细 直接 val this
首先了解一个造成不能立即生效的原因，setState异步的原因是因为react的监听事件为合成事件，state执行过程中会经历一个生命周期函数，执行多个setState会被合并，提升性能，下面几种方式可以避免我们的问题：
setState合适同步何时异步？
由React控制的事件处理程序，以及生命周期函数调用setState不会同步更新state 。
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。
this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); // 执行后结果相当于 const count = this.state.count; this.setState({ count: count + 1 }); this.setState({ count: count + 1 }); this.setState({ count: count + 1 });
1、传递函数()=>{return state}，react提供的参数props保证每次都拿到最新的
// 第一个函数调用更新state，第二个函数是更新完之后的回调。 this.setState((prevState, props) => { return { age: prevState.count + 1, };
// 获取state console.log(this.state); // 1
});
2、设置setTimeout、setInterval，和事件玄幻有关系
setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。
setTimeout(() => { this.setState(prevState => { return { age: prevState.count + 1, }; }); // 获取state console.log(this.state); // 1 }, 0);
3、设置js原生监听事件addEventListener
requestWork ,在requestWork里由于 expirationTime === Sync 的原因，直接走了 performSyncWork 去更新，并不像合成事件或钩子函数中被return，所以当你在原生事件中setState后，能同步拿到更新后的state值。handleClick3 = () => { this.setState({ count: this.state.count + 1 }); // 某些条件可能获取不到最新的值 console.log(this.state); }; componentDidMount() { document.body.addEventListener(‘btn4‘, this.handleClick3, false); }
class Demo extends React.Component { state = { count: 0, }; handleClick0 = () => { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); // 某些条件可能获取不到最新的值 console.log(this.state); }; // 1、把对象改为回调函数 handleClick1 = () => { this.setState(prevState => { return { age: prevState.count + 1, }; }); // 获取state console.log(this.state); // 1 }; // 2、设置setTimeout,setInterval handleClick2 = () => { setTimeout(() => { this.setState(prevState => { return { age: prevState.count + 1, }; }); // 获取state console.log(this.state); // 1 }, 0); }; // 3、设置原生监听事件，不同调用react的一些生命周期，直接触发onclick handleClick3 = () => { this.setState({ count: this.state.count + 1 }); // 某些条件可能获取不到最新的值 console.log(this.state); }; componentDidMount() { document.body.addEventListener(‘btn4‘, this.handleClick3, false); } render() { return ( <div> <button onClick={() => this.handleClick0()}>按钮0</button> <button onClick={() => this.handleClick1()}>按钮1</button> <button onClick={() => this.handleClick1()}>按钮2</button> <button id="btn4" onClick={() => this.handleClick1()}> 按钮3 </button> </div> ); } }
标签：date 处理程序 event sync work 详细 直接 val this
原文地址：https://www.cnblogs.com/cxyqts/p/14427812.html
