React useState

React Hook 总是以完全相同的顺序进行调用，出于函数顶层，不能在 if、循环、class中使用Hook。

使用useState Hook

• useState 返回值是一个数组
• 数组第一个值是状态(state)
• 数组第二个值是改变该状态的函数(setState)

  // 创建一个名为:count 的状态, 状态值为4(这里是number类型)，setCount: 可以改变 count 的状态。
  const [count, setCount] = useState(4);

改变状态值: 在当前状态下改变

• 方法一 :

  // 使用当前的状态值进行改变 --- 当前值 - 1;
  setCount(count - 1);

  // 因为没有传入值类型限制，所以 `count` 状态值类型为any;可以直接设置其他类型的值。
  setCount("复制");

• 方法二

// 使用函数，参数prevCount 是上一个状态值，减一后设置新值
setCount(prevCount => prevCount - 1);

初始化赋值

• 方法一

 // 创建状态 count ，并直接初始化值为 4。
// 组件更新状态时都会执行一次初始化。
 const [count, setCount] = useState(4);

• 方法二

// 创建状态 count, 并使用函数返回值，初始化值为4
// 该方法初始化执行一次。
 const [count,setCount] = useState(() => 4);

创建的状态(state)类型为Object 时

• 注意需要改变Object 中的一个值时，需要把整个Object替换。useState Hook 没有自动合并对象的功能。

 // 初始化
const [state, setState] = useState({count:4, theme: 'blue});

// state中的count 进行加1
setState(prevState => {...prevState, count:prevState.count + 1});