web应用课——（第五讲：React）

目录

一、配置环境

二、ES6语法补充

三、Components

四、组合Components

五、路由

六、Redux

一、配置环境

感谢z神（zst_2001）的分享：

  • git下载与安装
  • Node.js下载与安装
  • React下载与安装

二、ES6语法补充

  • 使用bind()函数绑定this取值，在JavaScript中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。
const person = {name: "yxc",talk: function() {console.log(this);}
}person.talk();const talk = person.talk;
talk();运行结果：
{name: 'yxc', talk: ƒ}
Window
  • bind()函数，可以绑定this的取值。（例如：const talk = person.talk.bind(person);）
  • 箭头函数的简写方式
const f = (x) => {return x * x;
};可以简写为：
const f = x => x * x;
  • 箭头函数不重新绑定this的取值
const person = {talk: function() {setTimeout(function() {console.log(this);}, 1000);}
};person.talk();  // 输出Window
const person = {talk: function() {setTimeout(() => {console.log(this);}, 1000);}
};person.talk();  // 输出 {talk: f}
  • 对象的解构
const person = {name: "yxc",age: 18,height: 180,
};const {name : nm, age} = person;  // nm是name的别名
  • 数组和对象的展开
let a = [1, 2, 3];
let b = [...a];  // b是a的复制
let c = [...a, 4, 5, 6];
const a = {name: "yxc"};
const b = {age: 18};
const c = {...a, ...b, height: 180};
Named 与 Default exports
Named Export：可以export多个，import的时候需要加大括号，名称需要匹配
Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名

三、Components

  • 1.创建项目
创建项目box-app：create-react-app box-app
cd box-app
npm start
  • 2.安装bootstrap库：
npm i bootstrap
bootstrap的引入方式：import 'bootstrap/dist/css/bootstrap.css';
  • 3.创建Component
  • 4.创建按钮：当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。
  • 5.内嵌表达式：JSX中使用{}嵌入表达式。
  • 6.设置属性：class -> className。CSS属性：background-color -> backgroundColor，其它属性类似
  • 7.数据驱动改变Style
  • 8.渲染列表：使用map函数。每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。
  • 9.Conditional Rendering：利用逻辑表达式的短路原则。与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值
  • 10.绑定事件：注意妥善处理好绑定事件函数的this
  • 11.修改state：需要使用this.setState()函数。每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。
  • 12.给事件函数添加参数

四、组合Components

  1. 创建Boxes组件：Boxes组件中包含一系列Box组件。
  2. 从上往下传递数据：通过this.props属性可以从上到下传递数据。
  3. 传递子节点：通过this.props.children属性传递子节点
  4. 从下往上调用函数：注意：每个组件的this.state只能在组件内部修改，不能在其他组件内修改。
  5. 每个维护的数据仅能保存在一个this.state中：不要直接修改this.state的值，因为setState函数可能会将修改覆盖掉。
  6. 创建App组件（包含：导航栏组件和Boxes组件。）（注意：：要将多个组件共用的数据存放到最近公共祖先的this.state中。）
  7. 无状态函数组件：当组件中没有用到this.state时，可以简写为无状态的函数组件。函数的传入参数为props对象
  8. 组件的生命周期：
  • Mount周期，执行顺序：constructor() -> render() -> componentDidMount()
  • Update周期，执行顺序：render() -> componentDidUpdate()
  • Unmount周期，执行顺序：componentWillUnmount()

五、路由

1、Web分类：

  • 静态页面：页面里的数据是写死的
  • 动态页面：页面里的数据是动态填充的
  • 后端渲染：数据在后端填充
  • 前端渲染：数据在前端填充

2、安装环境：

  • VSCODE安装插件：Auto Import - ES6, TS, JSX, TSX
  • 安装Route组件：npm i react-router-dom

3、Route组件介绍：

  • BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
  • Link：跳转到某个链接，to属性表示跳转到的链接
  • Routes：类似于C++中的switch，匹配第一个路径
  • Route：路由，path属性表示路径，element属性表示路由到的内容

