react hooks 使用小技巧—useState传值函数

前言

当使用 setState 更新组件状态时，可以选择传递一个新的值或者传递一个函数。

无论是传递新值还是传递函数，setState都会触发组件重新渲染。重新渲染会更新组件的显示。

1. 传递一个新值：直接将新值赋给状态。适用于简单的状态更新，不需要基于之前的状态进行计算。
2. 传递一个函数：将之前的状态作为参数传递给函数，该函数进行计算并返回一个新的状态值。适用于需要基于之前的状态进行复杂计算或逻辑操作的情况。

示例代码

1、传入一个值，在add函数内，执行三次setNum后，预期num应是 3，但是执行后仍然是1,

let [num, setNum] = useState(0)
const add()=>{
  setNum(num + 1);
  setNum(num + 1);
  setNum(num + 1);
  console.log(num) // 3
}

num状态在当前函数组件生命周期内，永远是0，无论调用多少次 setState 设置新值也没有。

因为react 内部 执行批量更新的优化策略，可以简单理解为，num变量在函数内重新声明。

let [num, setNum] = useState(0)
const add()=>{
  let = num = 0
  setNum(num + 1);
  setNum(num + 1);
  setNum(num + 1);
  console.log(num) // 1
}

对同一次渲染来说 num 是一个固定的值。在多次执行setState情况下React 会并并批量处理，以提高性能。也就是说，不会立即进行多次重新渲染，而是在所有更新应用后进行一次重新渲染。

2、传入一个函数，setNum中使用函数作为参数

let [num, setNum] = useState(0)
const add()=>{
    setNum((num)=>num + 1);
    setNum((num)=>num + 1);
    setNum((num)=>num + 1); 
  console.log(num) // 3
}

总结

通过传递函数的方式，可以获得最新的之前状态，并避免并发更新导致的问题。这种方式允许确保在处理并发更新时的正确性。