- 博客(40)
- 收藏
- 关注
RSS订阅原创 React Hooks
问题：Hook 是什么?一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性使用模式：函数组件 + Hooks特点：从名称上看，Hook 都以 use 开头，useState Hook。
2022-08-22 01:32:31
513
1
原创 ES6 闭包相关面试题
一、如何产生闭包(closure)闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。//根据定义，包含变量的函数就是闭包也就是函数嵌套函数就可以称之为闭包。作用域应对的特殊情况，有两种表现：函数作为参数被传递函数作为返回值被带回函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系二、闭包的应用场景闭包应用场景1，封装对象的私有属性和方法隐藏数据做一个简单的缓存工具// 闭包隐藏数据，只提供 APIfun
2022-05-13 15:00:07
295
原创 ES6 闭包
闭包一、变量作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会销毁。二、闭包的概念**闭包函数：**声明一个在函数中的函数，有权访问另一个函数作用域中变量，叫做闭包函数。（函数嵌套函数）**闭包：**内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。**闭包的主要作用：**延伸了变量的作用范围。演示：从外部访问函数内部的变量三、
2022-05-13 14:59:36
566
原创 ES6 原型和原型链
1、构造函数和原型 prototype（1）原型prototype：每个构造函数都有一个prototype属性，指向一个对象。prototype的本质也是一个JavaScript对象，称为原型对象，这个对象的所有属性和方法都会被构造函数所拥有。因此，可将共用的一些方法直接定义在prototype上，这样所有对象实例就可以共享这些方法；（2)作用：原型prototype的作用是共享方法、节约内存；// 1、构造函数 function Star(uname, age) { this
2022-05-13 14:59:05
701
原创 JS中的this指向
this的概念：在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。箭头函数：箭头函数的this指向于函数作用域所用的对象。一、全局环境下的this指向在全局作用域下，this始终指向全局对象window，无论是否是严格
2022-05-13 14:58:34
38512
13
原创 ES6箭头函数及面试题
箭头函数箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致！先来看一个最简单的箭头函数：let fn = a => avar m = prompt()alert(fn(m))1. 箭头函数写法一、如果只有一条语句，可以将{}和return省略掉let fn = a => a+a//相当于let fn = function(a){ return a+a;}二、如果语句为多条，则不可以省略{}和returnlet fn = a =>
2022-05-13 14:58:07
614
原创 ES6 var 、let 和 const 区别
varvar 定义的变量可以修改，如果不初始化会输出undefined，不会报错；在相同作用域里，可以重复声明同一个变量;会声明提升；（ if 内的 {} 不是作用域）letlet是块级作用域，函数内部使用let 定义后，对函数外部无影响；在相同作用域里，不可以重复声明同一个变量；声明的变量不会存在变量提升；（ if 内的 {} 是作用域 ）“暂时性死区”，在代码块内，使用let命令声明变量（或者const声明常量）之前，该变量（常量）都是不可用的。.
2022-05-13 14:57:26
130
原创 React拓展8-ErrorBoundary错误边界
理解：用于解决子组件出现问题导致整个程序出问题。错误边界：用来捕获后代组件错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式：getDerivedStateFromError配合componentDidCatch// 生命周期函数，一旦后台组件报错，就会触发static getDerivedStateFromError(error) { console.log(error); /
2022-05-06 17:12:57
249
原创 React拓展7-renderProps插槽
类似Vue的插槽，在组件的指定地方预留一个位置，根据需求存放组件，且可以携带参数。如何向组件内部动态传入带内容的结构(标签)?**Vue中：**使用slot插槽技术, 也就是通过组件标签体传入结构 <AA><BB/></AA>React中：1.使用children props: 通过组件标签体传入结构2.使用render props: 通过组件标签属性传入结构, 一般用render函数属性1. React中的父子组件2. React中父子组件另一.
2022-05-06 17:09:17
226
原创 React拓展6-PureComponent
用于避免重复渲染（执行render函数），提高效率Component的2个问题当组件中运行方法setState({})。哪怕该方法的参数为一个空对象，该组件和其子组件都会被重新渲染只当前组件重新render(), 就会自动重新render子组件 ==> 效率低效率高的做法只有当组件的state或props数据发生改变时才重新render()原因Component中的shouldComponentUpdate()总是返回true解决方法办法1:重写shouldC
2022-05-06 17:08:44
117
原创 React全家桶（六）redux状态管理
redux状态管理✍目录总览：redux为什么使用Redux：使用react进行大型项目开发时，需要管理的状态不仅数量很多而且相互共享，一个状态多个组件都要共享使用并且渲染，管理不断变化的 state 非常困难。所以我们需要把 state 进行统一管理，这样才能控制每一个state的变化，让我们的程序可读性更强，出错率更低。一、什么是Redux？Redux 是一个 JS 库，一个状态容器。作用： 集中式管理 React 应用中 多个组件共享的状态（1）它可以和 react，vue，ang
2022-04-27 16:36:48
2328
原创 React全家桶（五）React-router路由
React 路由✍目录总览：路由基本概念现代的前端应用大多都是SPA(单页应用程序)，也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多个页面的功能，前端路由应运而生。SPA的概念1.单页Web应用（single page web application，SPA）。2.整个应用只有一个完整的html页面。3.点击页面中的链接不会刷新页面，只会做页面的局部更新。4.数据都需要通过ajax请求获取, 并在前端异步展
2022-04-27 16:27:57
1216
原创 React拓展5-Context
**Context：**一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。props传值的缺陷：使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢逐层向上寻找初值。相关API**React.createContext：**创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Consumer}
2022-04-24 10:43:38
1176
原创 React拓展4-Fragment
Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。Fragment用来替换最外层div根标签，不在页面中显示，优化结构理解起来就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了。就和vue的< template ></ template >..
2022-04-24 10:42:57
95
原创 React拓展3-Hooks
1. React Hook/Hooks是什么?Hook是React 16.8.0版本增加的新特性/新语法，可以让你在函数组件中使用 state 以及其他的 React 特性2. 三个常用的HookState Hook: React.useState()Effect Hook: React.useEffect()Ref Hook: React.useRef()State HookState Hook让函数组件也可以有state状态, 并进行状态数据的读写操作语法: const [
2022-04-24 10:42:06
280
原创 React拓展2-路由组件的lazyLoad
lazyLoad懒加载：需要使用的时候再进行加载当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'//Loading是一般组件，不需要懒加载import Loading from '.
2022-04-24 10:41:40
258
原创 React拓展1-setState更新状态的2种写法
1、对象式的setStatesetState(stateChange,[callback])stateChange 为状态改变的对象（该对象可以体现出状态的更改）callback 是可选的回调函数，它在状态更新完毕后，界面也更新后（render调用后）才被调用import React, { Component } from 'react'export default class Demo extends Compontent { //初始化状态 state =
2022-04-24 10:40:54
425
原创 前后端交互：Git基础
✍目录总览：1. Git基础1.1 版本管理1.1.1 什么是版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。1.1.2 人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制，不方便多人同时编辑同一个文档，容易产生覆盖1.1.3 版本控制版本控制是一种记录文件内容变化，以便将来查阅特定版本修订情况的系统。版本控制其实最重要的是可以记录文件修改历史记录，从而让用户能够查看历史版本，方便版本切换1.1.4 版
2022-04-22 08:52:47
402
原创 前后端交互：Git(分支）
2. Git进阶2.1 、分支为了便于理解，大家暂时可以认为分支就是当前工作目录中代码的一份副本。使用分支，可以让我们从开发主线上分离出来，以免影响开发主线。2.1.1 什么是分支在版本控制过程中，同时推进多个任务，为每个任务，我们就可以创建每个任务的单独分支使用分支意味着程序员可以把自己的工作从开发主线上分离开来，开发自己分支的时候，不会影响主线分支的运行对于初学者而言，分支可以简单理解为副本，一个分支就是一个单独的副本2.1.2 分支特点同时并行推进多个功能开发，提高开发效率。
2022-04-22 08:51:49
602
原创 React全家桶（四）axios请求数据
React请求接口数据一、React ajaxReact本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但老版本浏览器不支持，不再使用XmlH
2022-04-19 19:47:09
1588
原创 React全家桶（三）React脚手架
React脚手架1、React脚手架React脚手架的概念：React脚手架和Vue脚手架类似，都是用来帮助程序员快速创建一个基于React的模板项目，包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖（基础的依赖库）可以直接运行一个简单效果项目的整体技术架构为: react + webpack + es6 + eslintReact脚手架的优点：● 无需配置；● 集成了对 React, JSX, ES6 和 Flow 的
2022-04-19 19:41:38
2090
原创 EventLoop
1.JavaScript 是单线程的语言JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。单线程执行任务队列的问题：如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。2.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：① 同步任务（synchronous）又叫做非耗时任务，指的是在主线程上排队执行的那些任务只有前一个任务执行完毕，才能执行后一个任务② 异步任务（as
2022-04-15 16:22:55
59
原创 宏任务与微任务
1. 什么是宏任务和微任务JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：① 宏任务（macrotask）：异步 Ajax 请求、setTimeout、setInterval、文件操作其它宏任务② 微任务（microtask）：Promise.then、.catch 和 .finallyprocess.nextTick其它微任务2. 宏任务和微任务的执行顺序每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任
2022-04-15 16:22:06
112
原创 React全家桶（二）组件化编程
React面向组件编程一、模块化与组件化理解一、模块概念：向外提供特定功能的js程序, 一般就是一个js文件。为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。作用：复用js, 简化js的编写, 提高js运行效率二、模块化当应用的js都以模块来编写的, 这个应用就是一个模块化的应用。三、组件概念：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)比如一个网页的头部部分，里面可以有css样式，img，js，html等，这放在一块就可以组成一个头
2022-04-15 14:37:58
439
原创 Bootstrap（ui框架）
目录总览：✍目录总览：（布局容器、栅格网格系统、排版、表单、缩略图、导航元素、分页、插件）1、Bootstrap1.1、下载与使用英文官网：http://getbootstrap.com/中文网站：https://getbootstrap.net/1.进入中文网站，选择版本 v3.4.02.下载完成后拷贝 dist 文件夹到项目中由于我们之后可能还会使用 LayUi 等其他插件，所以我们将 dist 改为 Bootstrap，方便辨认3.将 jQuery.js 放入我们的 j
2022-04-14 11:12:03
6743
原创 React全家桶（一）React入门
一、React简介1. 框架定义React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目。2. react可以解决的问题3. react特点4.React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。原生JavaScript实现数据渲染（每次渲染从头开始，往100条数据里面添加一条就得重新渲染101条）React实现数据渲染（与原来的数据进行比较，把新增数据渲染到页面）
2022-04-12 11:35:11
956
原创 前端框架的发展史
框架，目的很简单，能帮助我们提高效率框架对现代化项目开发模式的意义。前端框架第一阶段最开始， Web 的开发非常简单， 界面的展示与后端逻辑的处理并没有分离开来，当然从工程量的角度来看，应用逻辑也是非常简单，此时并没有什么前端与后端的区别，如图：前端框架第二阶段随着业务量和功能的增加，以及网民们对应用的美观度都有了一定的要求之后，一个 Web 应用的开发逐渐复杂起来，一两个人是根本无法承担全部的开发任务的，这就需要大家通力合作，而一个应用的开发也就分为了不同的模块，工程师也就分为了不同的工种.
2022-04-10 15:42:27
2593
原创 Vue全家桶(四)之ES6模块化与webpack打包
✍目录总览：模块化相关规范1. 模块化概述传统开发模式的主要问题① 命名冲突② 文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护2. 浏览器端模块化规范3. 服务器端模块化规范1. CommonJS① 模块分为 单文件模块 与 包② 模块成员导出：module.exports 和 exports③
2022-04-07 16:37:28
1212
原创 Vue全家桶(六)之VueX状态管理
✍目录总览：一、VueX概念1. VueX的概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。VueX里面所有数据都可以全局使用。2. 状态管理的概念可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。将这个对
2022-04-07 15:23:08
856
原创 Vue全家桶(五)之Vue-Router路由 (常见用法)
Vue-router 路由🔥路由地址Vue-router 路由 (概念及基本使用)🔥https://blog.csdn.net/m0_55990909/article/details/123957200Vue-router 路由 (常见用法) 🔥https://blog.csdn.net/m0_55990909/article/details/123981283vue-router 的常见用法一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组
2022-04-06 16:52:01
711
原创 Vue全家桶(五)之Vue-Router路由 (概念及基本使用)
Vue-router 路由🔥路由地址Vue-router 路由 (概念及基本使用)🔥https://blog.csdn.net/m0_55990909/article/details/123957200Vue-router 路由 (常见用法) 🔥https://blog.csdn.net/m0_55990909/article/details/123981283路由的基本概念与原理路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为： 后端
2022-04-06 16:48:47
752
原创 Vue接口调用（三）async/await用法
async/await用法1. async/await的基本用法async/await是ES7引入的新语法，可以更加方便的进行异步操作async关键词用于函数上（async函数的返回值是Promise实例对象）await关键子用于async函数当中（await可以得到异步的结果）async function queryData(id) { const ret = await axios.get('/data'); return ret;}queryData.then(ret=>{
2022-04-06 08:12:24
16137
原创 Vue接口调用（二）axios用法
axios用法✍目录总览：1. axios的基本特性axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征：支持浏览器和node.js支持promiseAPI自动转换JSON数据能拦截请求和响应请求转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密）2. axios的基本用法//客户端请求axios.get('http://localhost:3000/adata') .then(ret =>{ //data属性
2022-04-06 08:11:12
2955
1
原创 Vue接口调用（一）fetch用法
✍目录总览：1. fetch概述基本特性fetch是传统ajax的升级版本，是原生js更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版。基于Promise实现语法结构fetch(url).thne(fn2) .thne(fn3) ... .then(fn)2. fetch的基本用法第一个.then接收到的是Promise数据集需要被.then处理才可以看到 我们最终想要的数据。//客户端请求<body> <sc
2022-04-04 17:40:16
8588
原创 Vue组件化开发-单文件组件
单文件组件1、单文件组件1.在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。2.这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：全局定义 (Global definitions) 强制要求每个 component
2022-04-04 17:37:51
1392
原创 Vue全家桶(二)之组件化开发
✍目录总览：（组件化概念、组件注册、数据存放、组件数据共享、组件插槽、使用步骤）一、组件化概念1. 组件化开发思想组件化思想的特点：标准、分治、复用、组合2. 组件定义 **组件化**开发：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。3. Vue中的组件化开发 **vue** 是一个**支持组件化开发的前端框架**。 **vue** 中规定：**组件的后缀名是 .vue**。之前接触到的 App.vue 文件本质上就是一个 vue 的组件，即**
2022-04-04 17:35:21
241
原创 Element-UI 的基本使用（基于 Vue 的 组件库）
✍目录总览：1. 基于命令行方式手动安装① 安装依赖包 npm i element-ui –S② 导入 Element-UI 相关资源// 在main.js文件内导入组件库import ElementUI from 'element-ui';// 导入组件相关样式import 'element-ui/lib/theme-chalk/index.css';// 配置 Vue 插件Vue.use(ElementUI);2. 基于图形化界面自动安装① 运行 vue ui 命令，打开图形
2022-04-04 17:31:52
210
原创 Vue全家桶(三)之cli3脚手架
✍目录总览：1. Vue 脚手架的基本用法Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/Vue-cli 3 与 2 版本有很大区别:vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化移除
2022-04-04 17:28:50
552
原创 Vue全家桶(一)之基础指令
Vue 基础指令（模板语法）✍目录总览：（模板语法概述、基础指令）Vue模板语法1. 如何理解前端渲染？把数据填充到HTML标签中2. 前端渲染的方式前端渲染的方式主要有三种：原生js拼接字符串使用前端模板引擎使用vue特有的模板语法2.1 原生js拼接字符串基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如下图所示。var d = data.weather;var info = document.getElementById('info
2022-04-02 13:02:38
431
原创 Vue全家桶(一)之常用特性
Vue常用特性✍目录总览：（表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期）一、表单操作1. 基于Vue的表单操作v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。1.1 Input 单行文本<body><div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我……
2022-04-02 12:20:31
604
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人