【React系列】Hook（一）基本使用

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. 认识hook

1.1. 为什么需要hook

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。

我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势：

  • class组件可以定义自己的state，用来保存组件自己内部的状态；
    • 函数式组件不可以，因为函数每次调用都会产生新的临时变量；
  • class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；
    • 比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；
    • 函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
  • class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等；
    • 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。

但是class组件依然存在很多的问题：

复杂组件变得难以理解：

  • 我们在最初编写一个class组件时，往往逻辑比较简单，并不会非常复杂。
  • 但是随着业务的增多，我们的class组件会变得越来越复杂；
  • 比如componentDidMount中，可能就会包含大量的逻辑代码：包括网络请求、一些事件的监听（还需要在componentWillUnmount中移除）；
  • 而对于这样的class实际上非常难以拆分：因为它们的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度；

难以理解的class：

  • 很多人发现学习ES6的class是学习React的一个障碍。
  • 比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this；
  • 虽然我认为前端开发人员必须掌握this，但是依然处理起来非常麻烦；

组件复用状态很难：

  • 在前面为了一些状态的复用我们需要通过高阶组件或render props；
  • 像我们之前学习的redux中connect或者react-router中的withRouter，这些高阶组件设计的目的就是为了状态的复用；
  • 或者类似于Provider、Consumer来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多嵌套；
  • 这些代码让我们不管是编写和设计上来说，都变得非常困难；

Hook的出现，可以解决上面提到的这些问题；

简单总结一下hooks：

  • 它可以让我们在不编写class的情况下使用state以及其他的React特性；
  • 但是我们可以由此延伸出非常多的用法，来让我们前面所提到的问题得到解决；

Hook的使用场景：

  • Hook的出现基本可以代替我们之前所有使用class组件的地方（除了一些非常不常用的场景）；
  • 但是如果是一个旧的项目，你并不需要直接将所有的代码重构为Hooks，因为它完全向下兼容，你可以渐进式的来使用它；
  • Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

这里有一个Dan Abramov文章中提到的class组件和函数式组件的对比图：

在这里插入图片描述

在这里插入图片描述

1.2. hooks的基本演练

我们通过一个计数器案例，来对比一下class组件和函数式组件结合hooks的对比：

class组件实现：

import React, { PureComponent } from 'react'export default class Counter01 extends PureComponent {constructor(props) {super(props);this.state = {counter: 0}}render() {return (<div><h2>当前计数: {this.state.counter}</h2><button onClick={e => this.increment()}>+1</button><button onClick={e => this.decrement()}>-1</button></div>)}increment() {this.setState({counter: this.state.counter + 1});}decrement() {this.setState({counter: this.state.counter - 1});}
}

函数式组件实现：

import React, { useState } from 'react';export default function Counter2() {const [count, setCount] = useState(0);return (<div><h2>当前计数: {count}</h2><button onClick={e => setCount(count + 1)}>+1</button><button onClick={e => setCount(count - 1)}>-1</button></div>)
}

你会发现上面的代码差异非常大：函数式组件结合hooks让整个代码变得非常简洁，并且再也不用考虑this相关的问题；

那么我们来研究一下核心的一段代码代表什么意思：

  • useState来自react，需要从react中导入，它是一个hook；
    • 元素一：当前状态的值（第一调用为初始化值）；
    • 元素二：设置状态值的函数；
    • 参数：初始化值，如果不设置为undefined；
    • 返回值：数组，包含两个元素；
  • 点击button按钮后，会完成两件事情：
    • 调用setCount，设置一个新的值；
    • 组件重新渲染，并且根据新的值返回DOM结构；
  • React在重新渲染时，会保留这个state状态，并不会每次都使用初始化值；
const [count, setCount] = useState(0);
// 等价于
const counter = useState(0);
const count = counter[0];
const setCount = counter[1];

相信通过上面的一个简单案例，你已经会喜欢上Hook的使用了。

Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State 以及生命周期等特性；

但是使用它们会有两个额外的规则：

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，后面学习）。

Tip：Hook指的类似于useState、useEffect这样的函数，Hooks是对这类函数的统称；

二. hooks基础

2.1. State Hook

