React-hooks 基础

目录

1. hooks-介绍

1.hooks 解释

2.hooks 作用

3.React v16.8 版本前后，组件开发模式的对比： 

总结：

2. hooks-解决的问题

1.组件的状态逻辑复用问题 

2.class 组件自身的问题

总结：

3. hooks-渐进策略 

1.什么是渐进式策略（项目开发场景） 

2.在 hooks 中开发会使用那些知识？ 

总结：

4. useState-基本使用 

1.useState 作用

2.useState 语法

3.useState 使用步骤

4.useState 写法正确姿势

总结：

5. useState-读取和修改状态 

1.读取状态

2.修改状态

总结：

6. useState-组件更新过程

组件初始化时候的事情

setState 后发生的事情

总结：

7. useState-使用原则  

定义多个状态的原则

hook 函数书写位置原则

可以通过开发者工具进行查看组件的 hooks

总结：

8. useEffect-副作用 

side effect 副作用专业解释

通过生活例子，理解副作用

使用函数组件常见的副作用

总结：

9. useEffect-基本使用 

1.语法介绍

2.随堂练习

总结：

10. useEffect-依赖项 

1.默认使用 useEffect 的问题

2.useEffect 依赖项的使用

总结：

11. useEffect-不要对依赖项撒谎 

12. useEffect-依赖是一个空数组

13. useEffect-清除副作用 

14. useEffect-使用总结

1. hooks-介绍

能够说出 React Hooks 是什么？ 

大致步骤：

• hooks 解释
• hooks 作用
• 有了 hooks 之后组件开发模式

具体内容：

1.hooks 解释

• Hooks：钩子、钓钩、钩住 ，Hooks 是 React v16.8 中的新增功能

2.hooks 作用

• 为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能
• 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性
• 注意：Hooks 只能在函数组件中使用，自此，函数组件成为 React 的新宠儿

3.React v16.8 版本前后，组件开发模式的对比： 

• React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
• React v16.8 及其以后：
  1. class 组件(提供状态) + 函数组件(展示内容)
  2. Hooks(提供状态) + 函数组件(展示内容)
  3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

总结：

• 虽然有了 Hooks，但 React 官方并没有计划从 React 库中移除 class

• 有了 Hooks 以后，不能再把函数组件称为无状态组件了，因为 Hooks 为函数组件提供了状态

2. hooks-解决的问题

 能够说出为什么要有 Hooks 以及 Hooks 能解决什么问题

大致步骤：

• 组件的状态逻辑复用问题
• class 组件自身的问题

具体内容：

1.组件的状态逻辑复用问题 

• 在 Hooks 之前，组件的状态逻辑复用经历了：mixins（混入）、HOCs（高阶组件）、render-props 等模式
• （早已废弃）mixins 的问题：1. 数据来源不清晰 2. 命名冲突
• HOCs、render-props 的问题：重构组件结构，导致组件形成 JSX 嵌套地狱问题

2.class 组件自身的问题

• 选择：函数组件和 class 组件之间的区别以及使用哪种组件更合适
• 需要理解 class 中的 this 是如何工作的
• 相互关联且需要对照修改的代码被拆分到不同生命周期函数中
• 相比于函数组件来说，不利于代码压缩和优化，也不利于 TS 的类型推导

总结：

• 正是由于 React 原来存在的这些问题，才有了 Hooks 来解决这些问题

3. hooks-渐进策略 

 能够理解在 react 中什么场景应该使用 hooks

大致步骤：

• 什么是渐进式策略？
• 在 hooks 中开发会使用那些知识？

具体内容：

1.什么是渐进式策略（项目开发场景） 

文档

• 不推荐直接使用 Hooks 大规模重构现有组件
• 推荐：新功能用 Hooks，复杂功能实现不了的，也可以继续用 class
• 找一个功能简单、非核心功能的组件开始使用 hooks

2.在 hooks 中开发会使用那些知识？ 

• class 组件相关的 API 在 hooks 中不可用
  • class 自身语法，比如，constructor、static 等
  • 钩子函数，componentDidMount、componentDidUpdate、componentWillUnmount
  • this 相关的用法
• 原来学习的 React 内容还是要用的
  • JSX：{}、onClick={handleClick}、条件渲染、列表渲染、样式处理等
  • 组件：函数组件、组件通讯
  • React 开发理念：单向数据流、状态提升 等
  • 解决问题的思路、技巧、常见错误的分析等

总结：

1. react 没有计划从 React 中移除 class
2. react 将继续为 class 组件提供支持
3. 可以在项目中同时使用 hooks 和 class

4. useState-基本使用 

能够使用useState为函数组件提供状态 

大致步骤：

• useState 作用？
• useState 语法？
• useState 使用步骤？
• useState 写法正确姿势

具体内容：

1.useState 作用

• 为函数组件提供状态
• 它是一个 hook，就是一个特殊的函数，让你在函数组件中获取状态等 React 特性。
• 名称上看 hook 都以use开头useXxx

2.useState 语法

// 参数：状态初始值(数值、字符串、数组，对象)
// 返回值：stateArray 是一个数组
const stateArray = useState(0);
// 索引 0 表示：状态值（state）
const state = stateArray[0];
// 索引 1 表示：修改状态的函数（setState）
const setState = stateArray[1];

3.useState 使用步骤

1. 导入 useState hook
2. 调用 useState 函数，并传入状态的初始值
3. 从 useState 函数的返回值中，拿到状态和修改状态的函数
4. 在 JSX 中展示状态
5. 在按钮的点击事件中调用修改状态的函数，来更新状态

import { useState } from 'react';

const Count = () => {
  // stateArray 是一个数组
  const stateArray = useState(0);
  const state = stateArray[0];
  const setState = stateArray[1];

  return (
    <div>
      {/* 展示状态值 */}
      <h1>状态为：{state}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  );
};