【15】基础知识:React扩展知识

一、setState

1. setState 更新状态的 2 种写法

对象式的 setState

语法:setState(stateChange, [callback])

(1)stateChange 为状态改变对象(该对象可以体现出状态的更改)

(2)callback 是可选的回调函数,它在状态更新完毕、界面也更新后(render调用后)才被调用

函数式的 setState

语法: setState(updater, [callback])

(1)updater 为返回 stateChange 对象的函数

(2)updater 可以接收到 state 和 props

(3)callback 是可选的回调函数,它在状态更新完毕、界面也更新后(render调用后)才被调用

2、总结

对象式的 setState 是函数式的 setState 的简写方式(语法糖)

使用原则:

(1)如果新状态不依赖于原状态 ===> 使用对象方式

(2)如果新状态依赖于原状态 ===> 使用函数方式

(3)如果需要在 setState() 执行后获取最新的状态数据,要在第二个 callback 函数中读取

二、路由组件的 lazyLoad

1、通过 React 的 lazy 函数配合 import() 函数动态加载路由组件,路由组件代码会被分开打包

import React, { Component, lazy, Suspense } from 'react'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

(1)State Hook:React.useState()

(2)Effect Hook:React.useEffect()

(3)Ref Hook:React.useRef()

3、State Hook

(1)State Hook 让函数组件也可以有 state 状态,并进行状态数据的读写操作

(2)语法:const [xxx, setXxx] = React.useState(initValue)

(3)useState() 说明

参数,第一次初始化指定的值在内部作缓存

返回值,包含两个元素的数组,第一个为内部当前状态值,第二个为更新状态值的函数

(4)setXxx() 的二种写法

setXxx(newValue):参数为非函数值,直接指定新的状态值,内部用其覆盖原来的状态值

setXxx(value => newValue):参数为函数,接收原本的状态值,返回新的状态值,内部用其覆盖原来的状态值

4、Effect Hook

(1) Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

(2)React中的副作用操作:发ajax 请求数据获取、设置订阅 、启动定时器、 手动更改真实DOM

(3)语法和说明

