react hook之useState_自定义hooks,usestate闭包问题

HooK是react16.8的新增特性，它可以让你在不编写class的情况下使用state以及其他的react的特性

状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。函数组件默认是没有状态的，要使函数组件具有状态管理，可以使用useState() hook进行状态管理。
将状态添加到函数组件需要四个步骤：启用状态、初始化、读取和更新。（下面使用checkbox的选中和取消来展示案例）

启用状态

要讲函数组件转换为有状态的组件，需要告诉React：从’react’包中导入useState钩子，然后再组件函数的顶部调用。
大致如下：

import React, {
    useState } from 'react';

function App() {
   
  ... = useState(...);
  return (
    <div className="App"><input type="checkbox" /></div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12

在App组件函数的第一行调用 useState()（暂时不考虑参数和返回值）。重要的是，在组件内部调用HooK会使该函数成为有状态的函数组件。
启用状态后，下一步就是初始化

初始化状态

开始时，checkbox没有选中，使用状态为false来初始化Hook：

import React, {
    useState } from 'react';

function App() {
   
  //  useState(false) 使用false初始化状态
  ... = useState(false);
  return (
    <div className="App"><input type="checkbox" /></div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13

启用和初始化状态之后，如何读取它？来看看useState(false) 返回什么。

读取状态

当useState(false)被调用时，它返回一个数组，该数组的第一项是状态值

const stateArray = useState(false);
stateArray[0] // => 状态值
1
2

读取组件的状态：

import React, {
    useState } from 'react';

function App() {
   
  const stateArray =<
1
2
3
4
5