State Hook 的API就是 useState，我们在前面已经进行了学习：

  • useState 会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
  • useState 接受唯一一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。
  • useState 是一个数组，我们可以通过数组的解构，来完成赋值会非常方便。
    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

FAQ：为什么叫 useState 而不叫 createState?

  • “Create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。
  • 在下一次重新渲染时，useState 返回给我们当前的 state。
  • 如果每次都创建新的变量，它就不是 “state”了。
  • 这也是 Hook 的名字总是以 use 开头的一个原因。

当然，我们也可以在一个组件中定义多个变量和复杂变量（数组、对象）：

import React, { useState } from 'react';export default function Home() {const [age, setAge] = useState(0);const [names, setNames] = useState(["abc", "cba"]);const [info, setInfo] = useState({name: "why", age: 18});function addFriend() {names.push("nba");console.log(names);setNames(names);}return (<div><h2>当前年龄: {age}</h2><button onClick={e => setAge(age + 1)}>age+1</button><h2>朋友列表</h2><ul>{names.map((item, index) => {return <li key={index}>{item}</li>})}</ul><button onClick={e => setNames([...names, "nba"])}>添加好友</button>{/* 思考: 这样的方式是否可以实现 */}<button onClick={addFriend}>添加好友</button><h2>我的信息:</h2><div>我的名字: {info.name}</div><button onClick={e => setInfo({...info, name: "lilei"})}>修改名字</button></div>)
}

2.2. Effect Hook

目前我们已经通过hook在函数式组件中定义state，那么类似于生命周期这些呢？

  • Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
  • 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
  • 所以对于完成这些功能的Hook被称之为 Effect Hook；

2.2.1. Effect基本使用

假如我们现在有一个需求：页面的title总是显示counter的数字

使用class组件如何实现呢？

  • 我们会发现 document.title 的设置必须在两个生命周期中完成；
  • 这是因为React的class组件并没有给我们提供一个统一的生命周期函数，可以让无论是否是第一次渲染都会执行的生命周期函数；
import React, { PureComponent } from 'react'export default class CounterTitle01 extends PureComponent {constructor(props) {super(props);this.state = {counter: 0}}componentDidMount() {document.title = `当前计数: ${this.state.counter}`}componentDidUpdate() {document.title = `当前计数: ${this.state.counter}`}render() {console.log("111");return (<div><h2>当前计数: {this.state.counter}</h2><button onClick={e => this.increment()}>+1</button><button onClick={e => this.decrement()}>-1</button></div>)}increment() {this.setState({counter: this.state.counter + 1});}decrement() {this.setState({counter: this.state.counter - 1});}
}

这个时候，我们可以使用useEffect的Hook来完成：

import React, { useState, useEffect } from 'react';export default function CounterTitle02() {const [count, setCount] = useState(0);useEffect(() => {document.title = `当前计数: ${count}`;})return (<div><h2>当前计数: {count}</h2><button onClick={e => setCount(count + 1)}>+1</button><button onClick={e => setCount(count - 1)}>-1</button></div>)
}

useEffect 的解析：

  • 通过useEffect的Hook，可以告诉React需要在渲染后执行某些操作；
  • useEffect要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数；
  • 默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个 回调函数；

2.2.2. 需要清除 Effect

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除：

  • 比如我们之前的事件总线或Redux中手动调用subscribe；
  • 都需要在componentWillUnmount有对应的取消订阅；

Effect Hook通过什么方式来模拟componentWillUnmount呢？

  • useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：
type EffectCallback = () => (void | (() => void | undefined));

我们可以这样来编写Effect Hook：

import React, { useState, useEffect } from 'react';export default function EffectHookClear() {const [count, setCount] = useState(0);useEffect(() => {document.title = `当前计数: ${count}`;console.log("每次DOM更新时会回调");return () => {console.log("DOM被移除时会回调");}})return (<div><h2>当前计数: {count}</h2><button onClick={e => setCount(count + 1)}>+1</button><button onClick={e => setCount(count - 1)}>-1</button></div>)
}

为什么要在 effect 中返回一个函数？

  • 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；
  • 如此可以将添加和移除订阅的逻辑放在一起；
  • 它们都属于 effect 的一部分；

