React Hooks的使用(一)——useState、useEffect解析

一、为什么需要Hook?

Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。
我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面的优势:

  1. class组件可以定义自己的state,用来保存组件自己内部的状态;
    函数式组件不可以,因为函数每次调用都会产生新的临时变量;

  2. class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑;
    比如在componentDidMount中发送网络请求,并且该生命周期函数只会执行一次;
    函数式组件在学习hooks之前,如果在函数中发送网络请求,意味着每次重新渲染都会重新发送一次网络请求;

  3. 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的出现

Hook的出现,可以解决上面提到的这些问题;
简单总结一下hooks:

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

Hook的使用场景:

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

四、Class组件和Functional组件对比

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

  1. Class组件:
    在这里插入图片描述
import React, {PureComponent} from 'react';
class CounterClass 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})}
}
export default CounterClass;
  1. function组件
    在这里插入图片描述
import React, {useState} from 'react'export default function CounterHook() {/*const arr = useState(0)const state = arr[0]const setState = arr[1]*/const [state, setState] = useState(0)console.log(state, setState)return (<div><h2>当前计数:{state}</h2><button onClick={e => setState(state + 1)}>+1</button><button onClick={e => setState(state - 1)}>-1</button></div>)
}

四、useState解析

Hook指的类似于useState、 useEffect这样的函数
Hooks是对这类函数的统称;

那么我们来研究一下核心的一段代码代表什么意思:
useState来自react,需要从react中导入,它是一个hook;
参数:初始化值,如果不设置为undefined;
返回值:数组,包含两个元素;

  • 元素一:当前状态的值(第一调用为初始化值);
  • 元素二:设置状态值的函数;

点击button按钮后,会完成两件事情:

  1. 调用setCount,设置一个新的值;
  2. 组件重新渲染,并且根据新的值返回DOM结构;

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

  • Hook 就是 JavaScript 函数,这个函数可以帮助你 钩入(hook into) React State以及生命周期等特性;

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

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

五、认识useState

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 ComplexHookState() {const [friends, setFriends] = useState(['bob', 'zep', 'haha'])const [students, setStudents] = useState([{id: 110, name: 'why', age: 33},{id: 111, name: 'zep', age: 22},{id: 112, name: 'haha', age: 19}])function addFriend() {friends.push('hmm')setFriends(friends)}function incrementStudentAgeWithIndex(index) {const newStudents = [...students]newStudents[index].age += 1setStudents(newStudents)}return (<div><h2>好友列表:</h2><ul>{friends.map((item, index) => {return <li key={index}>{item}</li>})}</ul><button onClick={e => setFriends([...friends, 'tom'])}>添加好友</button>{/* 以下为错误做法 */}<button onClick={addFriend}>添加好友</button><h2>学习列表</h2><ul>{students.map((item, index) => {return (<li key={item.id}><span>姓名:{item.name}</span><span>年龄:{item.age}</span><button onClick={e => incrementStudentAgeWithIndex(index)}>age + 1</button></li>)})}</ul></div>)
}

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

六、认识Effect Hook

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

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

假如我们现在有一个需求:页面的title总是显示counter的数字,分别使用class组件和Hook实现:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

useEffect的解析:

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

七、需要清除Effect

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

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

Effect Hook通过什么方式来模拟componentWillUnmount呢?
useEffect传入的回调函数A本身可以有一个返回值,这个返回值是另外一个回调函数B:
type EffectCallback = () => (void | (() => void | undefined));

为什么要在 effect 中返回一个函数?
在这里插入图片描述

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

React 何时清除 effect?

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

八、多个useEffect一起使用

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

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

使用Effect Hook,我们可以将它们分离到不同的useEffect中:
在这里插入图片描述
在这里插入图片描述
Hook 允许我们按照代码的用途分离它们, 而不是像生命周期函数那样:

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

九、Effect性能优化

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

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

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

  • useEffect实际上有两个参数:
  • 参数一:执行的回调函数;
  • 参数二:该useEffect在哪些state发生变化时,才重新执行;(受谁的影响)

