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

React 全栈体系(十五)

第八章 React 扩展

一、setState

1. 代码

/* index.jsx */
import React, { Component } from 'react'export default class Demo extends Component {state = {count:0}add = ()=>{//对象式的setState/* //1.获取原来的count值const {count} = this.state//2.更新状态this.setState({count:count+1},()=>{console.log(this.state.count);})//console.log('12行的输出',this.state.count); //0 *///函数式的setStatethis.setState( state => ({count:state.count+1}))}render() {return (<div><h1>当前求和为:{this.state.count}</h1><button onClick={this.add}>点我+1</button></div>)}
}

2. 总结

  • setState 更新状态的 2 种写法
(1). setState(stateChange, [callback])------对象式的setState1.stateChange为状态改变对象(该对象可以体现出状态的更改)2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用(2). setState(updater, [callback])------函数式的setState1.updater为返回stateChange对象的函数。2.updater可以接收到state和props。4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:1.对象式的setState是函数式的setState的简写方式(语法糖)2.使用原则:(1).如果新状态不依赖于原状态 ===> 使用对象方式(2).如果新状态依赖于原状态 ===> 使用函数方式(3).如果需要在setState()执行后获取最新的状态数据,要在第二个callback函数中读取

二、lazyLoad

1. 代码

/* index.jsx */
import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'// import Home from './Home'
// import About from './About'import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))export default class Demo extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Suspense fallback={<Loading/>}>{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/></Suspense></div></div></div></div></div>)}
}
/* Loading/index.jsx */
import React, { Component } from 'react'export default class Loading extends Component {render() {return (<div><h1 style={{backgroundColor:'gray',color:'orange'}}>Loading....</h1></div>)}
}

2. 总结

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}><Switch><Route path="/xxx" component={Xxxx}/><Redirect to="/login"/></Switch>
</Suspense>

三、Hooks

1. React Hook/Hooks 是什么?

  • Hook 是 React 16.8.0 版本增加的新特性/新语法
  • 可以让你在函数组件中使用 state 以及其他的 React 特性

2. 三个常用的 Hook

  • State Hook: React.useState()
  • Effect Hook: React.useEffect()
  • Ref Hook: React.useRef()

3. stateHook

请添加图片描述
请添加图片描述

3.1 代码
/* src/App.jsx */
import React from "react";function Demo() {const [count, setCount] = React.useState(0);const [name, setName] = React.useState("tom");//加的回调function add() {//setCount(count+1) //第一种写法setCount((count) => count + 1);}function changeName() {setName("jack");}return (<div><h2>当前求和为:{count}</h2><h2>我的名字是:{name}</h2><button onClick={add}>点我+1</button><button onClick={changeName}>点我改名</button></div>);
}export default Demo;
3.2 总结
(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)
(3). useState()说明:参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

4. EffectHook

