ReactJS Hook之useState

声明 State 变量

在 class 中，我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

在函数组件中，我们没有 this，所以我们不能分配或读取 this.state。我们直接在组件中调用 useState Hook：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);

调用 useState 的意义

它定义一个 “state 变量”。我们的变量叫 count， 但是我们可以叫他任何名字，比如 banana。这是一种在函数调用时保存变量的方式 —— useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。

useState 入参

useState() 方法唯一的参数就是初始 state。不同于 class ，可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。 示例只需使用数字来记录用户点击次数，所以我们传了 0 作为变量初始 state。

如果想要在 state 中存储两个不同的变量，只需调用 useState() 两次。

useState 返回值

当前 state && 更新 state 的函数。 这就是我们这么写：

const [count, setCount] = useState() 

与 class 里面 this.state.count 和 this.setState 类似，唯一区别就是现在要成对获取它们了。 所以重新理解一开始的案例

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);