案例练习:

  • 受count影响的Effect;

  • 但是,如果一个函数我们不希望依赖任何的内容时,也可以传入一个空的数组 []
    在这里插入图片描述
    点击+1按钮后,只有修改DOM操作会受到count值变化的影响而重新render:
    在这里插入图片描述

  • 那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;
    componentDidMount 等价于 在这里插入图片描述

componentWillUnmount 等价于 在这里插入图片描述

import React, {useEffect, useState} from "react";export default function MultiEffectHookDemo() {const [count, setCount] = useState(0)const [isLogin, setIsLogin] = useState(true)useEffect(() => {console.log('修改DOM', count)}, [count])useEffect(() => {console.log('订阅事件')return () => {console.log('取消订阅事件')}}, [])useEffect(() => {console.log('网络请求')}, [])return (<div><h2>多个useEffect一起使用</h2><h2>{count}</h2><button onClick={e => setCount(count + 1)}> + 1 </button><h2>{isLogin ? 'zep' : '未登录'}</h2><button onClick={e => setIsLogin(!isLogin)}>登录/注销</button></div>)
}

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

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

相关文章

python长沙_长沙python

本文转自量子位(ID:QbitAI) 边策 鱼羊 发自 凹非寺 量子位 报道 | 公众号 QbitAI 只用99行代码&#xff0c;你也可以像《冰雪奇缘》里的艾莎公主一样拥有冰雪魔法。虽然你不能在现实世界中肆意变出魔法&#xff0c;但却能在计算机的虚拟世界挥洒特效。或许你不知道&#xff0c;…

sed

sed -n 10p text.txt 输出第10行转载于:https://www.cnblogs.com/ssyuxue/p/5804857.html

React Hooks的使用(二)——useContext、useReducer、useCallback、useMemo解析

一、useContext的使用 在之前的开发中&#xff0c;我们要在组件中使用共享的Context有两种方式&#xff1a; 第一种方式&#xff1a;类组件可以通过 类名.contextType MyContext方式&#xff0c;在类中获取context&#xff1b; 第二种方式&#xff1a;多个Context或者在函数…

凸多边形面积_C++计算任意多边形的面积

任意多边形的面积计算_拾忆楓灵的博客-CSDN博客​blog.csdn.net计算任意多边形的面积 - tenos - 博客园​www.cnblogs.com完美解决计算3D空间任意多边形面积_Studiouss的博客-CSDN博客​blog.csdn.net求多边形面积公式&#xff08;已知顶点坐标&#xff09;_扬帆起航-CSDN博客​…

springContext

方法一 package com.hsh.utils; import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.springframework.context.ApplicationContextAware;import org.springframework.stereotype.Component;Componentpublic c…

React Hooks的使用(三)——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook

一、useRef useRef返回一个ref对象&#xff0c;返回的ref对象再组件的整个生命周期保持不变。 最常用的ref是两种用法&#xff1a; 用法一&#xff1a;引入DOM&#xff08;或者组件&#xff0c;但是需要是class组件&#xff09;元素&#xff1b; 案例一&#xff1a;引用DOM …

python制作聊天机器人原理_用 Python 来做一个聊天机器人吧!(一)

在我的一个回答里&#xff0c;我提到了用 Python 搭建聊天机器人。从今天开始&#xff0c;我就带着大家从0开始搭建一个聊天机器人。(顺便说一句&#xff0c;我喜欢把链接像上面这样加在文字里&#xff0c;如果找不到文中所说的资源&#xff0c;可以看看周围有没有链接。)准备工…

python子类分配

原问题是将左边样式变成右边样式&#xff1a; 即有父类和子类&#xff0c;父类包括多个子类&#xff0c;怎样将子类匹配到父类下面的问题 代码如下 1 #!/usr/bin/python3.42 # -*- coding: utf-8 -*-3 4 arr1 ["S01","S01","S01","S02&quo…

react 网易云音乐实战项目笔记

0、项目规范 一、路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组1. 路由重定向 访问 /路径 》 重定向到 /discover路径 2. 二级路由&#xff1a; 二、网络请求相关 npm i axios页面中使用暴露 出来的request发送网络请求&#…

catchlog是什么软件_Log 重要性