4.1 代码
/* src/App.jsx */
import React from "react";
import ReactDOM from "react-dom";function Demo() {const [count, setCount] = React.useState(0);React.useEffect(() => {let timer = setInterval(() => {setCount((count) => count + 1);}, 1000);return () => {clearInterval(timer);};});//加的回调function add() {//setCount(count+1) //第一种写法setCount((count) => count + 1);}//卸载组件的回调function unmount() {ReactDOM.unmountComponentAtNode(document.getElementById("root"));}return (<div><h2>当前求和为:{count}</h2><button onClick={add}>点我+1</button><button onClick={unmount}>卸载组件</button></div>);
}export default Demo;
4.2 总结
(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:发ajax请求数据获取设置订阅 / 启动定时器手动更改真实DOM
(3). 语法和说明:useEffect(() => {// 在此可以执行任何带副作用操作return () => { // 在组件卸载前执行// 在此做一些收尾工作, 比如清除定时器/取消订阅等}}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行(4). 可以把 useEffect Hook 看做如下三个函数的组合componentDidMount()componentDidUpdate()componentWillUnmount()

5. RefHook

请添加图片描述

5.1 代码
/* src/App.jsx */
import React from "react";
import ReactDOM from "react-dom";//类式组件
/* class Demo extends React.Component {state = {count:0}myRef = React.createRef()add = ()=>{this.setState(state => ({count:state.count+1}))}unmount = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById('root'))}show = ()=>{alert(this.myRef.current.value)}componentDidMount(){this.timer = setInterval(()=>{this.setState( state => ({count:state.count+1}))},1000)}componentWillUnmount(){clearInterval(this.timer)}render() {return (<div><input type="text" ref={this.myRef}/><h2>当前求和为{this.state.count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.unmount}>卸载组件</button><button onClick={this.show}>点击提示数据</button></div>)}
} */function Demo() {//console.log('Demo');const [count, setCount] = React.useState(0);const myRef = React.useRef();React.useEffect(() => {let timer = setInterval(() => {setCount((count) => count + 1);}, 1000);return () => {clearInterval(timer);};}, []);//加的回调function add() {//setCount(count+1) //第一种写法setCount((count) => count + 1);}//提示输入的回调function show() {alert(myRef.current.value);}//卸载组件的回调function unmount() {ReactDOM.unmountComponentAtNode(document.getElementById("root"));}return (<div><input type="text" ref={myRef} /><h2>当前求和为:{count}</h2><button onClick={add}>点我+1</button><button onClick={unmount}>卸载组件</button><button onClick={show}>点我提示数据</button></div>);
}export default Demo;
5.2 总结
(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样

四、Fragment

1. 使用

<Fragment><Fragment>
<></>

2. 作用

可以不用必须有一个真实的 DOM 根标签了

3. 代码

/* index.jsx */
import React, { Component,Fragment } from 'react'export default class Demo extends Component {render() {return (<Fragment key={1}><input type="text"/><input type="text"/></Fragment>)}
}

相关文章:

React 全栈体系(十五)

第八章 React 扩展 一、setState 1. 代码 /* index.jsx */ import React, { Component } from reactexport default class Demo extends Component {state {count:0}add ()>{//对象式的setState/* //1.获取原来的count值const {count} this.state//2.更新状态this.set…...

【逆向】(c++)分析pe结构,拉伸pe结构,缩小pe结构

建议大家认认真真写一遍&#xff0c;收获蛮大的&#xff0c;是可以加深对pe结构的理解&#xff0c;尤其是对指针的使用&#xff0c;和对win32的一些宏的定义的理解和使用。 #include <windows.h> #include <iostream> #include <string>using namespace std…...

PyTorch实战:常用卷积神经网络搭建结构速览

目录 前言 常用卷积神经网络 1.AlexNet 2.VGGNet 3.GoogLeNet 4.ResNet 总览 前言 PyTorch可以说是三大主流框架中最适合初学者学习的了&#xff0c;相较于其他主流框架&#xff0c;PyTorch的简单易用性使其成为初学者们的首选。这样我想要强调的一点是&#xff0c;框架…...

排序算法之【快速排序】

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…...

声明式调用 —— SpringCloud OpenFeign

Feign 简介 Spring Cloud Feign 是一个 HTTP 请求调用的轻量级框架&#xff0c;可以以 Java 接口注解的方式调用 HTTP 请求&#xff0c;而不用通过封装 HTTP 请求报文的方式直接调用 Feign 通过处理注解&#xff0c;将请求模板化&#xff0c;当实际调用的时候传入参数&#x…...

LuatOS-SOC接口文档(air780E)-- fota - 底层固件升级

fota.init(storge_location, len, param1)# 初始化fota流程 参数 传入值类型 解释 int/string fota数据存储的起始位置 如果是int&#xff0c;则是由芯片平台具体判断 如果是string&#xff0c;则存储在文件系统中 如果为nil&#xff0c;则由底层决定存储位置 int 数据存…...

第二章 Introduction

Armv8.4 架构引入了在安全状态下的虚拟化扩展。Arm SMMU v3.2 架构 [1] 增加了对安全流的第二阶段翻译的支持&#xff0c;以补充 Armv8.4 PE 中的安全 EL2 翻译体制。这些架构特性使得可以在安全状态下将彼此不信任的软件组件隔离开来。隔离是实现最小权限原则的机制&#xff1…...

WebGL 渲染三维图形作为纹理贴到另一个三维物体表面

目录 渲染到纹理 帧缓冲区对象和渲染缓冲区对象 帧缓冲区对象 帧缓冲区对象的结构 如何实现渲染到纹理 示例程序&#xff08;FramebufferObject.js&#xff09; 创建帧缓冲区对象&#xff08;gl.createFramebuffer&#xff08;&#xff09;&#xff09; gl.createFra…...

国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄

国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄 国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄...

Source Insight 工具栏图标功能介绍

这篇文章并不介绍 Source Insight 的具体使用方法&#xff0c;这类教程网上有很多&#xff0c;这里只分析 Souce Insight 工具栏图标的功能。 文章目录 Source Insight 简介Souce Insight 工具栏文件操作新建&#xff08;CtrlN&#xff09;打开&#xff08;CtrlO&#xff09;保…...

模板与泛型编程-函数模板

本专栏由于缺少函数模板专题,我本以为这个不用讲解,但由于某些同学基础比较薄弱,特地在此补充一下。 函数模板的定义一般都在头文件中。 一、如何定义一个模板函数 下面是一个求和函数 template<typename T,typename U> auto Add(T a, U b) {return a + b; }int...

了解ActiveMQ、RabbitMQ、RocketMQ和Kafka的特点

ActiveMQ ActiveMQ是一种基于JMS&#xff08;Java消息服务&#xff09;规范的消息中间件&#xff0c;由Apache基金会开发和维护 核心组件和特点&#xff1a; Broker&#xff08;代理&#xff09;&#xff1a;ActiveMQ的核心组件是Broker&#xff0c;它负责接收、存储和路由消息…...

第七章 用户和组管理

7.1 Linux中的用户和组的分类 用户类别 超级用户&#xff08;0&#xff09; root 系统用户(1-999) 一般用户(1000-60000) 组类别 管理组 root 基本组&#xff08;默认组/主组&#xff09; 附加组&#xff08;额外组&#xff09; 7.2 用户管理 7.2.1 添加新用户 语法 useradd 【…...

给奶牛做直播之三

​一、前言 上一篇给牛奶做直播之二 主要讲用RTMP搭建点播服务器&#xff0c;整了半天直播还没上场&#xff0c;今天不讲太多理论的玩意&#xff0c;奶牛今天放假了也不出场&#xff0c;就由本人亲自上场来个直播首秀&#xff0c;见下图&#xff0c;如果有兴趣的话&#xff0…...

【Java 进阶篇】MySQL 数据控制语言(DCL):管理用户权限

MySQL 是一个强大的关系型数据库管理系统&#xff0c;提供了丰富的功能和选项来管理数据库和用户。数据库管理员&#xff08;DBA&#xff09;通常使用数据控制语言&#xff08;Data Control Language&#xff0c;简称 DCL&#xff09;来管理用户的权限和访问。 本文将详细介绍…...

WPF 03

staticResource和dynamicResource的区别 首先看一个案例 MainWindow.xaml <Window x:Class"WpfDay03.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml&quo…...

Android 使用kotlin+注解+反射+泛型实现MVP架构

一&#xff0c;MVP模式的定义 ①Model&#xff1a;用于存储数据。它负责处理领域逻辑以及与数据库或网络层的通信。 ②View&#xff1a;UI层&#xff0c;提供数据可视化界面&#xff0c;并跟踪用户的操作&#xff0c;以便通知presenter。 ③Presenter&#xff1a;从Model层获…...

数据结构——堆(C语言)

本篇会解决一下几个问题&#xff1a; 1.堆是什么&#xff1f; 2.如何形成一个堆&#xff1f; 3.堆的应用场景 堆是什么&#xff1f; 堆总是一颗完全二叉树堆的某个节点总是不大于或不小于父亲节点 如图&#xff0c;在小堆中&#xff0c;父亲节点总是小于孩子节点的。 如图&a…...

B058-SpringBoot

目录 springboot概念与作用入门案例springboot运行方式热部署配置文件Profile多环境支持整合测试-springboot-testSpringboot-web1.返回json数据2.返回页面&#xff08;模板技术&#xff09;thymeleaf1.导入thymeleaf依赖2.模板文件3.controller4.启动类 SSM整合1.导包2.项目目…...

龙迅LT9611UXC 2PORT MIPICSI/DSI转HDMI(2.0)转换器+音频,内置MCU

龙迅LT9611UXC 1.描述&#xff1a; LT9611UXC是一个高性能的MIPI DSI/CSI到HDMI2.0转换器。MIPI DSI/CSI输入具有可配置的单 端口或双端口&#xff0c;1高速时钟通道和1~4高速数据通道&#xff0c;最大2Gbps/通道&#xff0c;可支持高达16Gbps的总带 宽。LT9611UXC支持突发…...

STM32存储左右互搏 I2C总线读写FRAM MB85RC1M

STM32存储左右互搏 I2C总线读写FRAM MB85RC1M 在较低容量存储领域&#xff0c;除了EEPROM的使用&#xff0c;还有铁电存储器FRAM的使用&#xff0c;相对于EEPROM, 同样是非易失性存储单元&#xff0c;FRAM支持更高的访问速度&#xff0c; 其主要优点为没有EEPROM持续写操作跨页…...

1340. 跳跃游戏 V;2039. 网络空闲的时刻;2767. 将字符串分割为最少的美丽子字符串

1340. 跳跃游戏 V 核心思想&#xff1a;动态规划记忆化搜索。定义dfs(i)&#xff0c;表示从i开始最多可以访问多少个下标&#xff0c;然后统计往左跳和往右边跳的最大值&#xff0c;思路其实比较简单&#xff0c;但是代码我感觉还是不太好想。 2039. 网络空闲的时刻 核心思想…...

ElementUI之CUD+表单验证

目录 前言&#xff1a; 增删改查 表单验证 前言&#xff1a; 继上篇博客来写我们的增删改以及表单验证 增删改查 首先先定义接口 数据样式&#xff0c;我们可以去elementUI官网去copy我们喜欢的样式 <!-- 编辑窗体 --><el-dialog :title"title" :visib…...

Linux:nginx---web文件服务器

我这里使用的是centos7系统 nginx源码包安装 Linux&#xff1a;nginx基础搭建&#xff08;源码包&#xff09;_鲍海超-GNUBHCkalitarro的博客-CSDN博客https://blog.csdn.net/w14768855/article/details/131445878?ops_request_misc%257B%2522request%255Fid%2522%253A%25221…...

go 端口转发 代理V2 --chatGPT

问&#xff1a;broker(localPort, targetPort), 实现远程访问localPort的http代理转发到目标机器 gpt: 要实现一个简单的 HTTP 代理服务器&#xff0c;你可以使用 Go 的 net/http 包来处理 HTTP 请求和响应。以下是一个示例&#xff0c;演示如何创建一个 HTTP 代理服务器将本地…...

idea环境下如何打包可运行jar?

工作中有时候偶尔写一些工具类、小程序&#xff0c;可是java程序员制作一个可运行jar实在折腾&#xff0c;利用idea开发环境&#xff0c;可以快速打包自己的可运行jar。具体怎么操作呢&#xff1f; 创建一个空白的java项目并完成自己的程序开发 完成java代码&#xff1a; /**…...

基于FFmpeg的Android播放器

基于FFmpeg的Android播放器 文章目录 基于FFmpeg的Android播放器1. 前言2. 编译相关组件库3. 解码器4. 解码流程5. 音频输出6. 视频输出&#xff08;需要优化&#xff09; 1. 前言 FFmpeg是一个最有名的开源的编解码库&#xff0c;实现了通常的编解码逻辑。它还能够根据平台特…...

osgPBR(十五)镜面IBL--查看不同级别的HDR环境贴图

首先&#xff0c;设置可以使用Mipmap&#xff0c;启用三线性过滤&#xff0c;设置最大级别和最小级别 osg::ref_ptr<osg::TextureCubeMap> tcm new osg::TextureCubeMap; tcm->setTextureSize(128, 128);tcm->setFilter(osg::Texture::MIN_FILTER, osg::Texture:…...

Docker的学习记录

Docker是一个被广泛使用的开源容器引擎&#xff0c;基于Go语言&#xff0c;遵从Apache2.0协议开源。 docker的三个概念&#xff1a;容器、镜像和仓库。 镜像&#xff08;Image&#xff09;&#xff1a;镜像是Docker中的一个模板。通过 Docker镜像 来创建 Docker容器&#xff…...

Android Jetpack组件架构:ViewModel的原理

Android Jetpack组件架构&#xff1a;ViewModel的原理 导言 本篇文章是关于介绍ViewModel的&#xff0c;由于ViewModel的使用还是挺简单的&#xff0c;这里就不再介绍其的基本应用&#xff0c;我们主要来分析ViewModel的原理。 ViewModel的生命周期 众所周知&#xff0c;一般…...

网站建设公司官网/舆情管理

1 docker数据卷之docker volume2 3 docker中数据卷其实就类似于虚拟机的虚拟磁盘&#xff0c;在虚拟机的虚拟磁盘的使用过程中&#xff0c;我们可以将本地的磁盘文件或目录挂载4 到这个虚拟磁盘上&#xff0c;从而完成对本机数据的读写。5 6 7 docker数据卷的创建可以在创建这个…...

东莞网站搜索排名/百度seo新站优化

原创 标题&#xff1a;第几天 2000年的1月1日&#xff0c;是那一年的第1天。 那么&#xff0c;2000年的5月4日&#xff0c;是那一年的第几天&#xff1f; 注意&#xff1a;需要提交的是一个整数&#xff0c;不要填写任何多余内容。 这题是送分题&#xff0c;只需要注意一下2000…...

北京网站备案拍照地址鼓楼/seo深度解析

俗话说&#xff1a;技多不压身&#xff0c;功到自然成。本期 fir.im Weekly 收集的热度资源&#xff0c;大部分关于Android、iOS 开发工具和源码&#xff0c;还有一些有关设计的 Tips &#xff0c;希望对你有帮助。 给女朋友的 iOS 开发教程之 Design 篇 周楷雯Kevin 录制了一系…...

深圳网页设计培训机构/郑州网站排名优化公司

局部性一个计算机程序常常具备良好的局部性。其含义是程序在未来总是倾向于访问那些最近使用过的数据周围附近的数据&#xff0c;或者是引用那个最近使用的数据本身。这就是局部性原理。 局部性通常包含两种形式&#xff1a; ①&#xff1a;时间局部性&#xff1a;一个被引用的…...

室内装修设计上海/深圳知名seo公司

二值化核心思想 设阈值&#xff0c;大于阈值的为0&#xff08;黑&#xff09;或255&#xff08;白&#xff09;&#xff0c;使图像成为黑白图。 阈值可固定&#xff0c;也可自适应阈值。 自适应阈值一般为一点像素与这点为中心的区域像素平均值或者高斯分布加权和的比较&#x…...

wordpress看板猫/网站推广与优化方案

题目描述 矩阵对角线 是一条从矩阵最上面行或者最左侧列中的某个元素开始的对角线&#xff0c;沿右下方向一直到矩阵末尾的元素。例如&#xff0c;矩阵 mat 有 6 行 3 列&#xff0c;从 mat[2][0] 开始的 矩阵对角线 将会经过 mat[2][0]、mat[3][1] 和 mat[4][2] 。 给你一个…...