react——react Hooks、State Hook

---

前言

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

---

一、React Hooks 概述

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

1. 产生的原因

• 在组件之间复用状态逻辑很难，为了复用状态和修改状态的逻辑，开发者总结出了render props 和 高阶组件最佳实践，即使这样用起来还是有些晦涩。
• 复杂组件变得难以理解，表现在同一个生命周期函数中往往包含不相干的逻辑，比如从网络获取数据，设置监听，移除监听等等。
• class组件内this指向（绑定）多种处理方式，导致学习者难以理解

2. 总结

• 可以不用定义类（class）组件的情况下管理组件状态
• React Hooks 完全向后兼容，原来的类（class）组件不会移除。
• Hooks的知识和开发者以前使用React的知识没有冲突二者可以并行，所以大家不必焦虑之前的知识是否过时。

二、State Hook的使用

1. State Hook的概念

• State-“状态”，Hook-“钩子”。
• 当组件需要存储和管理状态时，需要启动一个“钩子”，将状态和管理状态的函数“钩入”到当前组件中。
• 如何启动一个引入状态的钩子？
  ➢ 通过调用 useState() 函数

2. 使用useState()实现状态管理步骤

• 导入 useState
  import React, { useState } from "react"

• 调用 useState()
  ➢ 参数：状态的初始值
  ➢ 返回值：数组，包含两个元素。第一个是状态。第二个是修改状态的函数。

• 解构调用 useState() 返回的数组

const