有一项目.Linux Tomcat Jdk1.6 配置.第一版已经完成,部署成功.但很长时间过去了.一年有余,客户突然要加个小功能,且还有个地方要改.功能,对编码的难度是微乎其微的.由于改动的功能比较偏,所以回归测试也比较轻松的通过.但在再次部署的时候出现了.众所周知,JAVA开发最终需要的…

java 几个线程池的理解

http://www.cnblogs.com/dolphin0520/p/3932921.html 这个文章写的很好 转载于:https://www.cnblogs.com/elnino/p/5807713.html

react项目打包

一、react项目打包 对于使用脚手架创建的项目&#xff0c;打包是一件非常容易的事情&#xff1a; yarn build其他文件没有太多要解析的&#xff0c;我们看一下js文件&#xff1a; [hash].chunk.js 代表是所有依赖的第三方库&#xff0c; vendor(第三方库) 的代码&#xff1b…

spark应用程序转换_Spark—RDD编程常用转换算子代码实例

Spark—RDD编程常用转换算子代码实例Spark rdd 常用 Transformation 实例&#xff1a;1、def map[U: ClassTag](f: T > U): RDD[U] 将函数应用于RDD的每一元素&#xff0c;并返回一个新的RDDpackagetop.ruandbimportorg.apache.spark.{SparkConf, SparkContext}object Rdd…

struts2中一些常用的写法 记录

1.对日期进行处理 Date current new Date(); java.text.SimpleDateFormat sdf new java.text.SimpleDateFormat( "yyyy-MM-dd HH:mm:ss"); String time sdf.format(current); 或者&#xff1a; 插入当前时间&#xff1a;pstmt.setDate(4,new java.sql.Date(new ja…

React SSR

一、为什么需要SSR呢&#xff1f; 单页面富应用的局限&#xff1a; 之前我们开发的应用程序&#xff0c;如果直接请求可以看到上面几乎没有什么内容。 但是为什么我们页面可以看到大量的内容呢&#xff1f; 因为当我们请求下来静态资源之后会执行JS&#xff0c;JS会去请求数…

linux 命令 读phy_PHY LINUX (转载整理)

每每分析网络问题的时候&#xff0c;总要梳理层次关系&#xff0c;本想自己写一个关于PHY的文档&#xff0c;找到网上有人写的一篇比较好&#xff0c;所以转载下来&#xff0c;仅供初学者参考。以太网 MAC(链路层)PHY(物理层/RTL8201F,88E1111);集成型DM9000&#xff0c;RTL813…

Laravel框架开发规范-修订版

1.PHP编码规范 1.1 标签 PHP 程序可以使用<?php ?>或<? ?>来界定PHP代码 在HTML 页面中嵌入纯变量时&#xff0c;使用<? ?>这样的形式 纯PHP类文件&#xff0c;文件开始标签使用<?php&#xff0c;闭合标签?>必须省略 1.2 编码 PHP文件必须使用…

vue显示两位小数的方法_Vue toFixed保留两位小数的3种方式

Vue toFixed保留两位小数的3种方式第一种&#xff1a;直接写在js里面&#xff0c;这是最简单的val.toFixed(2)第二种&#xff1a;在ElementUi表格中使用第三种&#xff1a;在取值符号中使用 {{}}定义一个方法towNumber(val) {return val.toFixed(2)}使用{{ towNumber(row.equiV…

Tyvj 1176 火焰巨魔的惆怅

Tyvj 1176 火焰巨魔的惆怅 背景 TYVJ2月月赛第一道巨魔家族在某天受到了其他种族的屠杀&#xff0c;作为一个英雄&#xff0c;他主动担任了断后的任务&#xff0c;但是&#xff0c;在巨魔家族整体转移过后&#xff0c;火焰巨魔却被困住了&#xff0c;他出逃的方式也只有召唤小火…

Vue3 组件通信学习笔记

一、父子组件之间通信 父子组件之间如何进行通信呢&#xff1f; 父组件传递给子组件&#xff1a;通过props属性&#xff1b;子组件传递给父组件&#xff1a;通过$emit触发事件&#xff1b; 1.1 父组件传递给子组件 在开发中很常见的就是父子组件之间通信&#xff0c;比如父…