【React源码笔记】setState原理解析

Component.prototype.setState = function(partialState, callback) {  ...  this.updater.enqueueSetState(this, partialState, callback, 'setState');};

There is no guarantee that this.state will be immediately updated, so accessing this.state after calling this method may return the old value.

const classComponentUpdater = {  isMounted,  // inst其实就是组件实例对象的this  enqueueSetState(inst, payload, callback) {  //  获取当前实例上的fiber    const fiber = getInstance(inst);    const currentTime = requestCurrentTime();    const expirationTime = computeExpirationForFiber(currentTime, fiber);    const update = createUpdate(expirationTime);    update.payload = payload;    if (callback !== undefined && callback !== null) {      if (__DEV__) {        warnOnInvalidCallback(callback, 'setState');      }      update.callback = callback;    }    flushPassiveEffects();    //    把更新放到队列中去    enqueueUpdate(fiber, update);    //     进入异步渲染的核心：React Scheduler    scheduleWork(fiber, expirationTime);  },  ...}

function requestWork(root: FiberRoot, expirationTime: ExpirationTime) {  //  根节点添加到调度任务中  addRootToSchedule(root, expirationTime);  if (isRendering) {    return;  }  //  isBatchingUpdates默认为flase，但是react事件触发后会对它重新赋值为true  if (isBatchingUpdates) {  //  isUnbatchingUpdates默认也为false    if (isUnbatchingUpdates) {      nextFlushedRoot = root;      nextFlushedExpirationTime = Sync;      performWorkOnRoot(root, Sync, false);    }    return;  }  if (expirationTime === Sync) {  //  若是isBatchingUpdates为false，则对setState进行diff渲染更新    performSyncWork();  } else {    scheduleCallbackWithExpirationTime(root, expirationTime);  }}

this.state = {  name:'rosie',  age:'21',};handleClick(){  this.setState({    age: '18'  })  console.log(this.state.age) // 输出21}

function interactiveUpdates<A, B, R>(fn: (A, B) => R, a: A, b: B): R {  if (isBatchingInteractiveUpdates) {    return fn(a, b);  }  ...  const previousIsBatchingInteractiveUpdates = isBatchingInteractiveUpdates;   //  将previousIsBatchingUpdates赋值为false  const previousIsBatchingUpdates = isBatchingUpdates;  isBatchingInteractiveUpdates = true;  isBatchingUpdates = true;  //  关键代码块  try {    return fn(a, b);  } finally {    isBatchingInteractiveUpdates = previousIsBatchingInteractiveUpdates;    //  isBatchingUpdates变为false    isBatchingUpdates = previousIsBatchingUpdates;    if (!isBatchingUpdates && !isRendering) {      performSyncWork();    }  }}

if (isBatchingUpdates) {  //  isUnbatchingUpdates也为false  if (isUnbatchingUpdates) {    nextFlushedRoot = root;    nextFlushedExpirationTime = Sync;    performWorkOnRoot(root, Sync, false);  }  return;}

this.state = {  name:'rosie',  age:'21',};componentDidMount() {  this.setState({    age: '18'   })  console.log(this.state.age) // 21}shouldComponentUpdate(){  console.log("shouldComponentUpdate",this.state.age); // 21  return true;}render(){  console.log("render",this.state.age); // 18  return{    <div></div>  }}getSnapshotBeforeUpdate(){  console.log("getSnapshotBeforeUpdate",this.state.age); // 18  return true;}componentDidUpdate(){  console.log("componentDidUpdate",this.state.age);// 18}

shouldComponentUpdate // 旧值render // 更新后的值getSnapshotBeforeUpdate // 更新后的值componentDidUpdate // 更新后的值

this.state = {  name:'rosie',  age:'21',};componentDidMount() {  setTimeout(e => {    this.setState({      age: '18'     })    console.log(this.state.age) // 18  }, 0) }

function requestWork(root: FiberRoot, expirationTime: ExpirationTime) {  ...  if (isBatchingUpdates) {  ...    return;  }  if (expirationTime === Sync) {    performSyncWork();  } else {    scheduleCallbackWithExpirationTime(root, expirationTime);  }}

this.state = {  name:'rosie',  age:'21',};handleClick = () => {  this.setState({    age: '18'  })  console.log(this.state.age) // 18}componentDidMount() {  document.body.addEventListener('click', this.handleClick)}

this.state = {  count:0,};add = () => {  for ( let i = 0; i < 10000; i++ ) {    this.setState( { count: this.state.count + 1 } );  }}

add = ()=>{  this.setState({    count: this.state.count + 1   });  this.setState({    count: this.state.count + 1   });}

add = () => {  this.setState((preCount)=>({    count: preCount.count + 1   }));  this.setState((preCount)=>({    count: preCount.count + 1   }));}// 输出2

add = () => {  setTimeout( _=>{    this.setState({      count: this.state.count + 1     });  },0)  setTimeout( _=>{    this.setState({      count: this.state.count + 1     });  },0)}// 输出2

  enqueueSetState(inst, payload, callback) {    //    获取当前实例上的fiber    const fiber = getInstance(inst);    //    计算当前时间    const currentTime = requestCurrentTime();    //    计算当前fiber的到期时间，为计算优先级作准备    const expirationTime = computeExpirationForFiber(currentTime, fiber);    //    创建更新一个update    const update = createUpdate(expirationTime);    //    payload是要更新的对象    update.payload = payload;    //    callback回调函数    if (callback !== undefined && callback !== null) {      if (__DEV__) {        warnOnInvalidCallback(callback, 'setState');      }      update.callback = callback;    }    flushPassiveEffects();    //    重点：把更新放到队列中去    enqueueUpdate(fiber, update);    //     进入异步渲染的核心：React Scheduler    scheduleWork(fiber, expirationTime);  },

function getStateFromUpdate<State>(  workInProgress: Fiber,  queue: UpdateQueue<State>,  update: Update<State>,  prevState: State,  nextProps: any,  instance: any,): any {  switch (update.tag) {    ...    case UpdateState: {      const payload = update.payload;      let partialState;      //  当payload为函数类型时      if (typeof payload === 'function') {          ...           partialState = payload.call(instance, prevState, nextProps);           ...      }      ...      // 重点：通过Object.assign生成一个全新的state，和未更新的部分state进行合并      return Object.assign({}, prevState, partialState);    }   ...  }  return prevState;}

Object.assign({}, {count:0}, {count:1});Object.assign({}, {count:0}, {count:2});

this.state.comment = 'Hello world';

this.setState({  comment: 'Hello world'})

this.setState(preState=> ({  obj: Object.assign({}, preState.obj, {name: 'Tom'})}))this.setState(preState=> ({  obj: {...preState.obj,name:'Tom'}}))

this.setState((perState)=>{  return {arr:perState.arr.concat(1)}})this.setState((perState)=>{  return {arr:[...perState.arr,1]}})this.setState((perState)=>{  return {arr:perState.arr.slice(1,4)}})