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>` } }