setState详解

setState

• setState 是设置在 Component 原型上的方法,所有继承自Component的组件都可以调用该方法
  Component.prototype.setState = function(partialState, callback) {....}
• 开发中我们并不能直接通过修改state的值来让界面发生更新, 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化,我们必须通过setState来告知React数据已经发生了变化

两种写法

对象式写法

setState(stateChange, [callBack]) ----- 对象式的 setState
1.stateChange为状态改变对象
2.callback 是可选的回调函数,它在状态更新完毕、界面也更新后(render 调用后)才被调用,

this.setState({count:count+1},()=>{
  console.log(this.setState.count);
})

函数式写法

setState(updater, [callBack])
1.updater 为返回stateChange 对象的函数
2.updater 可以接受 state 和 props
3.callback 是可选的回调函数,它在状态更新、界面也更新后(render调用后)才被调用

this.setState((state,props)=>{
  return {count:state.count+1}
},()=>{
  console.log(this.setState.count);
})

两种方式的使用原则:

• 如果新状态不依赖于原状态,使用对象式
• 如果新状态依赖于原状态,使用函数式
• 如果需要在 setState() 执行后获取最新的状态数据,要在第二个 callback 函数中读取
• 对象式的 setState 是函数式 setState 的简写方式(语法糖)

数据的合并

• 通常 state 中保存的不止一个状态,而在我们使用setState 更新状态的时候,一般只更新一个或者部分几个,而不是全部更新,那么通过 setState 更新的最新状态会把state 中所有的状态给替换掉吗?

• 不会,因为 setState 中源码里使用了 Object.assign({},prevState,partialState)将之前的状态和新的状态做了一个合并,这个函数将所有可枚举属性的值从一个或多个源对象复制到目标对象,如果有重复的属性,会使用后面的覆盖前面的属性值

状态是集合的更新

• 当我们在 state 中保存的状态是集合类型,比如数组时, 在进行状态更新时,需要生成一个新的数组进行赋值,而不是直接在原数组上进行操作,比如增删改

 constructor(props) {
    super(props);
    this.state = {
      friends: [
        { name: "lilei", age: 20 },
        { name: "lily", age: 25 },
        { name: "lucy", age: 22 }
      ]
    }
  }
  insertData() {
    // 在开发中不要这样来做, 这样做,如果实现了shouldComponentUpdate,在方法里进行浅比较的话,认为两者是一样的,因为浅比较是比较两者的内存地址,
    // const newData = {name: "tom", age: 30}
    // this.state.friends.push(newData);
    // this.setState({
    //   friends: this.state.friends
    // });

    // 推荐做法
    const newFriends = [...this.state.friends];
    newFriends.push({ name: "tom", age: 30 });
    this.setState({
      friends: newFriends
    })
  }
  // 修改集合中某个对象的数据,也是要重新生成一个集合
  incrementAge(index) {
    const newFriends = [...this.state.friends];
    newFriends[index].age += 1;
    this.setState({
      friends: newFriends
    })
  }

setState 的更新

• 有时候 setState 是异步更新的,有时候是同步更新的

setState的同步

• 在 setTimeout 中,setState 是同步的

function changeText(){
  setTimeout(() => {
    this.setState({
      message:"你好啊,王小波"
    })
    console.log(this.state.message);// 你好啊,王小波
  }, 0);
}

• 在原生 DOM 事件中,setState 是同步的

componentDidMount(){
  const btnEl = document.getElementById("btn");
  btnEl.addEventListener('click',()=>{
    this.setState({
      message:"你好啊,王小波"
    });
    console.log(this.state.message);// 你好啊,王小波
  })
}

setState的异步

• 在组件的生命周期或 React 的合成事件中,setState 是异步的

changeText(){
    // message 的数据之前设置的是 "你好啊,李银河"
    this.setState({
      message:"你好啊,王小波"
    })
    console.log(this.state.message);// 你好啊,李银河
}

如果获取异步的结果

• 在 setState 的第二个回调函数中获取

changeText(){
    // message 的数据之前设置的是 "你好啊,李银河"
    this.setState({
      message:"你好啊,王小波"
    }, ()=>{
      console.log(this.state.message);// 你好啊,王小波
    })
    console.log(this.state.message);// 你好啊,李银河
}

• 在 componentDidUpdate函数中获取

setState 同步或异步的源码分析

• 通过查看源码我们看到 setState 是设置在 Component 上的方法

• 然后调用 this.updater.enqueueSetState(this, partialState, callback, 'setState') 这里的updater是在构造器中传过来的

• 上面传入的 update 其实是 react-reconciler 中 ReactFiberClassComponent 中的 classComponentUpdater

const classComponentUpdater = {
  isMounted,
  enqueueSetState(inst, payload, callback) {
    const fiber = getInstance(inst);
    const currentTime = requestCurrentTimeForUpdate();
    const suspenseConfig = requestCurrentSuspenseConfig();
    const expirationTime = computeExpirationForFiber(
      currentTime,
      fiber,
      suspenseConfig,
    );

    const update = createUpdate(expirationTime, suspenseConfig);
    update.payload = payload;
    if (callback !== undefined && callback !== null) {
      if (__DEV__) {
        warnOnInvalidCallback(callback, 'setState');
      }
      update.callback = callback;
    }
    enqueueUpdate(fiber, update);
    scheduleWork(fiber, expirationTime);
  },
  ....
};

• 在获取expirationTime的函数computeExpirationForFiber中可以看到设置的执行的优先级, 如果优先级设置的是 sync,那么就是同步执行的

export function computeExpirationForFiber(
  currentTime: ExpirationTime,
  fiber: Fiber,
  suspenseConfig: null | SuspenseConfig,
): ExpirationTime {
  const mode = fiber.mode;
  if ((mode & BlockingMode) === NoMode) {
    return Sync;
  }

  const priorityLevel = getCurrentPriorityLevel();
  if ((mode & ConcurrentMode) === NoMode) {
    return priorityLevel === ImmediatePriority ? Sync : Batched;
  }

  if ((executionContext & RenderContext) !== NoContext) {
    // Use whatever time we're already rendering
    // TODO: Should there be a way to opt out, like with `runWithPriority`?
    return renderExpirationTime;
  }

  let expirationTime;
  if (suspenseConfig !== null) {
    // Compute an expiration time based on the Suspense timeout.
    expirationTime = computeSuspenseExpiration(
      currentTime,
      suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION,
    );
  } else {
    // Compute an expiration time based on the Scheduler priority.
    switch (priorityLevel) {
      case ImmediatePriority:
        expirationTime = Sync;
        break;
      case UserBlockingPriority:
        // TODO: Rename this to computeUserBlockingExpiration
        expirationTime = computeInteractiveExpiration(currentTime);
        break;
      case NormalPriority:
      case LowPriority: // TODO: Handle LowPriority
        // TODO: Rename this to... something better.
        expirationTime = computeAsyncExpiration(currentTime);
        break;
      case IdlePriority:
        expirationTime = Idle;
        break;
      default:
        invariant(false, 'Expected a valid priority level');
    }
  }