React 何时清除 effect？

  • React 会在组件更新和卸载的时候执行清除操作；
  • 正如之前学到的，effect 在每次渲染的时候都会执行；

2.2.3. 使用多个Effect实现关注点分离

使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题：

  • 比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中；

使用Effect Hook，我们可以将它们分离到不同的useEffect中：

import React, { useEffect } from 'react';export default function MultiUseEffect() {useEffect(() => {console.log("网络请求");});useEffect(() => {console.log("修改DOM");})useEffect(() => {console.log("事件监听");return () => {console.log("取消监听");}})return (<div><h2>MultiUseEffect</h2></div>)
}

Hook 允许我们按照代码的用途分离它们， 而不是像生命周期函数那样：

  • React 将按照 effect 声明的顺序依次调用组件中的每一个 effect；

2.2.4. Effect性能优化

默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：

  • 某些代码我们只是希望执行一次即可，类似于componentDidMount和componentWillUnmount中完成的事情；（比如网络请求、订阅和取消订阅）；
  • 另外，多次执行也会导致一定的性能问题；

我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢？

useEffect实际上有两个参数：

  • 参数一：执行的回调函数；
  • 参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）

我们来看下面的一个案例：

import React, { useState, useEffect } from 'react';export default function EffectPerformance() {const [count, setCount] = useState(0);const [show, setShow] = useState(true);useEffect(() => {console.log("修改DOM");}, [count])return (<div><h2>当前计数: {count}</h2><button onClick={e => setCount(count + 1)}>+1</button><button onClick={e => setShow(!show)}>切换</button></div>)
}
  • 在这个案例中，我们修改show的值，是不会让useEffect重新被执行的；（达到的效果有点类似shouldComponentUpdate或者继承PureComponent组件的效果）

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []：

useEffect(() => {console.log("监听事件");return () => {console.log("取消监听");}
}, [])
  • 那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了

2.3. Context Hook

在之前的开发中，我们要在组件中使用共享的Context有两种方式：

  • 类组件可以通过 类名.contextType = MyContext方式，在类中获取context；
  • 多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；

但是多个Context共享时的方式会存在大量的嵌套：

  • Context Hook允许我们通过Hook来直接获取某个Context的值；
const value = useContext(MyContext);

在App.js中使用Context

import React, { createContext } from 'react';import ContextHook from './04_useContext使用/01_ContextHook';export const UserContext = createContext();
export const ThemeContext = createContext();export default function App() {return (<div><UserContext.Provider value={{name: "why", age: 18}}><ThemeContext.Provider value={{color: "red", fontSize: "20px"}}><ContextHook/></ThemeContext.Provider></UserContext.Provider></div>)
}

在对应的函数式组件中使用Context Hook：

import React, { useContext } from 'react'
import { UserContext, ThemeContext } from '../App'export default function ContextHook() {const user = useContext(UserContext);const theme = useContext(ThemeContext);console.log(user);console.log(theme);return (<div>ContextHook</div>)
}

注意事项：当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重新渲染，并使用最新传递给 MyContext provider 的 context value 值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/324695.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[蓝桥杯学习] 树链剖分

[蓝桥杯学习] 树链剖分

定义 将树分割成若干条链&#xff0c;以维护树上的信息&#xff0c;若无特殊需求&#xff0c;一般是重链剖分。 重链剖分 如何重链剖分 两个dfs 第一个dfs是预处理各个结点的基本信息&#xff0c;第二个dfs是利用信息进行剖分&#xff08;dfs序&#xff09; 操作步骤 第一…
阅读更多...
在centos上安装WordPress 及创建配置文件无反应的解决方案

在centos上安装WordPress 及创建配置文件无反应的解决方案

一、安装Apache服务 1.直接在命令行中输入以下命令即可,顺便安装编译组件&#xff1a; yum install -y httpd yum install -y httpd-devel2.启动Apache服务和设置Apache自启&#xff1a; 1 systemctl start httpd 2 systemctl enable httpd 3.添加一个测试页面&#xff0c;…
阅读更多...
汽车电子学习总结

汽车电子学习总结

