类组件
为什么拿类组件先说，怎么说呢，更好理解？还有前几年比较流行的一些常见面试题

React 中的 setState 什么时候是同步的，什么时候是异步的

React setState 怎么获取最新的 state

以下代码的输出值是什么，页面展示是怎么变化的

test = () => {
// s1 = 1
const { s1 } = this.state;
this.setState({ s1: s1 + 1});
this.setState({ s1: s1 + 1});
this.setState({ s1: s1 + 1});
console.log(s1)
};

render() {
return (

React 合成事件
在 React 组件触发的事件会被冒泡到 document(在 react v17 中是 react 挂载的节点，例如 document.querySelector (‘#app’))，然后 React 按照触发路径上收集事件回调，分发事件。

这里是不是突发奇想，如果禁用了，在触发事件的节点，通过原生事件禁止事件冒泡，是不是 React 事件就没法触发了？确实是这样，没法冒泡了，React 都没法收集事件和分发事件了，注意这个冒泡不是 React 合成事件的冒泡。
发散一下还能想到的另外一个点，React ，就算是在合成捕获阶段触发的事件，依旧在原生冒泡事件触发之后
reactEventCallback = () => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
console.log(‘after setState s1:’, this.state.s1);
// 这里依旧输出 1， 页面展示 2，页面仅重新渲染一次
};

onClick={this.reactEventCallback}
onClickCapture={this.reactEventCallbackCapture}

React Event

timerCallback = () => {
setTimeout(() => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log(‘after setState s1:’, this.state.s1);
// 输出 2 页面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};
异步函数后调触发 setState
异步函数回调执行 setState 是同步的，可以在执行 setState 之后直接获取，最新的值，例如下面代码

asyncCallback = () => {
Promise.resolve().then(() => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log(‘after setState s1:’, this.state.s1);
// 输出 2 页面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};