代码位置：

phoenixhell\src\components\01_setState

1⃣setState

1.对象式的setState

**setState的坑：**react设置state是异步的

  add = () => {
    const { count } = this.state;

    //下面的写法console.log输出的是老的count,因为react设置状态是异步的,相当于开启了一个新线程去更新state
    // this.setState({ count: count + 1 });
    // console.log(this.state);

    //所以第二个参数的函数中给你一个回调,这个回调里面state值已经改变好了.
    this.setState({ count: count + 1 }, () => {
      console.log(this.state);
    });
  };

2.函数式的setState

顾名思义,传的不是state对象而是一个函数

  add = () => {
    //函数式state 不用从this 获取
    // const { count } = this.state;

    //具体什么情况下使用哪个参找文档
    //对象式的setState

    //下面的写法console.log输出的是老的count,因为react设置状态是异步的,相当于开启了一个新线程去更新state
    // this.setState({ count: count + 1 });
    // console.log(this.state);

    //所以第二个参数的函数中给你一个回调,这个回调里面state值已经改变好了.
    // this.setState({ count: count + 1 }, () => {
    //   console.log(this.state);
    // });

    // 函数式的setState ,传的不是state对象而是一个函数 这个函数会接受你2个参数 state 和 props ,就不用自己去this获取了
    // this.setState((state,props) => { 
    //     console.log(state,props)
    //     return {count:99}
    //  })

    //简写
    this.setState((state,props) => ({count:state.count+1}))

  };

这两个 setState函数的区别在于它们如何更新 toggleDropDown 变量的状态。

1. onClick={()=>setToggleDropDown(!toggleDropDown)}: 这个函数直接使用了 toggleDropDown 变量的当前值，然后对其取反来更新状态。这意味着每次点击时，toggleDropDown 的值都会根据当前值进行切换。但是，这种方式存在一些问题，特别是在 React 中，因为 React 可能会对多次读取的值进行优化，这可能导致意外的行为，因为这个方式并不保证读取的值是最新的。如果在点击之后立即在同一函数中读取 toggleDropDown 的值，那么可能会得到与预期不符的结果。
2. onClick={()=>setToggleDropDown((prevState)=>!prevState)}: 这个函数使用了函数形式的 setState，它会接受前一个状态作为参数，然后返回一个新的状态。这种方式确保了每次更新状态时都是基于最新的状态。这样做的好处是，无论何时点击事件被触发，React 都会保证使用最新的状态来更新组件。这在某些情况下可以避免潜在的 bug 和不一致性。

因此，第二种方式更加可靠，特别是在处理依赖于前一个状态的更新时。

<aside> 🔥 处理依赖于前一个状态的更新时候也就是说不直接使用state，而是依据state的值来更新另外一个值的时候使用函数式

</aside>