React(精读官方文档) - Hook-使用 State Hook

useState

import React, { useState } from 'react';
   function Example() {
   const [count, setCount] = useState(0);
     return (
      <div>
       <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
      Click me
      </button>
    </div>
   );
// 第一行: 引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state
//第三行: 在 Example 组件内部，我们通过调用 useState Hook 声明了一个新的 state 变量。它返回一对值给到我们命名的变量上。我们把变量命名为 count，因为它存储的是点击次数。我们通过传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值本身就是一个函数。它让我们可以更新 count 的值，所以我们叫它 setCount。
//第七行: 当用户点击按钮后，我们传递一个新的值给 setCount。React 会重新渲染 Example 组件，并把最新的 count 传给它。

• 方括号作用：

 const [fruit, setFruit] = useState('banana');
 //这种 JavaScript 语法叫数组解构。它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit 是返回的第二个值

• 使用多个 state 变量

function ExampleWithManyStates() {
 // 声明多个 state 变量
 const [age, setAge] = useState(42);
 const [fruit, setFruit] = useState('banana');
 const [todos, setTodos] = useState([{ text: '学习 Hook' }]);