4、URL中传递参数：

解析URL：<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />

获取参数，类组件写法：import React, { Component } from 'react';
import { useParams } from 'react-router-dom';class Linux extends Component {state = {  } render() {console.log(this.props.params);return <h1>Linux</h1>;}
}export default (props) => (<Linux{...props}params={useParams()}/>
)
函数组件写法：import React, { Component } from 'react';
import { useParams } from 'react-router-dom';const Linux = () => {console.log(useParams());return (<h1>Linux</h1>);
}export default Linux;

Search Params传递参数
类组件写法：import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';class Django extends Component {state = {searchParams: this.props.params[0],  // 获取某个参数setSearchParams: this.props.params[1],  // 设置链接中的参数，然后重新渲染当前页面}handleClick = () => {this.state.setSearchParams({name: "abc",age: 20,})}render() {console.log(this.state.searchParams.get('age'));return <h1 onClick={this.handleClick}>Django</h1>;}
}export default (props) => (<Django{...props}params={useSearchParams()}/>
);
函数组件写法：import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';const Django = () => {let [searchParams, setSearchParams] = useSearchParams();console.log(searchParams.get('age'));return (<h1>Django</h1>);
}export default Django;

6、重定向：使用Navigate组件可以重定向。

  • <Route path="*" element={ <Navigate replace to="/404" /> } />

7、嵌套路由

<Route path="/web" element={<Web />}><Route index path="a" element={<h1>a</h1>} /><Route index path="b" element={<h1>b</h1>} /><Route index path="c" element={<h1>c</h1>} />
</Route>
注意：需要在父组件中添加<Outlet />组件，用来填充子组件的内容。

六、Redux

1、redux将所有数据存储到树中，且树是唯一的。

2、Redux基本概念

  • store：存储树结构。
  • state：维护的数据，一般维护成树的结构。
  • reducer：对state进行更新的函数，每个state绑定一个reducer。传入两个参数：当前state和action，返回新state。
  • action：一个普通对象，存储reducer的传入参数，一般描述对state的更新类型。
  • dispatch：传入一个参数action，对整棵state树操作一遍。

3、React-Redux基本概念

  • Provider组件：用来包裹整个项目，其store属性用来存储redux的store对象。
  • connect(mapStateToProps, mapDispatchToProps)函数：用来将store与组件关联起来。
  • mapStateToProps：每次store中的状态更新后调用一次，用来更新组件中的值。
  • mapDispatchToProps：组件创建时调用一次，用来将store的dispatch函数传入组件。

4、安装：npm i redux react-redux @reduxjs/toolkit

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

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

相关文章

haiku实现TemplatePairStack类

haiku实现TemplatePairStack类

TemplatePairStack是实现蛋白质结构模版pair_act特征表示的类： 通过layer_stack.layer_stack(c.num_block)(block) 堆叠c.num_block（配置文件中为2）block 函数，每个block对输入pair_act 和 pair_mask执行计算流程：TriangleAttention —> dropout ->TriangleAttentio…
阅读更多...
Retrofit源码分析及理解

Retrofit源码分析及理解

参考文档&#xff1a; 12W字&#xff1b;2022最新Android11位大厂面试专题&#xff08;一&#xff09; - 掘金 Retrofit 版本号&#xff1a;2.9.0 Retrofit简单来说&#xff0c;就是对OkHttp上层进行了封装&#xff0c;已达到用户方便使用管理网络请求的目的。 Retrofit内部有…
阅读更多...
力扣热门100题刷题笔记 - 10. 正则表达式匹配

力扣热门100题刷题笔记 - 10. 正则表达式匹配

力扣热门100题 - 10. 正则表达式匹配 题目链接&#xff1a;10. 正则表达式匹配 题目描述&#xff1a; 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符 * 匹配零个或多个前面的那一个元素 所谓匹配&#xff…
阅读更多...
asqlcell，一个超强的 Python 库！

