useState-组件的更新过程

更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化：

• 组件第一次渲染：
  1. 执行该函数中的代码逻辑
  2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
  3. 渲染组件，此时，获取到的状态 count 值为： 0
• 状态改变，该组件会重新渲染，再次调用useState(0)，获取最新的值
• 结论：

  useState 的初始值(参数)只会在组件第一次渲染时生效

• 代码如下：

• const [count, setCount] = useState(()=>{
    console.log('useState...') // 这句只会输出一次
    return 0
  })

  useState-最佳实践

• 如何为函数组件提供多个状态？

• ​ 两种方案
• 方案1：useState({状态1， 状态2.....})
• 方案2： useState(状态1) useState(状态2)（推荐方案2）

使用场景

格式2：传入回调

1. 初始状态需要经过一些计算得到。 useState(()=>{这里有一些计算， return 结果}))

setXXX的参数可以是回调

状态需要迭代累计。 setXXXXX((上一次的值) => { return 新值 })