useState Hook

title: useState Hook id: 66f7bc4d6d4d4916e078268bdb767513 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

useState Hook

函数式组件的内部数据，类似类组件的 state。

用法

useState 方法返回一个数组：

const [state, setState] = useState(初始值 或 方法)

入参：

• 初始值，将直接作为生成 state 的初始值，不传的话则会 undefined。

• 方法，方法自动执行，返回值将直接作为生成 state 的初始值。

返回数组：

• state：第一项是变量名，默认值为调用方法时的参数。

• setState：第二项是一个方法，可以使用该方法对变量更新，用法：

  • 直接传入新的值。

  • 传入回调方法，setState 自动为方法传入此变量旧的值，回调方法的返回值将被设置为新值。

注意

useState 可多次使用，来声明多个 state。oldNameBool

可在执行 setState 时，再执行其他 state 的设置方法。

示例

import React from 'react';

export default function Home() {
  // 用法一，入参为值
  let [state, setState] = React.useState(10);

  // 用法二，入参为方法
  // const [state, setState] = React.useState(() => {
  //   const date = new Date()
  //   return +date
  // });
  
  return (
    <div>
      <div>当前值：{state}</div>

      {/* 用法一：setState 直接传入新值 */}
      <button onClick={() => setState(state - 1)}> - 1</button>

      {/* 用法二：setState 传入方法 */}
      <button onClick={() => setState(oldState => oldState + 1)}> + 1</button>

    </div>
  )
}