一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

useState 允许你在React函数组件中添加state的Hook, 在class类组件中我们通过在构造函数constructor中定义state，并为其初始化值。然而函数式组件我们以前也叫做无状态组件就是没有state,无法使用state。hooks中给我们提供了可以和类组件功能一样的状态useState。

使用

可以通过useState定义一个状态，可以是基础类型也可以是引用类型。

语法类型定义

useState函数接收一个初始化值的参数可以为空，可以是一个普通值也可以是一个无参函数，返回一个值。函数返回一个数组，数组第一个值就是状态值，第二个是一个修改状态值的函数，这个函数只有一个参数，是状态的新值或者是一个修改上一次状态值为新值的函数。

// 语法类型定义
type SetStateAction<S> = S | ((prevState: S) => S);
type Dispatch<A> = (value: A) => void;

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

使用例子

开始时给count赋一个0的初始值，通过点击事件每次通过setCount方法给count 加 1。

const Demo: React.FC = (props) => {
  // 通过ES6解构useState返回的数组值。
  const [count, setCount] = useState<number>(0);
  return (
    <React.Fragment>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>点击</button>
      // 建议修改状态值时使用函数的形式。
      <button onClick={() => setCount((prevCunt) => prevCunt + 1)}>点击</button>
    </React.Fragment>
  )
}

注意事项

在使用时useState要放到函数最外层，不要嵌套在if等语句中，因为useState会根据加载顺序维护state值，加上if语句等会改变加载顺序导致state错误。

useState和setState一样的是异步的但是它没有setState一样的可以接收一个回调方法获取最新的状态是，useState得结合useEffect使用。

React hooks之useState

使用

语法类型定义

使用例子

注意事项