- 博客(52)
- 收藏
- 关注
RSS订阅原创 【react全家桶】react-Hook （下）
这是一个高阶组件，用来做性能优化的，这个本来应该是写在React高级指引中的，但是这个案例会和后面的联合起来，所以就写在这里了React.memo() 是一个高阶组件，如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。它接收另一个组件作为参数，并且会返回一个包装过的新组件包装过的新组件就会具有缓存功能，这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
2023-05-28 13:53:41
850
原创 【react 全家桶】react-Hook（上）
Hooks 译为钩子，Hooks 就是在函数组件内，负责钩进外部功能的函数。React 提供了一些常用钩子，React 也支持自定义钩子，这些钩子都是用于为函数引入外部功能。当我们在组件中，需要引入外部功能时，就可以使用 React 提供的钩子，或者自定义钩子。现在让我们来仔细回顾一下学到的知识，看下我们是否真正理解了。14 : }引入 React 中的useStateHook。它让我们在函数组件中存储内部 state。在Example组件内部，我们通过调用useState。
2023-05-20 16:43:28
684
原创 【react 全家桶】高级指引（上）
(1) . setState(stateChange , [callback]) ------对象式的setState1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数 , 它在状态更新完毕、界面也更新后(render调用后) 才被调用(2) . setState(updater , [callback]) ------函数式的setState1.updater为返回stateChange对象的函数。
2023-05-07 09:38:35
310
原创 【react全家桶】react-router
路由是根据不同的 URL 地址展示不同的内容或页面在 SPA 应用中，大部分页面结果不改变，只改变部分内容的使用一个路由其实就是一个映射关系（k:v）key为路径，value可能是function 或者是 componentvalue是function，用来处理客户端提交的请求注册路由：router.get(path,function(req,res))工作过程：当node接收一个请求的时候，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应的数据。
2023-04-22 15:47:04
440
原创 【react 全家桶】初始化脚手架
在我们的现实生活中，脚手架最常用的使用场景是在工地，它是为了保证施工顺利的、方便的进行而搭建的，在工地上搭建的脚手架可以帮助工人们高校的去完成工作，同时在大楼建设完成后，拆除脚手架并不会有任何的影响。在我们的 React 项目中，脚手架的作用与之有异曲同工之妙React 脚手架其实是一个工具帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的，所以 React 给我提前的搭建好了，这也是脚手架强大之处之一，也是用 React 创建 SPA 应用的最佳方式。
2023-04-16 08:18:52
201
原创 【react 全家桶】状态提升
所谓状态提升就是将各个子组件的 公共state 提升到它们的父组件进行统一存储、处理（这就是所谓的”单一数据源“），负责setState的函数传到下边的子级组件，然后再将父组件处理后的数据或函数props到各子组件中。那么如果子组件 要 修改父组件的state该怎么办呢？我们的做法就是 将父组件中负责setState的函数，以props的形式传给子组件，然后子组件在需要改变state时调用即可。实现方式。
2023-03-31 21:16:20
1101
8
原创 【react 全家桶】收集表单数据
但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。因为非受控组件将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作，被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。
2023-03-25 15:11:24
538
原创 【react 全家桶】列表 && Key
在谈 diff 算法之前，我们需要先了解虚拟 DOM。它是一种编程概念，在这个概念里，以一种虚拟的表现形式被保存在内存中。在 React 中，render 执行的结果得到的并不是真正的 DOM 节点，而是 JavaScript 对象虚拟 DOM 只保留了真实 DOM 节点的一些基本属性，和节点之间的层次关系，它相当于建立在 JavaScript 和 DOM 之间的一层“缓存”上面的这段代码会转化可以转化为虚拟 DOM 结构" ] } ] }其中对于一个节点必备的三个属性tag 指定元素的标签类型，如“
2023-03-18 21:24:12
950
1
原创 【react 全家桶】条件渲染
就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法，那就是内联条件渲染的方法与运算和三目运算符。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if。它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。
2023-03-11 19:52:48
1523
6
原创 【react全家桶】生命周期
组件从创建到死亡，会经过一些特定的阶段React组件中包含一系列钩子函数{生命周期回调函数}，会在特定的时刻调用我们在定义组件的时候，会在特定的声明周期回调函数中，做特定的工作在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下react生命周期(旧)
2023-03-05 15:43:39
1375
1
原创 【react全家桶】 事件处理
但是在React中定义表单时，这些属性通通都可以不指定，因为React中的表单所有的功能都需要通过代码来控制，包括获取表单值和提交表单，所以这些东西都可以在函数中指定并通过AJAX发送请求，无需直接在表单中设置。首先我们来研究一下如何获取表单中的用户所填写的内容，要获取用户所填写的内容我们必须要监听表单onChange事件，在表单项发生变化时获取其中的内容，在响应函数中通过事件对象的target.value来获取用户填写的内容。如下：下面并没有使用state来控制属性，使用的是事件来控制表单的属性值。
2023-02-26 09:44:34
408
原创 【react全家桶】面向组件编程
当应用是以多组件的方式实现，这个应用就是一个组件化的应用只有两种方式的组件Welcome< />render()
2023-02-19 08:28:25
851
6
原创 【react全家桶】react入门
01 【react入门】1.React简介react是什么？React 是一个用于构建用户界面的 JavaScript 库。是一个将数据渲染为 HTML 视图的开源 JS 库它遵循基于组件的方法，有助于构建可重用的 UI 组件它用于开发复杂的交互式的 web 和移动 UIReact 有什么特点？使用虚拟 DOM 而不是真正的 DOM它可以用服务器渲染它遵循单向数据流或数据绑定高效声明式编码，组件化编码React 的一些主要优点？它提高了应用的性能可以方便在客户端和服务器端使用
2023-02-05 10:32:21
471
原创 promise对象
上面代码中， p1 会 resolved ， p2 首先会 rejected ，但是 p2 有自己的 catch 方法，该方法返回的是一个新的 Promise 实例， p2 指向的实际上是这个实例。上面代码中， Promise.all() 方法接受一个数组作为参数， p1 、 p2 、 p3 都是 Promise 实例，如果不是，就会先调用下面讲到的 Promise.resolve 方法，将参数转为 Promise 实例，再进一步处理。（1）对象的状态不受外界影响。其中，第二个函数是可选的，不一定要提供。
2023-01-21 12:34:14
1107
原创 es6新特性------学好类（class）这一篇就够了
是一个私有数据属性。但是，在类声明中明确列出属性可以方便阅读代码的人更容易确定哪些属性是这个类的一部分。因为我们想在创建新的 Professor 时设置 teaches，我们需要声明一个需要。对于上文给出的 Person 类，我们声明一个它的子类 Professor。注意，我们使用类的名字来调用构造函数，即示例中的 Person。私有数据属性必须在类的声明中声明，而且其名称需以 # 开头。来调用父类的构造函数，并传递父类构造函数期望的任何参数。这一声明是可选的：你可以省略它，因为在构造函数中的。
2022-12-09 21:34:26
442
原创 猿创征文｜助力前端开发的实用型工具
有各种各样的在线工具，在实际开发中总是避免不了时间戳计算，JSON字符串转化，正则测试等等，在在线工具这个💪百宝箱💪中，可以找到各种实用型工具解决你的问题。在写前端项目的时候，总是避免不了和后台的交互，那么这款API调试工具可就能帮了大忙了，可以在线发送各种请求，更加直观的看到接口返回的结果。在实际开发中，文件繁多且复杂，那么这款搜索工具就派上用场了👍，输入文件的名字，很快✈️的就能检索出来。在前端学习中，记笔记是必不可少的，就算不做笔记，那么写下自己的一些理解，想必也是极好的。👍①干净简单的用户界面。
2022-11-04 21:53:03
803
27
原创 学好vue靠他就行了——vue脚手架，自定义事件，插槽等复杂内容
博主主页：追求～本文承接上一篇:学好vue靠他就行了—vue基础知识与原理(一)学好vue靠他就行了—vue基础知识与原理(二)希望各位博主多多关注脚手架democomponents:就直接把单文件组件的 School.vue 和 Student.vue 两个文件直接拿来用，不需要修改。App.vue:引入这两个组件，注册一下这两个组件，再使用。main.js:入口文件接下来就要详细讲解 main.js 中的 render 函数之前的写法是这样：如果这样子写，运行的话会引发如下的报错报错的意思是
2022-10-13 18:44:46
230
48
原创 学好vue靠他就行了---vue基础知识与原理(二)
博主主页：追求～本文承接上一篇:学好vue靠他就行了—vue基础知识与原理(一)希望各位博主多多关注写法：:class=“xxx” xxx可以是字符串、对象、数。所以分为三种写法，字符串写法，数组写法，对象写法字符串写法字符串写法适用于：类名不确定，要动态获取。数组写法数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。对象写法对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。style样式有两种写法，对象写法，数组写法对象写法数组写法1.12 条件渲染v-i
2022-10-08 10:10:35
151
原创 ES6新特性-----------学好扩展运算符(...)这一篇就够了
上面代码中，由于 JavaScript 不提供求数组最大元素的函数，所以只能套用 Math.max 函数，将数组转为一个参数序列，然后求最大值。上面代码的第一种写法，JavaScript 会将四个字节的 Unicode 字符，识别为 2 个字符，采用扩展运算符就没有这个问题。上面代码中， a3 和 a4 是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。
2022-09-30 08:28:47
19593
原创 ES6新特性-------学好解构赋值这一篇就够了。
解构赋值可以方便地将一组参数与变量名对应起来。// 参数是一组有次序的值 function f([ x , y , z ]) {// 参数是一组无次序的值 function f({... } f({
2022-09-10 15:50:20
20023
原创 --图片与文字对齐方式的实现，伪类你真的用对了吗
元素A是元素B的父类，A嵌套着B,当鼠标移到A上时，想要让B做出变化。vertical-align属性设置元素的垂直对齐方式。不知道你是否需要这么一个应用场景。实现办法，使用hover。
2022-07-17 20:53:35
116
原创 location hash属性、hash+原生JavaScript实现前端路由
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。例如：假如当前URL为 那么输出的就是**#123456**由此可以实现前端路由，实现切换效果。
2022-07-10 19:08:18
387
原创 伪类元素--before和after
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：这两个伪类都属于内联元素，但是用display:block；属性可以将其转换成块状元素，比较常见的用法就是样式的一些实现，还有就是清除浮动的效果。。代码如下所示:3.清除浮动代码如下所示：如果在上面代码中加上这段代码用来清除浮动则会达到不一样的效果：::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添
2022-07-03 17:05:16
2996
原创 iframe简单使用 、获取iframe 、获取iframe 元素值 、iframe获取父页面的信息
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。注意：URL建议用绝对路径如果一个页面里面有框架，点页面里的连接，要求在这个 里打开。在中规定name然后在修改默认打开模式，：网页head中加上或部分连接的目标框架设为（**）要插入一个页面。要求只拿中间一部分。其他的都不要。代码：控制插入页被框架覆盖的深度 控制框架覆盖上部分的深度 scrolling滚动条要否（auto、yes、no） frameborder框架的边框大小，width=776 height=2
2022-06-19 15:36:50
41123
原创 art-template数据渲染的问题
问题当使用art-template渲染数据的时候，经常会出现这种错误，错误：说未定义title，明明从数据库里查出来的数据，为何会未定义，其实主要的原因是，先加载了art-template语句，而这时候数据还没有获取得到。如何解决呢？用es6的链式判断?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。那么可以改一下代码<%=data1[0]?.title%>就可以解决这种问题。 <div> <p> <%=d
2022-05-16 10:08:38
19879
原创 关于mongodb的_id无法获取的问题
问题在本周写项目的时候使用mongoDB搭建后台写登录接口验证用户信息时，出现了一个Bug提示Cannot read property ‘_id‘ of undefined，我寻思着mongoDB有自增的_id，就没有再添加id字段。经过一下午查找文章发现原来是mongoDB自增的_id数据类型的问题：mongoDB自增的数据类型是ObjectId而我在后台返回的数据是json格式发现问题:把_id当做json格式的id来使用解决方案:引入mongoDB的ObjectId：const Obje
2022-05-08 16:58:44
859
原创 art-template----介绍、安装、语法、模板继承、压缩页面、选项、在express中使用
文章目录1 介绍：1.2 核心方法：2 安装2.1 安装方法:3.语法3.1 输出3.2 原文输出3.3 条件输出3.4 循环输出3.5 定义变量4. 模板继承5.压缩页面开启6.选项7.在express中使用7.1、安装7.2、 配置7.3、 使用7.4、 修改默认的 views 视图渲染存储目录。1 介绍：art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。1.
2022-05-01 08:30:56
20282
原创 Mongodb---基本操作、文档增删改查、排序&分页、聚合查询、优化索引、权限机制、备份还原、mongoose
文章目录MongoDB基本操作基本概念查看数据库选择数据库 ! ! !查看集合创建集合删除集合小总结MongoDB 文档增删改查（CURD）明确需求C增R查U改D删小总结练习MongoDB排序&分页排序Limit与Skip方法实战分页MongoDB聚合查询明确需求概念语法准备练习MongoDB优化索引数据库中的索引语法创建唯一索引分析索引选择原则MongoDB权限机制明确需求语法开启验证服务通过超级管理员账号登录添加用户并设置权限MongoDB备份还原明确需求备份数据库mongodump还原数据库m
2022-04-23 22:07:09
763
原创 MongoDB基本语法、增删改查、排序&分页、聚合查询、优化索引、权限机制
文章目录MongoDB基本操作基本概念查看数据库选择数据库 ! ! !查看集合创建集合删除集合小总结MongoDB 文档增删改查（CURD）明确需求C增R查U改D删小总结练习MongoDB排序&分页排序Limit与Skip方法实战分页MongoDB聚合查询明确需求概念语法准备练习MongoDB优化索引数据库中的索引语法创建唯一索引分析索引选择原则MongoDB权限机制明确需求语法MongoDB基本操作基本概念生活中：仓库、架子、物品计算机：数据库、集合、数据/文档查看数据库语法：sho
2022-04-16 20:27:34
19577
原创 es6---模板字符串
文章目录模板字符串基本用法注意要点标签模板应用模板字符串模板字符串是ES6增加的用于定于字符串的新特性。与单双引号不同，模板字符串支持字符串换行而不需要使用换行转义字符\n，并且可以跨多行定义。基本用法普通字符串let string = `Hello'\n'world`;console.log(string); // "Hello'// 'world"多行字符串:let string1 = `Hey,can you stop angry now?`;console.log(str
2022-04-09 19:49:56
1005
原创 前端----let关键字、const关键字
文章目录全局变量局部变量JavaScript 块级作用域(Block Scope)let关键字循环作用域局部变量全局变量HTML 代码中使用全局变量重置变量变量提升const 关键字重置变量变量提升ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量
2022-04-02 16:09:43
20926
原创 AJAX请求----原生ajax，jquery中的ajax方法
文章目录1.原生ajax1.具体步骤2.get请求3.post请求4.为了方便使用,封装一个方法2.jquery的ajax方法1.原生ajax1.具体步骤1.创建XMLHTTPRequest对象2.使用open方法设置和服务器的交互信息3.设置发送的数据，开始和服务器端交互4.注册事件5.更新界面2.get请求//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动
2022-03-26 17:42:05
305
原创 前端工程化与webpack基础-----webpack插件，打包
文章目录前端工程化与 webpack 基础前端工程化实际的前端开发何为前端工程化前端工程化解决方案webpack 基础用法webpack 是什么安装 webpack配置 webpackmode 的可选值webpack.config.js 文件的作用webpack 中的默认约定自定义打包入口和出口webpack 的插件webpack-dev-server安装 webpack-dev-server配置 webpack-dev-server打包生成的文件在何处如何访问打包生成的文件html-webpack-plu
2022-03-20 10:22:44
1117
原创 node.js----数据库，身份认证：Session，JWT
文章目录数据库和身份认证Node 操作 mysql配置 mysql 模块操作 mysql 数据库Web 开发模式服务端渲染前后端分离如何选择身份认证Session 认证机制Session 工作原理Express 中使用 Session 认证JWT 认证机制JWT 工作原理Express 使用 JWT数据库和身份认证Node 操作 mysql配置 mysql 模块1.安装 mysql 模块npm install mysql2.建立连接const mysql = require('mysql')
2022-03-13 09:22:27
332
原创 node.js学习-----express：express路由，中间件，cors跨域
文章目录ExpressExpress 初体验基本使用托管静态资源Express 路由Express 中间件全局中间件局部中间件中间件分类`CORS` 跨域资源共享`CORS` 中间件解决跨域`CORS`CORS 常见响应头CORS 请求分类简单请求预检请求Express官网传送门基于 Node.js 平台，快速、开放、极简的 Web 开发框架Express 是用于快速创建服务器的第三方模块。Express 初体验基本使用安装 Express：npm install express创建服
2022-03-13 09:03:55
570
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人