当前位置: 首页 > news >正文

【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
  • 像我们之前学习的reduxconnect或者react-router中的withRouter,这些高阶组件设计的目的就是为了状态的复用;
  • 或者类似于ProviderConsumer来共享一些状态,但是多次使用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指的类似于useStateuseEffect这样的函数,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的回调函数会在每次渲染时都重新执行,但是这会导致两个问题:

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

我们如何决定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("取消监听");}
}, [])
  • 那么这里的两个回调函数分别对应的就是componentDidMountcomponentWillUnmount生命周期函数了

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 providercontext value 值。

相关文章:

【React系列】Hook(一)基本使用

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 认识hook 1.1. 为什么需要hook Hook 是 React 16.8 的新增特性&#xff0c;它可以让我们在不编写class的情况下…...

算法训练营Day28

#Java #贪心 开源学习资料 Feeling and experiences&#xff1a; 这周来到了贪心算法&#xff0c;简要概述&#xff1a; 贪心算法是一种在每个步骤中都采取最优解&#xff08;即&#xff0c;在当前看来最好的解&#xff09;的算法设计策略。它通常用于求解优化问题。这种方…...

鸿蒙OS应用开发之日期选择

前面学习了时间选择组件,实现了时间的选择,这样非常方便用户进行时间的输入,通过手动就可以输入时间,比直接文本输入要省不少时间,特别对于手机这样单手操作的设备,更加重要了。因此,日期的输入工作也不能落后,本文将要学习日期选择组件,这样就可以实现日期通过手上下…...

Mysql 查看表注释或字段注释

查看所有表的注释 SELECT table_name 表名, table_comment 表说明 FROM information_schema.TABLES WHERE table_schema ‘数据库名’ ORDER BY table_name 查询所有表及字段的注释 SELECT a.table_name 表名, a.table_comment 表说明, b.COLUMN_NAME 字段名, b.column_commen…...

MySQL InnoDB引擎

1、逻辑存储结构 2、架构 a. 内存结构 Change Buffer的意义是什么? 与聚集索引不同&#xff0c;二级索引通常是非唯一的&#xff0c;并且以相对随机的顺序插入二级索引。同样&#xff0c;删除和更新可能会影响索引树中不相邻的二级索引页&#xff0c;如果每一次都操作磁盘&am…...

C++完成Query执行sql语句的接口封装和测试

1、在LXMysql.h 创建Query执行函数 //封装 执行sql语句 if sqllen 0 strlen获取字符长度bool Query(const char*sql,unsigned long sqllen0); 2、在LXMysql.cpp编写函数 bool LXMysql::Query(const char* sql, unsigned long sqllen){if (!mysql)//如果mysql没有初始化好{c…...

C:宏:编程风格:井号与define之间的空格

在这一篇中有提到&#xff0c;井号与define之间空格&#xff0c;可能导致搜索上的一些问题。 https://mzhan017.blog.csdn.net/article/details/135289451 今天看到有专门做这个空格的修改&#xff1a; https://sourceware.org/git/?pglibc.git;acommitdiff;hfcf70d4114db9ff…...

django websocket

目录 核心代码 consumers.py from channels.generic.websocket import WebsocketConsumer from channels.exceptions import StopConsumer import datetime import time from asgiref.sync import async_to_sync class ChatConsumer(WebsocketConsumer):def websocket_conne…...

HackTheBox - Medium - Linux - Bagel

Bagel 今天我开始了《Red Team Development and Operations A Practical Guide》的学习&#xff0c;保持学习&#xff0c;后面差不多到时机后就学CRTOⅡ Bagel 是一款中等难度的 Linux 机器&#xff0c;其特点是电子商店容易受到路径遍历攻击&#xff0c;通过该攻击可以获取应…...

Capsolver:解决Web爬虫中CAPTCHA挑战的最优解决方案

Web爬虫已经成为从各种在线来源提取和分析数据的不可或缺的技术。然而&#xff0c;在Web爬取过程中&#xff0c;经常会遇到的一个共同挑战是CAPTCHA。CAPTCHA&#xff08;完全自动化的公共图灵测试&#xff0c;用于区分计算机和人类&#xff09;是一种安全措施&#xff0c;旨在…...

大数据系列之:读取parquet文件统计数据量

大数据系列之&#xff1a;读取parquet文件统计数据量 一、Spark读取parquet文件统计数据量二、parquet-tools统计parquet文件数据量三、实际应用案例 一、Spark读取parquet文件统计数据量 首先&#xff0c;创建一个 SparkSession 对象&#xff1a; val spark SparkSession.b…...

力扣题:字符串变换-1.5

