React Hooks 之 useState

useState

1. 基础用法

const [state, setState] = useState(initialState);
setState(newState);

• setState设置新值，并触发render。
• setState传入相同的值，不会触发render。和类组件的setState保持一致。

2. initialState与newState，支持值或函数

const [ count, setCount ] = useState(0)
const [ count, setCount ] = useState(() => {
    return props.count || 0
})

setCount(1)
setCount((prevCount) => {
    return prevCount + 1
})

• 函数式更新：如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState

function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setTimeout(() => {
      setCount(count + 1)
    }, 3000);
  }
  function handleClickFn() {
    setTimeout(() => {
      setCount((prevCount) => {
        return prevCount + 1
      })
    }, 3000);
  }
  return (
    <>
      Count: {count}
      <button onClick={handleClick}>+</button>
      <button onClick={handleClickFn}>+</button>
    </>
  );
}

当设置为异步更新，点击按钮延迟到3s之后去调用setCount函数，当快速点击按钮时，也就是说在3s多次去触发更新，但是只有一次生效，因为 count 的值是没有变化的。而当使用函数式更新 state 的时候，这种问题就没有了，因为它可以获取之前的 state 值，也就是代码中的 prevCount 每次都是最新的值。