setState最常见的问题是，是异步的还是同步的？
setState在React.Component中的函数，是同步函数。但是我们调用的时候，不同的传参和不同的调用位置都会导致不同的结果。
从页面看有时候是同步的，有时候是异步的。
1)调用函数中直接调用，调用完之后立即打印，结果不变，表现是异步
this.state = {number: 0} add = () => { this.setState({ number: this.state.number + 1}, () => console.log(this.state.number) // 1 ) // console.log(this.state.number); -- 0 } // 页面显示1
后台逻辑是，事件触发-->开启批量更新模式-->执行事件方法add-->状态存入队列[{number: 1}]-->方法结束(this.state.number=0)-->关闭批量更新模式
-->更新状态(number-1)-->更新组件(render)-->componentDidUpdate-->setState.callback(number-1)
2)批量调用setState会触发批量更新，如第一个参数是对象，状态会出现覆盖；第一个参数是函数，不会被覆盖，会累计。
state = {number: 0, name: 'lyra'}
add2 = () => {
this.setState((state) => ({number: state.number + 1}));
this.setState((state) => ({name: state.name + '-good'}));
this.setState((state) => ({number: state.number + 1}));
this.setState((state) => ({name: state.name + '-clever'}));
}// 执行完结果显示{number:2, name: lyra-good-clever}
add3 = () => {
this.setState({number: this.state.number + 1});
this.setState({name: this.state.name + '-good'});
this.setState({number: this.state.number + 1});
this.setState({name: this.state.name + '-clever'});
} // 执行完结果显示{number: 1, name: lyra-clever}
后台逻辑同上，会依次存入状态队列。但是更新状态的方式是：
this.queue.pendingStates.forEach(particalState => Object.assign(this.state, particalState));
如果传入对象，存储状态的时候直接存储。
if (typeof particalState === 'object') { this.pendingStates.push(particalState); }
如果传入的是方法，会先进行处理，每个状态，都是以前一个状态为基础
if (typeof particalState === 'function') {// 传入的是(state) => {} this.setStateFuncs.push(particalState); this.setStateFuncs.forEach(callback => { const newParticalState = callback(this.component.state); this.pendingStates.push(newParticalState); Object.assign(this.component.state, newParticalState); }); this.setStateFuncs.length = 0;// 注意清空！！ }
3）如果事件函数主线程中有类似setTimout等的方法，方法回调仍然有setState,这时表现是同步的
this.state = { number: 0, name: 'lyra' } add = () => { this.setState({number: this.state.number + 1}, () => console.log('callback-3',this.state));// {number:1, name: 'lyra-clever} this.setState({name: this.state.name + '-good'}, () => console.log('callback-4',this.state)); // {number:1, name: 'lyra-clever} this.setState({number: this.state.number + 1}, () => console.log('callback-5',this.state));// {number:1, name: 'lyra-clever} this.setState({name: this.state.name + '-clever'}, () => console.log('callback-6',this.state));// {number:1, name: 'lyra-clever} console.log('1==',this.state); // {number: 0, name: 'lyra'} setTimeout(() => { console.log("==7===",this.state); // {number: 1, name: 'lyra-clever'} this.setState({ // 非批量处理，立即执行 number: this.state.number + 1, name: this.state.name + '-bravo' }, () => console.log('callback-8',this.state)) // 同步 {number: 2, name: 'lyra-clever-bravo'} console.log('==9==',this.state); // {number: 2, name: 'lyra-clever-bravo'} this.setState({ number: this.state.number + 1, name: this.state.name + '-congratulations' }, () => console.log('callback-10',this.state)) // {number: 3, name: 'lyra-clever-bravo-congratulations'} console.log('==11==',this.state); // {number: 3, name: 'lyra-clever-bravo-congratulations'} }) console.log("==2==",this.state); // {number: 0, name: 'lyra'} }
后台逻辑： 事件触发-->开启批量更新模式-->执行事件方法主线程（不包含setTimeout宏任务）-->前四个状态存入队列{number: 1}-->主线程结束-->
关闭批量更新模式-->批量更新状态(this.state.number = 1)并渲染(DidUpdate)-->进入SetTImout-->setState-->非批量更新状态立即更新状态并渲染(DidUpdate)-->callback->
-->下一个setState-->......
PS:原生JS模拟setState实现
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="root"></div> <script src="./component.js"></script> <script src='./counter.js'></script> <script src="./stateFunc.js"></script> <script> let container = document.getElementById('root'); counterIns = new Counter({name: 'Lyra'}); //实例传属性 counterIns1 = new SetFuncCounter({name: 'Lyra1'}); //实例传属性 counterIns.mount(root); // ReactDOM.render(,window.root) counterIns1.mount(root); </script> </body> </html>
component.js
const batchingStragety = { // 用于批量更新的全局状态和方法
isBatchingUpdates: false, // 默认false,表面默认直接更新
dirtyComponents: [], // 状态和页面展示不同的组件叫脏组件;应该去重一下
batchUpdates() {
this.dirtyComponents.forEach(dirtyComponent => {
dirtyComponent.updateComponent();
});
this.dirtyComponents.length = 0;
}
}
class QueueUpdate{ // 队列用于存储更新的状态，数据先入先出，有先后顺序
constructor(component) {
this.pendingStates = []; // 队列存值
this.setStateFuncs = []; // 传参是函数，存入该队列
this.component = component;
}
addState(particalState) { // 插入队列
// particalState有两种形式，function或者object;
if (typeof particalState === 'object') {
this.pendingStates.push(particalState);
}
if (typeof particalState === 'function') {// 传入的是(state) => {}
this.setStateFuncs.push(particalState);
this.setStateFuncs.forEach(callback => {
const newParticalState = callback(this.component.state);
this.pendingStates.push(newParticalState);
Object.assign(this.component.state, newParticalState);
});
this.setStateFuncs.length = 0;// 注意清空！！
}
/*
然后判断isBatchingUpdating 是否是true,
如果是true,推入dirtyComponents,
*/
if (!batchingStragety.isBatchingUpdates) { // 如果是false, 遍历所有的dirtyComponents,调用各自的updateComponent()
this.component.updateComponent();
return;
}
batchingStragety.dirtyComponents.push(this.component);
}
}
class Component {
constructor(props) {
this.props = props;
this.queue = new QueueUpdate(this); // 实例化一个队列，用于存储newState的值。
}
setState(particalState, callback) { // 传入需要更新的状态
/** this.setState(new State)->将newState存入队列 */
this.queue.addState(particalState);
// callbackcomponentDidMount前存入队列，
// 在componentDidMount后依次执行
}
updateComponent() { // 更新组件,在该方法中完成componentDidMount
this.queue.pendingStates.forEach(particalState => Object.assign(this.state, particalState));
this.queue.pendingStates.length = 0;
let oldElement = this.topElement;
let newElement = this.renderElement();
oldElement.parentNode.replaceChild(newElement, oldElement);
}
renderElement() { // 模拟ReactDOM.render(element, container)
let tempParent = document.createElement('div');
tempParent.innerHTML = this.render(); // 将模版字符串转为真实dom
this.topElement = tempParent.children[0]; // 使用属性，可以在this作用域暂存dom元素
this.topElement.component = this;
return this.topElement;
}
mount(container) {
container.appendChild(this.renderElement())
}
}
// React中事件委托给全局document
window.trigger = function(event, method) {
const { component } = event.target;
// React中每次触发事件时开启批量更新模式，都默认将isBatchingUpdates置为true,事件调用完成置为false。
// 事件触发的核心逻辑代码是方法调用，isBatchingUpdates的状态变化可以看作一个事务，包裹方法
const anyMethod = component[method].bind(component);// 所有组件用这个方法，各个组件方法名可能相同，所以需要在实例上调用方法
transaction.perform(anyMethod);
}
class Transcation{ // 事务，将任何方法(anyMethod)用wrapper包裹，然后通过Transcation的perform()方法执行anyMethod
// 先执行所有wrapper的initialize方法，再执行anyMethod,最后执行所有wrapper的close方法。
constructor(wrappers) {
this.wrappers = wrappers;
}
perform(anyMethod) {
this.wrappers.forEach(wrapper => {wrapper.initialize()});
anyMethod();
this.wrappers.forEach(wrapper => {wrapper.close()});
}
}
const transaction = new Transcation([{ // 传入wrappers,是个数组！！
initialize() {// 开启批量更新
batchingStragety.isBatchingUpdates = true;
},
close() {
batchingStragety.isBatchingUpdates = false;
// 执行完后要把状态置为false, 调用更新函数
batchingStragety.batchUpdates();
}
}]);
counter.js
class Counter extends Component{ constructor(props) { super(props); this.state = { number: 0, name: 'lyra' } } add() { this.setState({number: this.state.number + 1}); this.setState({name: this.state.name + '-good'}); this.setState({number: this.state.number + 1}); this.setState({name: this.state.name + '-clever'}); console.log('1==',this.state); // {number: 0, name: 'lyra'} setTimeout(() => { console.log("==3===",this.state); // {number: 1, name: 'lyra-clever'} this.setState({ // 非批量处理，立即执行 number: this.state.number + 1, name: this.state.name + '-bravo' }) // 同步 console.log('==4==',this.state); // {number: 2, name: 'lyra-clever-bravo'} this.setState({ number: this.state.number + 1, name: this.state.name + '-congratulations' }) console.log('==5==',this.state); // {number: 3, name: 'lyra-clever-bravo-congratulations'} }) console.log("==2==",this.state); // {number: 0, name: 'lyra'} } render() {// 模拟JSX中虚拟DOM js中不能写html,只能写字符串模版,模版字符串只有一个顶级标签 return `<button id="counter" onclick="trigger(event, 'add')"> ${this.state.name} --------------<br/> ${this.state.number} </button>` } }