力扣题-1.5 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;482. 密钥格式化 解题思想&#xff1a;首先先将破折号去除,并将所有字母转换为大写,然后计算第一组的长度,进行结果字符串的拼接,如果第一组的长度为0,则需要删除开头的’-符号 class S…...

el-autocomplete远程搜索使用及el-upload上传多个文件流给后端,详情接口返回的是文件地址,前端将文件地址转成文件流,回传文件流给后端

最近遇到一个项目,里面有2个需求我觉得挺常见的,第一个需求是一个表单里,当用户在输入名称后,前端调接口发请求获取到关联名称的企业名称,并展示,然后当用户选中企业后,前端调接口获取选中企业的具体信息,并填充到表单里;第二个需求是,表单里有个上传图片的功能,前端…...

2024年度 ROTS - 实时操作系统 Top 15

RTOS&#xff08;实时操作系统&#xff09;。 这里说的 RTOS 并非新星球大战电影中的机器人&#xff0c;而是物联网设备、航空系统、空中交通管制等背后的无声协调者&#xff0c;就在地球上。 RTOS&#xff0c;或称实时操作系统&#xff0c;设计它们是为了更好的管理资源&…...

苹果怎么同步备忘录?教程来了,干货满满!

在苹果设备中&#xff0c;备忘录是一款非常实用的应用程序&#xff0c;可用于记录日常生活中的各种事项。然而&#xff0c;还有一些小伙伴不知道苹果怎么同步备忘录&#xff0c;这可能会成为他们的一个困扰。别着急&#xff01;本文将详细介绍同步苹果手机备忘录的方法&#xf…...

Nginx(十八) 性能调优之 - 哪些层面可以进行优化

Nginx三大优势&#xff0c;动静分离、反向代理、负载均衡 1、线程 worker 2、http/tcp tcp_nopush tcp_nodelay 3、Buffer 调整请求体缓存区大小、将请求体缓存到一个缓冲区&#xff0c;降低CPU负载 4、连接队列 5、超时时间 6、静态文件缓存 open_file_cache 7、gzip压…...

OpenStack云计算(三)neutron

neutron 介绍&#xff1a; Neutron 概述传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备;而云环境下的网络已经变得非常复杂,特别是在多户场景里,用户随时都可能需要创建、修改和删除网络,网络的连通性和隔离不已经太可能通过手工配置来保证了。 如…...

Linux期末复习笔记

一、管理文件系统 1、文件系统类型 ext2&#xff1a;早期Linux中常用的文件类型。ext3&#xff1a;ext2的升级版&#xff0c;带日志功能。RAMFS&#xff1a;内存文件系统&#xff0c;速度很快。NFS&#xff1a;网络文件系统&#xff0c;由SUM发明&#xff0c;主要用于远程文件…...

PHP实现多继承

php支持多继承吗 不可以,只支持单继承。 可以使用 interface 或 trait 实现 。 实现方法 https://www.php.cn/faq/430197.html https://blog.58heshihu.com/index.php/archives/2288/...

pulsar原来是这样操作topic的

本篇主要讲述pulsar topic部分&#xff0c;主要从设计以及源码的视角进行讲述。在pulsar中&#xff0c;一个Topic的新建、扩容以及删除操作都是由Broker来处理的&#xff0c;而Topic相关的数据是存储在zookeeper上的。本篇文章模拟一个高效的学习流程进行展开 介绍使用方式(To…...

日常工作 经验总结

1,在使用vue2开发项目时,快捷有效的组件化component 若有参数传递时,可以通过这样传递 在component中: 2,上拉加载,下拉刷新 若是使用局部进行上拉加载 下拉刷新 且需要用到scroll-view时 那么需要切记scroll-view在内被mescroll-uni包裹。若场景有限 对于无数据显示…...

【Proteus仿真】【Arduino单片机】水箱液位监控系统

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用LCD1602液晶、按键、蜂鸣器、液位传感器、ADC转换器、水泵等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示当前水位、上下限阈…...

【已解决】若依系统前端打包后,部署在nginx上,点击菜单错误:@/views/system/role/index

​ 上面错误&#xff0c;是因为/views/system/role/index动态路由按需加载时候&#xff0c;错误导致。 解决办法&#xff1a; 如果您的前端项目访问时候&#xff0c;需要带有项目名称的话&#xff0c;参考凯哥上一篇文章&#xff1a;【已解决】若依前后端分离版本&#xff0…...

Java中compareTo方法使用

