第20节——useState

一、概念

useState 是 React 函数组件中用于管理状态（state）的 Hook。它接受一个初始状态，并返回一个数组，其中包含当前状态和一个函数，用于更新当前状态。

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

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

可以简单理解为，如果要改变数据联动视图就要使用useState

注意

如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

二、定义useState

1、使用默认值

const [state, setState] = useState(initialValue);
// 其中，initialValue是初始状态。它可以是任意值

2、使用函数返回初始值

const [state, setState] = useState(() => {
  /**
  	计算初始值的代码
    这种写法常用于初始值的计算比较复杂的情况
    这个函数只会在初始化的时候调用一次
  */
  return initialValue;
});

三 useState的返回值

useState函数返回一个数组，数组中有两个元素

1、当前状态：这是状态的当前值，可以在组件中使用。

2、状态修改函数：这是一个函数，可以用来更新状态的值。

当使用状态修改函数来更新状态时，React会重新渲染组件，使用最新的状态值。

需要注意的是，状态修改函数不能直接更改状态，而是通过调用状态修改函数来触发React渲染组件。这是为了保证状态的可预测性

import React, { useState } from 'react';
export default function hook() {

  const [num, setNum] = useState(1)

  const add = () => {
    setNum(num + 1)
  }

  return (
    <div>
      <button onClick={() => add()}>+1</button>
      <div>你好，react hook{num}</div>
    </div>
  );
}

四、useState的修改状态的方式

1、直接调用状态修改函数，并传入新的状态值

setCount(count + 1);

2、在函数内部调用状态修改函数，并传入新的状态值

const handleClick = () => {
  setCount(count + 1);
};

3、使用前一次状态值：在状态修改函数内部使用前一次状态值，并返回新的状态值

// 更新前的值
setCount(prevCount => prevCount + 1);