国内的主要有比亚迪、联合汽车电子&#xff08;联电&#xff09;、麦格米特、上海电驱动&#xff1b;国外的主要有欧美系的博世、麦格纳、大陆、博格华纳&#xff1b;日系的电装、电产等公司。
阅读更多...
KK集团高管变更：陈世欣任总经理，涉无证放贷遭关注，还曾被处罚

KK集团高管变更：陈世欣任总经理，涉无证放贷遭关注，还曾被处罚

近日&#xff0c;KK集团关联公司广东快客电子商务有限公司&#xff08;下称“KK集团”&#xff09;发生工商变更&#xff0c;其中郭惠波不再担任该公司总经理一职&#xff0c;由陈世欣接任。而在早前&#xff0c;陈世欣曾于2020年取代吴悦宁担任总经理职务&#xff0c;2021年7月…
阅读更多...
Local server not started, start with 报错python -m weditor

Local server not started, start with 报错python -m weditor

一、python -m weditor 如图报错 Local server not started, start with 报错 二、解决方案 右上角选择新的无痕窗口下&#xff0c;然后打开 http://localhost:17310/ 即可
阅读更多...
分布式（7）

分布式（7）

目录 31.基于Zookeeper如何实现分布式锁&#xff1f; 32.什么是ACID&#xff1f; 33.什么是分布式的XA协议&#xff1f; 34.什么是2PC&#xff1f; 35.什么是3PC&#xff1f; 31.基于Zookeeper如何实现分布式锁&#xff1f; 顺序节点 创建一个用于发号的节点“/test/lock…
阅读更多...
73.乐理基础-打拍子-还原号、临时变音记号在简谱中的规则

73.乐理基础-打拍子-还原号、临时变音记号在简谱中的规则

上一个内容&#xff1a;72.乐理基础-打拍子-加延音线的节奏型-CSDN博客 下图中1-13&#xff0c;就是四几拍中所有可能出现的节奏型&#xff0c;以及它们的组合方式&#xff0c;需要练习&#xff0c;可以买一本视唱书去练习&#xff0c;搜乐谱练习&#xff0c;自己写节奏型根据…
阅读更多...
【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第3节-云产品流转配置

【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第3节-云产品流转配置

&#x1f31f;博主领域&#xff1a;嵌入式领域&人工智能&软件开发 本节目标&#xff1a;本节目标是进行云产品流转配置为后面实际的手机APP的接入做铺垫。云产品流转配置的目的是为了后面能够让后面实际做出来的手机APP可以控制STM32/MCU&#xff0c;STM32/MCU可以将数…
阅读更多...
CentOS 多节点一键免密登录

CentOS 多节点一键免密登录

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…
阅读更多...
UE4.27_PIE/SIE

UE4.27_PIE/SIE

UE4.27_PIE/SIE 1. 疑问&#xff1a; 不明白什么是PIE/SIE? 不知道快捷键&#xff1f; 2. PIE/SIE: play in editor/simulate in editor 3. 快捷键&#xff1a; F8: 运行时possess&eject切换 4. 运行操作效果&#xff1a; PIE&SIE
阅读更多...
书生·浦语大模型全链路开源体系（陈恺|上海人工智能实验室 青年科学家）-听课笔记

书生·浦语大模型全链路开源体系（陈恺|上海人工智能实验室 青年科学家）-听课笔记

大模型重要性 大模型确实已成为发展通用人工智能&#xff08;AGI&#xff09;的重要途径。它们通过整合和处理大量数据&#xff0c;学习语言、图像、声音等多种模式的表示&#xff0c;以此来模拟人类的学习和思维方式。通过不断地学习和优化&#xff0c;这些模型能够在各种任…
阅读更多...
JAVAEE初阶相关内容第二十弹--HTTP协议【续集】

JAVAEE初阶相关内容第二十弹--HTTP协议【续集】

写在前&#xff1a;在前一篇博客中我们初步掌握了HTTP(超文本传输协议)的相关知识【点击跳转】&#xff0c;认识了HYYP协议的工作过程&#xff0c;掌握抓包工具Fiddler的使用。在“方法”中重点需要理解“GET”方法与“POST”方法的格式与内容&#xff0c;并了解了请求“报头”…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023