asqlcell，一个超强的 Python 库！

前言 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - asqlcell。 Github地址&#xff1a;https://github.com/datarho/asqlcell Python asqlcell 是一个用于执行异步数据库操作的开源库&#xff0c;它允许开发者通过异步的方式与数据库进行交互&#xff0c;提高了数…
阅读更多...
如何使用VS Code编写小游戏并实现公网游玩本地游戏【内网穿透】

如何使用VS Code编写小游戏并实现公网游玩本地游戏【内网穿透】

文章目录 前言1. 编写MENJA小游戏2. 安装cpolar内网穿透3. 配置MENJA小游戏公网访问地址4. 实现公网访问MENJA小游戏5. 固定MENJA小游戏公网地址 前言 本篇教程&#xff0c;我们将通过VS Code实现远程开发MENJA小游戏&#xff0c;并通过cpolar内网穿透发布到公网&#xff0c;分…
阅读更多...
七月论文审稿GPT第2.5版：微调GPT3.5 turbo 16K和llama2 13B以扩大对GPT4的优势

七月论文审稿GPT第2.5版：微调GPT3.5 turbo 16K和llama2 13B以扩大对GPT4的优势

前言 自去年7月份我带队成立大模型项目团队以来&#xff0c;我司至今已有5个项目组&#xff0c;其中 第一个项目组的AIGC模特生成系统已经上线在七月官网第二项目组的论文审稿GPT则将在今年3 4月份对外上线发布第三项目组的RAG知识库问答第1版则在春节之前已就绪至于第四、第…
阅读更多...
ai平滑工具的使用方法

ai平滑工具的使用方法

ai中想要使用平滑工具来处理线条&#xff0c;该怎么是哦用哪个恩&#xff1f;下面我们就来看看详细的教程。 1、我们通过一个例子演示平滑工具的使用&#xff0c;先新建文件&#xff0c;在左侧工具箱中找到平滑工具。 文章源自四五设计网-https://www.45te.com/39726.html 2、…
阅读更多...
CSS：三列布局

CSS：三列布局

三列布局是指左右两列定宽&#xff0c;中间自适应。最终效果如下&#xff1a; HTML&#xff1a; <div class"container"><div class"left"></div><div class"center"></div><div class"right">…
阅读更多...
001集：open语句打开文件及文件类型（二进制、文本文件）详解——vba

001集：open语句打开文件及文件类型（二进制、文本文件）详解——vba

open用法可以用来打开文件、文件夹或网页&#xff0c;也可以用来运行某一应用程序、文件或网页。一般来说&#xff0c;只要在开始菜单中可以找到某个应用程序&#xff0c;我们就可以使用open命令打开该应用程序;另外&#xff0c;在打开某个文件或网页时&#xff0c;也可以使用o…
阅读更多...
设计模式学习笔记05（小滴课堂）

设计模式学习笔记05（小滴课堂）

讲解Adapeter设计模式和应用场景 接口的适配器案例实战 代码&#xff1a; 定义一个接口&#xff1a; 编写适配器&#xff1a; 写我们的商品类&#xff1a; 会员类&#xff1a; 这样我们不同的需求可以根据需要去实现不同的接口方法&#xff0c;而不用实现全部接口方法。 适配…
阅读更多...
如何预防最新的.kat6.l6st6r 勒索病毒感染您的计算机？

如何预防最新的.kat6.l6st6r 勒索病毒感染您的计算机？

导言&#xff1a; 随着科技的不断进步&#xff0c;勒索病毒成为网络犯罪中一种极为破坏性的工具。其中&#xff0c;.kat6.l6st6r 勒索病毒作为最新的威胁之一&#xff0c;采用先进的加密算法&#xff0c;使用户的数据文件无法正常访问。本文91数据恢复将深入介绍这一勒索病毒的…
阅读更多...
Qt案例 在对QGraphicsView视图修改和撤销修改图元操作时，使用命令模式实现。

