useState Hook

前言
问题：Hook 是什么? 一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性
使用模式：函数组件 + Hooks
特点：从名称上看，Hook 都以 use 开头，useState Hook

---

一、useState Hook 的基本使用

• 使用场景：当你想要在函数组件中，使用组件状态时，就要使用 useState Hook 了
• 作用：为函数组件提供状态（state）
• 使用步骤：
  1. 导入 useState 函数
  2. 调用 useState 函数，并传入状态的初始值(注意：useState 的初始值(参数)只会在组件第一次渲染时生效。)
  3. 从 useState 函数的返回值中，拿到状态和修改状态的函数
  4. 在 JSX 中展示状态
  5. 在按钮的点击事件中调用修改状态的函数，来更新状态

• 参数：状态初始值。比如，传入 0 表示该状态的初始值为 0
  • 注意：此处的状态可以是任意值（比如，数值、字符串、对象等），而 class 组件中的 state 必须是对象
• 返回值：数组，包含两个值：1 状态值（state） 2 修改该状态的函数（setState）

二、class类式组件 对比 useState Hook

class类式组件：

函数式组件useState Hook：

三、解构

• es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

3.1、 使用数组解构简化

比如，要获取数组中的元素：

1. 原始方式：索引访问

const arr = ['aaa', 'bbb']

const a = arr[0]  // 获取索引为 0 的元素
const b = arr[1]  // 获取索引为 1 的元素

2. 简化方式：数组解构
   • 相当于创建了两个变量（可以是任意的变量名称）分别获取到对应索引的数组元素

const arr = ['aaa', 'bbb']

const [a, b] = arr
// a => arr[0]
// b => arr[1]

const [state, setState] = arr

• 使用数组解构简化 useState 的使用
  • 约定：修改状态的函数名称以 set 开头，后面跟上状态的名称

// 解构出来的名称可以是任意名称

const [state, setState] = useState(0)
const [age, setAge] = useState(0)
const [count, setCount] = useState(0)

3.2、 对象解构

// 1.
const {foo,bar}={foo:'hello',bar:"world"};
console.log(foo,bar);
  
// 2.如果变量名和属性名不一致，需要重命名
const {foo:baz}={foo:"hello",bar:"world"};   baz:hello

3.3、 字符串解构

// 1.可以使用对象解构或者是数组解构，使用数组结构可以获取指定字符；使用对象结构可以获取实例属性方法;
const [a,b,c]='hello'; 
console.log(a,b,c);h e l

四、useState的初值

useState的初值可以是任意数据类型。比如，数值、字符串、对象等。

const [user, setUser] = useState({
    name: 'zs',
    age: 18,
})

五、useState hook 的使用规则

规则一：

• 注意：React Hooks 只能直接出现在 函数组件 中，不能嵌套在 if/for/其他函数中！

规则二：

• React Hooks 必须要每次组件渲染时，按照相同的代码调用顺序来区分所有的 Hooks。

  • 为什么会有这样的规则？ 因为 React 是按照 Hooks 的调用顺序来识别每一个 Hook，如果每次调用的顺序不同，导致 React 无法知道是哪一个 Hook

  • 通过开发者工具可以查看到。