compareTo方法 1. compareTo方法参数2. compareTo方法返回值3. String类型使用CompareTo方法进行比较 compareTo 是实例方法&#xff0c;只能对象调用。所以不能比较基本类型 1. compareTo方法参数 public int compareTo(参数类型 值) {... }参数类型可以是一个 Byte, Double…...

【霹雳吧啦】手把手带你入门语义分割の番外11:U2-Net 源码讲解(PyTorch)—— 代码的使用

目录 前言 Preparation 一、U2-Net 网络结构图 二、U2-Net 网络源代码 1、train.py &#xff08;1&#xff09;parse_args 参数 &#xff08;2&#xff09;SODPresetTrain 类 &#xff08;3&#xff09;SODPresetEval 类 &#xff08;4&#xff09;main 函数 &#x…...

威尔仕2023年的统计数据

威尔仕健身房更新了2023年的统计数据&#xff0c;大家可以猜一猜我是哪一个称号&#xff1f;虽然小伙伴们的健身时长各有不同&#xff0c;有时候在课程中我也会分享自己健身的案例&#xff0c;看似一个简单的增强环路&#xff0c;旁边会有很多的调节环路来限制增强环路的增长&a…...

Spring——Spring基于注解的IOC配置

基于注解的IOC配置 学习基于注解的IOC配置&#xff0c;大家脑海里首先得有一个认知&#xff0c;即注解配置和xml配置要实现的功能都是一样的&#xff0c;都是要降低程序间的耦合。只是配置的形式不一样。 1.创建工程 1.1 pom.xml <?xml version"1.0" encoding…...

spring常用注解(一)springbean生命周期类

一、PostConstruct&#xff1a; 被PostConstruct修饰的方法会在服务器加载Servlet的时候运行&#xff0c;并且只会被服务器调用一次&#xff0c;类似于servlet的inti()方法。被PostConstruct修饰的方法会在构造函数之后&#xff0c;init()方法之前运行。...

【软件测试】2024年准备中/高级测试岗技术面试...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、软件测试基础知…...

第11课 实现桌面与摄像头叠加

在上一节&#xff0c;我们实现了桌面捕获功能&#xff0c;并成功把桌面图像和麦克风声音发送给对方。在实际应用中&#xff0c;有时候会需要把桌面与摄像头图像叠加在一起发送&#xff0c;这节课我们就来看下如何实现这一功能。 1.备份与修改 备份demo10并修改demo10为demo11…...

动态网站与静态网站的区别/农产品推广方案

Inventory是什么 Inventory 文件主要用来填写被管理主机以及主机组信息&#xff0c;&#xff08;逻辑上定义&#xff09;&#xff0c;默认Inventory文件为/etc/ansible/hosts。 当然也可以自定义一个文件&#xff0c;当执行 ansible 命令时使用-i选项指定 Inventory 文件位置。…...

网站ftp根目录/百度广告推广费用

springboot利用druid和mybatis批量数据写入clickhouse时&#xff0c;刚开始的时候&#xff0c;完全按照mysql的写法&#xff0c;出现无法写入的问题。经过不断的尝试&#xff0c;发现所使用的驱动包&#xff0c;驱动类配置以及sql写法上都需要特别注意&#xff0c;不然批量写入…...

博客个人目录wordpress/网络优化工程师工资

文章目录一、题目1、题目描述2、基础框架3、原题链接二、解题报告1、思路分析2、时间复杂度3、代码详解三、本题小知识四、加群须知一、题目 1、题目描述 给你一个下标从 000 开始的整数数组 nums&#xff0c;该数组由 互不相同 的数字组成。另给你两个整数 start和 goal。 整…...

北京网站建设公司册/电商运营入门基础知识

路径&#xff1a;在顶部菜单栏小眼睛按钮 全局变量跟环境变量作用域不同。全局变量不受当前环境的影响&#xff0c;只要是在同一个项目下&#xff0c;该变量都会生效 环境变量和全局变量的调用方法都是一样的 {{变量名}} 定义 目前通过脚本定义全局变量&#xff08;由预/后执…...

做网站要服务器吗/seo研究协会

说明&#xff1a;操作系统&#xff1a;CentOS 6.5 64位需求&#xff1a;编译安装LAMP运行环境各软件版本如下&#xff1a;MySQL&#xff1a;mysql-5.1.73Apache&#xff1a;httpd-2.2.31PHP&#xff1a;php-5.2.17具体操作&#xff1a;准备篇一、配置防火墙&#xff0c;开启80端…...

wordpress4.9下载/推广一般收多少钱

1. public interface xxx 定义注解 public interface xxx 定义接口 interface和interface是完全不一样的&#xff0c;两码事 http://bbs.csdn.net/topics/380077509...