- 博客(48)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React Router的介绍及基本原理
React Router现在的版本是6, 于2019年3月21日搞笑的发布，搞笑的官网链接， 本来是要发布4.4的版本的，结果成了5。从4开始，使用方式相对于之前版本的思想有所不同。之前版本的思想是传统的思想：路由应该统一在一处渲染， Router 4之后是这样的思想：一切皆组件React Router包含了四个包:包名 Description react-router React Router核心api react-router-dom React Router的DOM绑
2022-03-25 16:06:15
303
原创 React非受控组件
在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。例如，下面的代码使用非受控组件接受一个表单的值：import React, { Component } from 'react';// 受控组件 --- value 配合 onChange
2022-03-25 15:50:46
970
原创 React受控组件
在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用setState()来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元
2022-03-25 15:48:25
421
原创 Symbols介绍
从ECMAScript 2015开始，symbol是一种原始的数据类型，就像 number 和 string 一样。symbol 值是通过调用 Symbol构造函数创建的。let sym1 = Symbol();let sym2 = Symbol("key"); // 可选的字符串 keySymbols 是不可改变的，而且是独一无二的。let sym2 = Symbol("key");let sym3 = Symbol("key");sym2 === sym3; // false,
2022-03-23 17:52:07
1534
原创 TS枚举详解
Enums（枚举）是TypeScript的少数功能之一，它不是JavaScript的类型级扩展。枚举允许开发者定义一组命名的常量。使用枚举可以使其更容易记录意图，或创建一组不同的情况。TypeScript提供了基于数字和字符串的枚举。1 数值型枚举我们首先从数字枚举开始，如果你来自其他语言，可能会更熟悉它。一个枚举可以用 enum 关键字来定义。enum Direction { Up = 1, Down, Left, Right,}上面，我们有一个数字枚举，其
2022-03-23 17:40:08
28644
1
原创 TypeScript描述JS代码中常见值的方法
本文中，小编将介绍一些在 JavaScript 代码中最常见的值类型，并解释在 TypeScript 中描述这些类型的相应方法。1.基元类型string,number, 和booleanJavaScript有三个非常常用的类型：string，number，和boolean。每个在 TypeScript 中都有对应的类型。我们发现，这些名称与我们在 JavaScript 应用typeof返回的类型的名称相同： string 表示字符串值，如 "Hello, world" nu...
2022-03-23 17:17:12
1554
原创 TypeScript与JavaScript的区别
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 是一种非常受欢迎的 JavaScript 语言扩展。它在现有的 JavaScript 语法之上加入了一层类型层，而这一层即使被删除，也丝毫不会影响运行时的原有表现。许多人认为 TypeScript "只是一个编译器"，但更好的理解其实是把 TypeScript 看作两个独立的系统：编译器（即处理语法的部分...
2022-03-23 16:37:11
6310
原创 React逐层传递数据的方法
import React, { Component } from 'react';class Second extends Component { render() { return ( <div> { this.props.theme } - { this.props.color} </div> ) }}const First = (props) => { return ( <div&.
2022-03-23 16:27:52
525
原创 React两种传递参数的方式
import React, { Component } from 'react';export default class App extends Component { state = { count:1 } addM(m,event) { console.log(event); this.setState({count:this.state.count + m}) } add (params1,params2,e.
2022-03-23 16:24:50
802
原创 React四种定义事件的方式
事件本身处的位置是一个属性 如果属性的值是一个函数 使用{}包裹，一定要保证该函数内的this指向import React, { Component } from 'react';export default class App extends Component { constructor(props) { super(props); this.add1000Fn = this.add1000.bind(this) }...
2022-03-23 16:20:30
1831
原创 React Hooks的详细介绍
在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处：1.代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读..
2022-03-22 08:59:25
427
原创 Redux异步
通常情况下，action只是一个对象，不能包含异步操作，这导致了很多创建action的逻辑只能写在组件中，代码量较多也不便于复用，同时对该部分代码测试的时候也比较困难，组件的业务逻辑也不清晰，使用中间件了之后，可以通过actionCreator异步编写action，这样代码就会拆分到actionCreator中，可维护性大大提高，可以方便于测试、复用，同时actionCreator还集成了异步操作中不同的action派发机制，减少编码过程中的代码量常见的异步库： Redux-thunk ✅✅✅✅
2022-03-21 17:17:51
827
原创 Redux的深入了解
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。 代码结构 组件之间的通信 2013年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。如果你不知道是否需要 Redux，那就是不需要它 多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。 只有遇到 React 实在解决不了的问题，
2022-03-21 17:15:13
84
原创 Flux的简介
在2013年，Facebook让React亮相的同时推出了Flux框架，React的初衷实际上是用来替代jQuery的，Flux实际上就可以用来替代Backbone.js，Ember.js等一系列MVC架构的前端JS框架。其实Flux在React里的应用就类似于Vue中的Vuex的作用，但是在Vue中，Vue是完整的mvvm框架，而Vuex只是一个全局的插件。React只是一个MVC中的V(视图层)，只管页面中的渲染，一旦有数据管理的时候，React本身的能力就不足以支撑复杂组件结构的项目，在传统的
2022-03-21 17:10:17
671
原创 React组件通信
父组件与子组件通信// 父组件调用子组件的地方，添加自定义的属性// 属性的值就是需要传递给子组件的值// 如果属性的值是变量，boolean类型，number类型，对象，数组，函数，null，undefined// 需要使用 {} 包裹// 如果需要设置子组件的属性的默认值// 不管是类组件还是函数式组件，可以在组件定义之后通过 Com.defaultProps 设置属性的默认值// 但是如果子组件是类组件，还可以通过组件的静态的属性 static defaultProps 设置属性..
2022-03-21 17:02:10
955
原创 React生命周期详解
想查看React生命周期的小伙伴可以查看博主的上一条文章哦(1) constructor(props)React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。constructor中应当做些初始化的动作，如
2022-03-21 16:45:18
310
原创 React的生命周期
React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后)1、初始化在组件初始化阶段会执行 constructor static getDerivedStateFromProps() componentWillMount() / UNSAFE_componentWillMount() render() componentDidMount() 2、更新阶段
2022-03-21 16:32:45
180
1
原创 React组件的数据挂载方式对比
1、属性(props)props正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。通过箭头函数创建的函数式组件，需要通过函数的参数来接收props:通过类创建的类组件，需要通过 this.props来接收属性import React from 'react'const Header = (props) => { return ( <header>...
2022-03-21 16:23:01
461
原创 React的发展以及特点优势
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。react在发展过程中，一直跟随原生js的脚步2015年推出了使用react来编写移动端的app ---- react-nativeReact高性能的体现：虚拟DOM在Web开发中我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或
2022-03-21 15:57:32
357
原创 Vue中级前端面试的问题总结
1.谈谈你对Vue的理解2.Vue的响应式数据3.你所理解的MVVM4.谈谈你对Vue指令的理解5.怎么去封装一个vue的自定义指令6.Vue2和Vue3的区别，以及他们发生了哪些变化7.computed和计算属性 watch监听的区别8.谈一谈响应式数据9.VNode是什么10.VNode是如何渲染的11.vue生命周期的执行顺序12.谈一谈VueX的核心属性13.谈一谈VueX里面机制是怎么运转的14.谈一谈VueX里面，action mutaion和state之间的运转方式
2022-03-21 15:41:55
405
原创 JavaScript的方法(常用)
1.js的弹窗方法1.输出内容：document.write2.警告内容：alert（“内容”），弹框只有确定按钮，起到提示作用3.确定内容：confirm（“内容”），弹框有确定和取消按钮，分别返回值为true、false4.提问窗口：prompt（“弹框内容（不可修改），文本框默认内容（可修改）”），弹框包括确定按钮、取消按钮、文本框，点击确定按钮返回文本框内容、点击取消按钮返回null。5.打开新窗口：window.open(, <窗口名称>, <参数字符串>
2022-03-21 15:37:53
9215
原创 ES6和ES5构造函数的语法
ES6 构造函数 语法使用 新增的关键 class 来完成 ES6构造函数语法class CreateAddObj6{ constructor( num1 , num2 ){ this.min = Math.min( num1 , num2 ); this.max = Math.max( num1 , num2 ); } add(){ ...
2021-10-27 21:34:15
96
原创 HTTP状态码
当浏览者访问一个网页的时候，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头用来响应浏览器的请求下面 是几个常见的HTTP状态码200 请求成功301 资源（网页）被永久转移到其它URL404 请求的资源（网页）不存在500 内部服务器错误状态码是 100 - 599 范围的 数值 100 - 199 请求连接 ...
2021-10-27 21:30:02
69
原创 http协议
是 一种 网络传输 协议 客户单(html网页) 和 服务器 进行网络数据传输时 需要双方遵守的 规则规范 http协议 是 最早的应用最广的网络传输协议 二阶段主要连接 http协议的 2种 执行机制 三次握手 在 客户端 和 服务器 创建连接输出数据之前 执行的 机制 为了 确定 ...
2021-10-27 21:22:38
62
原创 java script条件分支语句
if语句语法：if（）{console.log()}条件满足就执行，不满足就不执行语法：if（）{console.log()} else {console.log()}条件满足就执行if的{}，不满足就执行else的{}语法：if（）{console.log()} else if{console.log()}满足哪一个if就执行哪一个if的{}，前面有条件满足了，后面的就不执行了语法：if（）{console.log()} else if（）{console.log()} else{co
2021-09-16 14:49:38
154
原创 java script 运算符
算数运算符 + - * / % {当符号两边都是数字或者布尔的时候，会进行数字运算+:进行加法运算 {只要符号的任意一边都是字符串的时候，就会进行字符串拼接例：var n1 = 10 var n2 = 20 var n3 = n1 + n2console.log(n3)答：结果为30 如果把10 改为‘10’ 会发生拼接 结果为1020- * / % 没有拼接的能力 都是只能作为数学运算减法运算console.l...
2021-09-16 10:21:47
359
原创 java script 数据类型转换
分为三大类 转数值 转字符串 转布尔转数值的3种方法语法：//准备一个变量 赋值为字符串类型内容 var s1 = '123' console.log(s1) console.log(typeof s1);// 使用Number()方法进行一下转换 var n1 = Number(s1) console.log(n1) console.log(typeof n1);// 之后就成功把一个字符串类型数...
2021-09-15 21:41:56
291
原创 java script基本数据类型和检测
数值类型：常见的正负整数和一些科学计数法和进制数字0x开头表示十六进制数字0o开头的表示八进制数字0b开头的表示二进制数字字符串类型：在js中一切一单引号和双引号包裹的内容都是字符串类型（而且js里不区分单引号和双引号）布尔类型：只有两个值 一个是true 一个是false其中true表示的就是真 false表示的就是假空类型：分成null undefinednull：表示有值，有一个空值我们需要给一个变量赋值为null的时候 这个变量保存的才是nullunderfined...
2021-09-15 21:41:12
173
原创 css3网格布局grid
定义：网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局概念：采用网格布局的区域，称为"容器"（container）。行和列容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。添加在容器（父元素）上的属性1.display：grid； display：inline-grid；指定一个容器采用网格布局2.g.
2021-08-05 17:25:10
153
原创 等比例缩放布局（rem和vw）
等比缩放布局（rem布局）特点：页面里边的元素会根据分辨率等比例放大或缩小.rem是根元素（html）的font-size的倍数。rem： 指相对于根元素的字体大小的单位。根元素：会相对设备尺寸自动变换。VW： 视窗宽度，1vw等于视窗宽度的1%。-------------------------------------------------------------------------------------------------------rem配合VW做等比缩放布局V...
2021-08-04 20:16:11
1275
原创 css3多列样式和媒体查询
css3多列1、column-count：分栏的个数2、column-width：分栏的宽度3、column-gap： 分栏的间距4、column-rule： 分栏的边框5、column-span：all/none 设置或检索对象元素是否横跨所有列6、column-fill设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持） auto：列高度自适应内容 balance：所有列的高度以其中最高的一列统一(默认值)7、co...
2021-08-03 21:57:28
129
原创 怪异盒子模型和弹性盒子模型的属性及语法
怪异盒模型box-sizing用来设置盒模型的解析规则的content-box(按标准盒模型的规则解析)border-box(按怪异盒模型的规则解析)弹性盒模型display:flex/inline-flex说明：flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示设置为弹性盒（父元素添加）----------------------------------------------------------------------...
2021-08-02 18:01:37
339
原创 css动画基础属性与语法
animation动画定义：通过关键帧控制动画的每一步，让元素从一种样式逐渐变化为另外一种样式，实现复杂的动画。@keyframes作用：用于声明动画，指定关键帧。帧：用于分解动画动作，每个帧代表某个时间点，定义每个帧上的动作语法：@keyframs name{from|0%{ 样式}percent{ 样式}to|100%|{ 样式}}动画属性值：animation-name：调用动画，规定需要和keyframes的名字一样animation-dura...
2021-08-02 17:59:41
114
原创 3D进度条制作
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>.box{width:300px;height:30px;border:1pxsolidbl...
2021-07-31 15:33:42
186
原创 3D正方体制作
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{padding:0;margin:0;}section{...
2021-07-31 15:31:00
115
原创 2D转换属性
2D转换定义：2D变换，是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸。确定坐标系默认状态下，x轴是水平的，向右为正。默认状态下，y轴是垂直的，向下为正。----------------------------------------------------------------------------------------变形属性：transform属性值：transform：none;默认值transform：translate（）；移动 平移 单..
2021-07-30 23:09:38
307
原创 css过渡属性简介
过渡 Transitiontransition-property 需要过渡的样式 ，默认是 alltransition-duration 运动时间 默认是 0 s transition-delay 延迟时间 默认是 0 stransition 简写transition-timing-function 运动形式 默认是 ease属性值：跟在简写形式后面就可ease：（慢速开始，然后变快，然后慢速结束） linear：（匀速） ease-in...
2021-07-29 19:07:42
193
原创 css背景相关属性【补充】
background-size:需要调整背景图片的大小四类：像素值 百分比 宽度设置为固定的像素值高度百分比增加像素值：第一个宽度第二个高度百分比：单个和两个参照像素值：cover背景图片把整个背景全部覆盖；contain一边铺满，另外一边等比增加，始终保证整个图像在div的范围内backround-clip：调整背景位置属性值：backround-clip：border-box; 默认值backround-clip：padding-box 背景被裁剪到内边距框backrou...
2021-07-29 19:02:02
60
原创 css渐变属性【线性渐变】【径向渐变】
渐变的定义：背景颜色过渡的效果【线性渐变】常用属性：background-image: linear-gradient（）；渐变方向：在括号在加to top 或者left 或者right left 默认就从上到下渐变角度：0deg是从下面开始渐变 度数是正值是顺时针 负值是逆时针颜色可以多个但是要逗号隔开可以加渐变的百分比，加在颜色的后面注：比如红25% 蓝75% 红色是从25%处开始渐变到75%成蓝色，25%之前是纯红色。加浏览器内核时：方向没有to 直接left...... 两...
2021-07-29 18:59:29
753
原创 CSS控制英文属性
自己决定自动换行的处理方法word-break 属性值：word-break：normal:使用浏览器默认的换行规则。word-break：keep-all:不允许中文字断开。word-break：break-all:允许在单词内换行，可以强行截断英文单词，达到词内换行效果。用来标明是否允许浏览器在单词内进行断句 word-wrapword-wrap：normal 默认值。word-wrap：break-word：在长单词或 URL 地址内部进行换行。将内容在边界内换行（不截断英文单...
2021-07-29 18:56:33
195
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人