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 [count, setCount] = useState(0);
// 不推荐
const state = useState(0);
const count = state[0];
const setCount = state[1];

• 使用useState()实现状态管理步骤
  按钮被点击了{count}次

• 使用状态值，当前组件内可见。

const handleCount = () => {
setCount(count + 1);
};
return <button onClick={handleCount}>按钮被点击了{count}次</button>;

3. useState()初始化其它数据类型

• 初始化类型为字符串

const [msg, changeMsg] = useState("Hello React")

• 初始化类型为数组

const [todos, changeTodos] = useState([
  { id: 1, todo: "学习React" },
  { id: 2, todo: "学习Vue" },
]);

• 不推荐初始化使用对象，因为本身对象就是多个键值对，多个值的维护还是推荐使用多次调用useState即可。

4. useState()注意点

在使用修改状态函数的时候乱传值，会怎样？
在UI（JSX表达式）中，调用修改状态的函数会怎样？

5. 类（class）组件和使用useState()创建的函数组件对比

1. 导入 React >>>>>>>>>>>>>>>>>>>>>>>>>>1. 导入 { useState }
2. 定义类组件>>>>>>>>>>>>>>>>>>>>>>>>>> 2. 定义函数组件
3. 定义状态（constructor） >>>>>>>>>>>>>>> 3. 获取状态数据和修改状态数据的函数（useState()）

---

总结

Diamond cuts diamond .