Qt案例 在对QGraphicsView视图修改和撤销修改图元操作时，使用命令模式实现。

当项目中有QGraphicsView视图直接修改图元的功能时&#xff0c;常会有CtriZ和CtrlY这种执行与撤销图元修改的功能&#xff0c;以便于在修改图元后能够进行一个还原/执行操作&#xff0c;此时就适合使用命令模式设计来实现这个功能。 以下示例在WINDOWS系统&#xff0c;Qt Creat…
阅读更多...
echarts step line

echarts step line

https://ppchart.com/#/ <template><div class"c-box" ref"jsEchart"></div> </template><script> import * as $echarts from echarts // 事件处理函数 export default {props: {// 需要传递的数据data: {type: Array,defa…
阅读更多...
字符串匹配算法（z函数模版）来自灵神。

字符串匹配算法（z函数模版）来自灵神。

一个字符串s求出s的z[i]&#xff0c;z[i]表示以s[i:n]这一段和s[0:n]的从前往后的连续相等字母个数。 比如 abacaba,z[2] (acaba与abacaba比较) 1。
阅读更多...
SpringBoot整合Flowable最新教程（一）Flowable介绍

SpringBoot整合Flowable最新教程（一）Flowable介绍

一、Flowable 入门介绍 代码实现文章&#xff1a;SpringBoot整合Flowable最新教程&#xff08;二&#xff09; 官网地址&#xff1a;https://www.flowable.org/   Flowable6.3中文教程&#xff1a;中文教程地址   可以在官网下载对应的jar包在本地部署运行&#xff0c;官方…
阅读更多...
【IC设计】Windows下基于IDEA的Chisel环境安装教程（图文并茂）

【IC设计】Windows下基于IDEA的Chisel环境安装教程（图文并茂）

Chisel环境安装教程 第一步 安装jdk&#xff0c;配置环境变量第二步 安装sbt&#xff0c;不用配置环境变量第三步 安装idea社区版第四步 离线安装scala的idea插件第五步 配置sbt换源1.切换目录2.创建repositories文件3.配置sbtconfig.txt文件 第六步 使用chisel-tutorial工程运…
阅读更多...
什么是边缘计算？

什么是边缘计算？

今天&#xff0c;我们探讨一个充满机遇和挑战的领域——边缘计算。 首先&#xff0c;让我们一起探讨一下什么是边缘计算。简单来说&#xff0c;边缘计算是指在网络的边缘&#xff0c;即数据生成的位置进行计算的一种模式。这与传统的云计算模式形成了鲜明对比&#xff0c;在云…
阅读更多...
CISCRISC? CPU架构有哪些? x86 ARM？

CISCRISC? CPU架构有哪些? x86 ARM？

编者按&#xff1a;鉴于笔者水平有限&#xff0c;文中难免有不当之处&#xff0c;还请各位读者海涵。 是为序 我猜&#xff0c;常年混迹CSDN的同学应该不会没听说过CPU吧&#xff1f; 但你真的了解CPU吗&#xff1f;那笔者问你CPU有哪些架构呢&#xff1f; 如果你对你的答案…
阅读更多...
Equivariant GNN Networks（等变图神经网络）

Equivariant GNN Networks（等变图神经网络）

3D CNN的缺陷&#xff1a; 旋转不等变、很难扩展到大的蛋白质口袋 The model was constructed based on the 3D CNN model which is not equivariant to rotation and hard to scale to large protein pockets. Vector Feature-based Equivariant Networks 基于向量特征的等…
阅读更多...
FCIS 2023：洞悉网络安全新态势，引领创新防护未来

FCIS 2023：洞悉网络安全新态势，引领创新防护未来

随着网络技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;成为全球共同关注的焦点。在这样的背景下&#xff0c;FCIS 2023网络安全创新大会应运而生&#xff0c;旨在汇聚业界精英&#xff0c;共同探讨网络安全领域的最新动态、创新技术和解决方案。 本文将从大会的…
阅读更多...
最新文章

Copyright @ 2022~2023