useEffect(() => { // 在此可以执行任何带副作用操作return () => { // 在组件卸载前执行// 在此做一些收尾工作, 比如清除定时器/取消订阅等}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次 render() 后执行;不写,检测所有state的变化;

(4)可以把 useEffect Hook 看做如下三个函数的组合

componentDidMount()、componentDidUpdate()、componentWillUnmount()

5、Ref Hook

(1)Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其它数据

(2)语法:const refContainer = useRef()

(3)作用:保存标签对象,功能与 React.createRef() 一样

四、Fragment

1、使用

Fragment 允许写 key 值(只能写 key,不能写其他的),<> 不允许写任何属性

<Fragment><Fragment><></>

2、作用

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

五、Context

1、理解

一种组件间通信方式,常用于【祖组件】与【后代组件】间通信

在应用开发中一般不用 context,一般都用它的封装 react 插件

2、使用

(1)创建Context容器对象:

const XxxContext = React.createContext() 

(2)渲染子组时,外面包裹 Provider,通过 value 属性给后代组件传递数据

<Provider value={数据}>子组件
</Provider>

(3)后代组件读取数据:

第一种方式:仅适用于类组件

static contextType = xxxContext  // 声明接收context
this.context // 读取 context 中的 valu e数据

第二种方式:函数组件与类组件都可以

<Consumer>{value => ( // value 就是 context 中的 value 数据要显示的内容)}
</Consumer>
<Consumer>{ value => `${value.username},年龄是${value.age}` }
</Consumer>

六、组件优化

1、 Component 的 两个问题

只要执行 setState(),即使不改变状态数据,组件也会重新 render() ==> 效率低

只当前组件重新 render(),就会自动重新 render 子组件,即使子组件没有用到父组件的任何数据 ==> 效率低

原因

Component 中的 shouldComponentUpdate() 总是返回 true

2、解决方法

效率高的做法

只有当组件的 state 或 props 数据发生改变时才重新 render()

办法1:

重写 shouldComponentUpdate() 方法

比较新旧 state 或 props 数据,如果有变化才返回 true,如果没有返回 false

// 重写 shouldComponentUpdate 优化 render 效率问题 (比较麻烦:数据多时每个都要判断、每个组件都需要判断)
shouldComponentUpdate(nextProps, nextState) {console.log('parent', this.props, this.state) // 目前的 props 和 stateconsole.log('parent', nextProps, nextState) // 接下要变化的目标 props,目标 statereturn !(this.state.carName === nextState.carName)
}

办法2:

使用 PureComponent

PureComponent 重写了 shouldComponentUpdate(),只有 state 或 props 数据有变化才返回true

注意:

PureComponent 只是进行 state 和 props 数据的浅比较

如果是数据对象内部数据变了,PureComponent 会认为数据没有改变,不会执行 render 方法,不要直接修改 state 数据,而是要产生新数据

项目中一般使用 PureComponent 来优化

import React, { PureComponent } from 'react'export default class Parent extends PureComponent {...
}

七、render props

1、如何向组件内部动态传入带内容的结构(标签)?

Vue 中
使用 slot 技术,也就是通过组件标签体传入结构 <A><B/></A>

React 中:

使用 children props:通过组件标签体传入结构

使用render props:通过组件标签属性传入结构,而且可以携带数据,一般用render函数属性

2、children props

存在问题,如果 B 组件需要 A 组件内的数据,做不到

<A><B>xxxx</B>
</A>
{this.props.children}

3、render props

<A render={data => <C data={data}></C>}></A>// A组件:{this.props.render(内部state数据)}
// C组件:读取 A 组件传入的数据显示 {this.props.data} 

八、错误边界

1、理解

错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面;只适用于生产模式,开发环境出现一瞬间,之后错误还是会出现

2、特点

只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

3、使用方式

getDerivedStateFromError 配合 componentDidCatch

// 生命周期函数,一旦后台组件报错,就会触发
static getDerivedStateFromError(error) {console.log(error)// 在 render 之前触发,返回新的 statereturn {hasError: true,}
}componentDidCatch(error, info) {// 统计页面的错误;发送请求发送到后台去console.log(error, info)
}

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

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

相关文章

Python之旅----判断语句

布尔类型和比较运算符 布尔类型 布尔类型的定义 布尔类型的字面量&#xff1a; True 表示真&#xff08;是、肯定&#xff09; False 表示假 &#xff08;否、否定&#xff09; 也就是布尔类型进行判断&#xff0c;只会有2个结果&#xff1a;是或否 定义变量存储布尔类型…

天猫店铺商品评论数据采集,天猫商品评论数据接口,天猫API接口

天猫店铺商品评论数据接口可以获取到商品ID&#xff0c;商品标题&#xff0c;商品优惠券&#xff0c;商品到手价&#xff0c;商品价格&#xff0c;商品优惠价&#xff0c;商品sku属性&#xff0c;商品图片&#xff0c;商品视频&#xff0c;商品sku属性图片&#xff0c;商品属性…

【esp32】arduino-数码管

一、数码管类型 按发光二极管单元连接方式分为共阳型数码管和共阴型数码管&#xff0c; 区分:1、可通过查看数码管引脚类型 2、观察数码管点亮状态 3、查询数码管规格表 二、共阳型数码管 是指将所有发光二极管的阳极接到一起形成公共阳极&#xff08;COM)的数码管 三、共…

Chrome跨域访问网络请求Cookies丢失的解决办法

为了保障网络安全,Chrome对跨域访问有一定的限制。一般分为三级: cookies带有“SameSite=Strict”时,只允许访问同一个域名下的网络请求;cookies带有“SameSite=Lax”时,允许访问同一个域名下的网络请求和同一个根域名下的网络请求;cookies带有“SameSite=None”时,允许…

ant中的environment属性

在ant的配置文件中&#xff0c;可以设置属性environment的值&#xff0c;设置的这个值就作为访问环境变量的前缀。例如声明了environment“env”&#xff0c;那么就可以通过env.<环境变量名称>来访问环境变量。 例如创建了一个Java工程&#xff0c;在工程目录下有一个bu…

HCIA --- VLAN实验配置

一、各交换机上配置&#xff1a; 1、各交换机上创建VLAN 2、交换机上的各个接口划分到对应的VLAN中 3、将与交换机、路由器相连的接口创建trunk干道 SW1&#xff1a; [sw1]vlan batch 2 to 3 批量创建VLAN2-3 [sw1]interface Ethernet0/0/1 单独将某个接口划分到对应…

信息保卫战:揭秘迅软DSE护航企业免受泄密之害

随着网络技术的发展&#xff0c;通过网络应用如网盘、网页、邮件、即时通讯工具传输分享文件变得越来越多&#xff0c;这些工具传输速度快&#xff0c;能够将大容量的文档快速传送给他人&#xff0c;在工作中受到许多人的青睐。 然而由这些传输工具引发的泄密事件也不断增多&am…

【农业生产系统模型】基于R语言APSIM模型进阶应用与参数优化、批量模拟实践技术

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…

SQL Server 修改、删除表中数据

SQL Server 修改、删除表中数据 修改 SQL Server修改表中数据的关键字是update&#xff08;更新;使现代化;向…提供最新信息;给…增加最新信息&#xff09; 修改表中信息 语法 update 表名 set 字段1值1&#xff0c;字段值2 where 条件1 and 条件2给表中所有人加工资&…

前后端交互—Ajax基础

Ajax 代码下载 URL地址 URL(全称是UniformResourceLocator)中文叫统一资源定位符&#xff0c;用于标识互联网上每个资源的唯一存放位置。 浏览器只有通过URL地址&#xff0c;才能正确定位资源的存放位置&#xff0c;从而成功访问到对应的资源。常见的URL举例: http://www.ba…

视频怎么压缩?视频太大这样处理变小

在当今时代&#xff0c;视频已经成为了我们日常生活中不可或缺的一部分&#xff0c;然而&#xff0c;视频文件往往非常大&#xff0c;给我们的存储和传输带来了很大的不便&#xff0c;那么&#xff0c;如何有效地压缩视频呢&#xff1f; 一、使用压缩软件 首先我们给大家分享一…

供应商工厂突发爆炸,日本丰田7座工厂停工 | 百能云芯

根据日本共同社的最新报导&#xff0c;日本著名汽车制造商丰田汽车近期遭遇了一系列生产中断问题。这次生产中断的根本原因在于供应商公司发生了一起爆炸事件&#xff0c;导致零部件供应链受到了严重干扰&#xff0c;迫使丰田暂时停工。截至目前&#xff0c;这一事件已经影响了…

【触想智能】工业级触摸显示器的分类与应用分享

工业级触摸显示器是具有触摸功能的工业显示器&#xff0c;常见的触摸方式有电容触摸和电阻触摸。它是应用在工业上的设备&#xff0c;和普通的显示器有着很大的区别。 工业级触摸显示器由液晶触摸屏、功能主板、外壳三部分组成&#xff0c;结构用料一般都采用铝合金材质&#x…

配电房无人值守方案

随着科技的不断进步&#xff0c;许多传统需要人工操作和维护的领域逐渐被自动化和智能化方案所替代。配电房作为电力供应的核心部分&#xff0c;也面临着同样的变革。 力安科技电易云配电室无人值守监控系统以智能物联数据采集和智能物联管控"为关键&#xff0c;通过加…

自动化测试必会之数据驱动测试

数据驱动测试 在实际的测试过程中&#xff0c;我们会发现好几组用例都是相同的操作步骤&#xff0c;只是测试数据的不同&#xff0c;而我们往往需要编写多次用例来进行测试&#xff0c;此时我们可以利用数据驱动测试来简化该种操作。 参数化&#xff1a; 输入数据的不同从而产…

Linux性能优化--性能工具:特定进程内存

5.0 概述 本章介绍的工具使你能诊断应用程序与内存子系统之间的交互&#xff0c;该子系统由Linux内核和CPU管理。由于内存子系统的不同层次在性能上有数量级的差异&#xff0c;因此&#xff0c;修复应用程序使其有效地使用内存子系统会对程序性能产生巨大的影响。 阅读本章后&…

【0day】复现海康威视综合安防管理平台信息泄露(内网集权账户密码)漏洞

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

反转链表(java)

大家好我是苏麟今天说一说链表常见的简单题目 . BM1 反转链表 牛客BM1 反转链表 : 描述 : 给定一个单链表的头结点(该头节点是有值的&#xff0c;比如在下图&#xff0c;它的val是1)&#xff0c;长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。 分析 : …

安装thinkphp6并使用多应用模式,解决提示路由不存在解决办法

1. 安装稳定版tp框架 composer create-project topthink/think tptp是安装完成的目录名称 &#xff0c;可以根据自己需要修改。 如果你之前已经安装过&#xff0c;那么切换到你的应用根目录下面&#xff0c;然后执行下面的命令进行更新&#xff1a; composer update topthin…

一百九十、Hive——Hive刷新分区MSCK REPAIR TABLE

一、目的 在用Flume采集Kafka中的数据直接写入Hive的ODS层静态分区表后&#xff0c;需要刷新表&#xff0c;才能导入分区和数据。原因很简单&#xff0c;就是Hive表缺乏分区的元数据 二、实施步骤 &#xff08;一&#xff09;问题——在Flume采集Kafka中的数据写入HDFS后&am…