前言
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()实现状态管理步骤
<button onClick={handleCount}>按钮被点击了{count}次</button> -
使用状态值，当前组件内可见。
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()创建的函数组件对比
- 导入 React >>>>>>>>>>>>>>>>>>>>>>>>>>1. 导入 { useState }
- 定义类组件>>>>>>>>>>>>>>>>>>>>>>>>>> 2. 定义函数组件
- 定义状态（constructor） >>>>>>>>>>>>>>> 3. 获取状态数据和修改状态数据的函数（useState()）
总结
Diamond cuts diamond .
