React 中最重要的 setState

setState 的特点

• 不可变值
• 可能是异步更新
• 可能会被合并

setState 为何使用不可变值？

React 中最重要的概念 setState 和 不可变值

不可变值-变量

例子

// 不要直接修改 state，使用不可变数据
// this.state.count++ // 错误
this.setState({
  count: this.state.count + 1,
});

不可变值-数组

例子

// 不可变值（函数式编程，纯函数） - 数组
const list5Copy = this.state.list5.slice();
list5Copy.splice(2, 0, 'a'); // 中间插入/删除
this.setState({
  list1: this.state.list1.concat(100), // 追加
  list2: [...this.state.list2, 100], // 追加
  list3: this.state.list3.slice(0, 3), // 截取
  list4: this.state.list4.filter((item) => item > 100), // 帅选
  list5: list5Copy, //其他操作
});
// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值

不可变值-对象

例子

// 不可变值 - 对象
this.setState({
  obj1: Object.assign({}, this.state.obj1, { a: 100 }),
  obj2: { ...this.state.obj2, a: 100 },
});
// 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值

setState 是同步还是异步 ？

setState 可以异步或同步

例子

// setState 可能是异步更新（有可能是同步更新）
this.setState(
  {
    count: this.state.count + 1,
  },
  () => {
    // 类似 Vue $nextTick
    console.log('count by callback', this.state.count); // 回调函数拿到最新值
  },
);
console.log('count', this.state.count); // 异步的，拿不到最新值

setTimeout 中 setState 是同步的

例子

// setTimeout 中 setState 是同步的
setTimeout(() => {
  this.setState({
    count: this.state.count + 1,
  });
  console.log('count in setTimeout', this.state.count);
});

自己定义的 DOM 事件，setState 是同步的

例子

// 自己定义的 DOM 事件，setState 是同步的
bodyClickHandler = () => {
  this.setState({
    count: this.state.count + 1
  })
  console.log('count in body event', this.state.count)
}

componentDidMount() {
  // 自己定义的 DOM 事件，setState 是同步的，在 componentDidMount 中
  document.body.addEventListener('click', this.bodyClickHandler)
}

componentWillUnmount() {
  // 及时销毁自定义 dom 事件
  document.body.removeEventListener('click', this.bodyClickHandler)
  // clearTimeout
}

setState 何时会合并 state ？

state 异步更新的话，更新前会被合并

传入对象，会被合并

例子

// 传入对象，会被合并（类似 Object.assign({count:1},{count:1})）。执行结果只一次 +1
this.setState({
  count: this.state.count + 1,
});
this.setState({
  count: this.state.count + 1,
});
this.setState({
  count: this.state.count + 1,
});

传入函数，不会被合并

例子

// 传入函数，不会被合并。执行结果是 +3
this.setState((prevState, props) => {
  return {
    count: prevState.count + 1,
  };
});
this.setState((prevState, props) => {
  return {
    count: prevState.count + 1,
  };
});
this.setState((prevState, props) => {
  return {
    count: prevState.count + 1,
  };
});