React setState 的核心原理 这么简单啊(新年快乐!)

112 阅读1分钟

几行代码就能掌握核心原理

let obj = {
  a: 1,
  b: 2,
};

const setState = (isSync, data) => {
  if(isSync){
    setTimeout(() => {
      obj = {
        ...obj,
        ...data,
      };
    }, 0);
  }else{
    obj = {
      ...obj,
      ...data,
    };
  }
};

const test01 = () => {
  setState(true, { a: 3 });
  console.log(obj); // { a: 1, b: 2 }
  setState(true, { b: 2 });
  console.log(obj); // { a: 1, b: 2 }
};

const test02 = () => {
  setTimeout(() => {
    setState(false, { a: 6 });
    console.log(obj); // { a: 6, b: 2 }
    setState(false, { b: 7 });
    console.log(obj); // { a: 6, b: 7 }
  }, 1000);
};
test01();
test02();