useState用法指南

最新推荐文章于 2024-08-01 11:01:13 发布

gtLBTNq9mr3

最新推荐文章于 2024-08-01 11:01:13 发布

阅读量930

点赞数

本文链接：https://blog.csdn.net/gtLBTNq9mr3/article/details/105190038

版权

本文详细介绍了React中的useState Hook的用法，包括函数式更新、两种更新方式的区别以及性能优化策略。在函数式更新中，通过示例展示了如何避免异步更新时的问题。文章还强调了useState与类组件中setState的不同，尤其是在处理异步更新和对象合并时。最后，讨论了如何通过useMemo和useCallback优化组件性能，避免不必要的子组件重渲染。

摘要由CSDN通过智能技术生成

useState

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

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

setState(newState);

在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。

函数式更新

如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。下面的计数器组件示例展示了 setState 的两种用法：

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