- 博客(30)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 组件性能优化
1、减轻 state减轻state： 只能存储跟组件渲染相关的数据（比如： count/列表数据/loading等）注意：不用做渲染的数据不要放在state中，比如定时器id等对于这种需要在多个方法中用到的数据，应该放在this中2、避免不必要的重新渲染组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰。问题：子组件没有任何变化时也会重新渲染解决方式： 使用钩子函数shouldComponentUpdate(nextProps,nextState)作用： 通过返回值决定该组件
2022-06-08 11:40:18
441
原创 组件更新机制
setState()的两个作用：1、修改state 2、更新组件（UI）过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件及其所有子组件）
2022-04-14 16:40:23
165
原创 React中的setState()
setState() 说明setState()是异步更新数据注意：使用该语法时，后面的setState()不要依赖于前面的setState()（在同一个方法里面不要去调用多次，因为是异步的所以取的值都是一样的）可以多次调用setState(),只会触发一次重新渲染...
2022-04-14 15:14:41
683
原创 render-props和高阶组件
render-props和高阶组件React组件复用概叙复用相识的功能复用：1、state 2、操作state的方法（组件的逻辑）两种方式: 1、render props 2、高阶组件（HOC）render props模式思路： 将要复用的state和操作state的方法封装到一个组件中如何拿到组件中复用的state?在使用组件时，添加一个值为函数的prop,通过函数参数来获取（需要组件内部实现）如何渲染任意的UI使用该函数的返回值作为要渲染的UI内容// mouse 可以拿到组件
2022-03-30 15:41:20
1314
原创 React组件的生命周期
组件的生命周期意义：组件的声明周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期： 组件从被创建到挂载页面中运行，再到组件不用时卸载的过程生命周期的每个阶段总是伴随着一些方法调用，这些方法就是声明周期的钩子函数钩子函数的作用：为开发人员在不同阶段操作组件提供了时机只有 类组件 才有生命周期生命周期的三个阶段创建时（挂载阶段）执行顺序：constructor()、render()、componentDidMount()constructor() 钩
2022-03-30 11:24:51
201
原创 React基础组件
React 组件介绍组件是React的一等公民，使用React就是在用组件组件标识页面中的部分功能组合多个组件实现完整的页面功能特点：可复用、独立、可组合React 组件的两种创建方式使用函数创建函数函数名称大写开头必须有返回值渲染函数组件：用函数名作为组件标签名// 函数组件const App = () => { return ( <div className="App"> hole </
2022-03-15 11:08:05
1561
转载 React中的JSX
createElement()的问题1、繁琐不简洁2、不直观，无法一眼看出所描述的结构3、不优雅，用户体验不爽什么是JSXjsx是JavaScript XML的简写，表示在JavaScript 代码中写XML(HTML)格式的代码优势：声明式语法更加直观、与HTML结构相同，降低了学习成本 提升开发效率// 2 创建react元素// JSX 基本语法const title = <h1>Hello JXS</h1>// 3 渲染react元素ReactD.
2022-03-09 16:07:46
188
转载 Vue computed和watch的区别
总结：computed：1、支持缓存，只有依赖数据发生改变，才会重新进行计算2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化3、如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用computedwatch：1、 不支持缓存，数据变，直接会触发相应的操作；2、支持异步3、当一个属性变化，会影响其他属性时，也就是其他属性依赖这个属性，一般用watch...
2022-03-02 17:40:09
191
原创 vue2.0响应式实现
// 订阅者模型let Dep = { clientList: {}, // 容器 listen:function (key,fn) { // 短路表达式 (this.clientList[key] || (this.clientList[key] = [])).push(fn); }, // 发布 trigger: function () { let key = Array.prototype.shift.call(arguments), fns = this.clientL
2022-03-01 21:24:50
121
原创 原型与原型链
原型（prototype）原型：函数特有的属性或方法挂载到原型上是为了继承原型链 （proto => [[prototype]] ）每个都有function Person() {}// person的原型里加入属性和方法Person.prototype.name = "小明"Person.prototype.age = 18Person.prototype.getAge = function() { console.log(this.age)}// 实例（new
2022-02-28 20:04:26
116
原创 闭包 讲解
什么是闭包方法里放回一个方法// 简单的闭包function a() { let i = 1; return function () { return i }}闭包存在的意义1、延长变量的声明周期(永久存在内存当中 慎用)2、创建私有的环境顺便提一下 作用域链我对于它的理解是： 找爸爸下面这段代码：会输出小三如果在fn3里面找不到 name 的话就会去找 fn2 里面的 name就近原则：在本方法里面找不到 就去爸爸那找let name = '小明'
2022-02-25 21:42:38
450
原创 TypeScript 基础类型
类型的定义// 变量名：类型 = 值 (注意：值要跟类型一样)// 布尔let isDone: boolean = false;// 数字 (注意：可以使用进制)let decLiteral: number = 6;let hexLiteral: number = 0xf00d;let binaryLiteral: number = 0b1010;let octalLiteral: number = 0o744;// 字符串 (注意：可以使用字符串模板)let nam.
2022-02-14 14:15:55
202
原创 react理论
react是什么？用于构建用户界面的js库1.发送请求获取数据。2.处理数据。3.操作DOM呈现页面。是一个将数据渲染为HTML视图的开源js库。谁开发的？由Facebook开发，且开源为什么要学1、js操作DOM繁琐、效率低（DOM-API操作UI）。2、使用js直接操作DOM、浏览器会进行大量的重绘重排。3、原生js没有组件化编码方案，代码复用率低。react的特点1、采用组件化模式、声明式编码，提高开发效率及组件服用率。2、在react Native 中可以使用r
2022-01-18 16:41:17
337
原创 git命令
// 配置用户名git config --global user.name "用户名"// 配置邮箱git config --global user.email 邮箱// 查看配置git config --list git 三种状态与工作模式状态：已提交 已修改 已暂存工作区域： 工作区 暂存区 git仓库......
2022-01-18 15:53:51
118
原创 webpack打包原理
打包工作的基本流程如下:1.需要读到入口文件里的内容2,分析入口文件,递归的去读取模块所依赖的文件内容,生成AsT语法树3,根据AST语法树,生成浏览器能够运行的最终代码步骤先用fs模块异步获取文件内容在用@Babel/parser模块把ES6模块解析(AST语法树)安装@Babel/traverse模块在使用traverse获取到入口文件里面的其他引入的文件路径在去安装@babel/core和@bacel/preset-env包使用@babel/core里面的transformF.
2021-12-29 20:30:22
532
原创 axios二次封装
1、先安装 axios2、在新建一个axios的文件夹3、在新建一个request.js的文件4、把下面的代码复制进去获取去看axios文档进行配置5、在axios的文件夹下新建一个公共请求文件6、把request 文件引入进行做一个公共请求的方法7、按需引入 哪些页面需要就去引公共的请求文件去请求接口import axios from "axios";const instance = axios.create({ // 请求的域名 baseURL: 'https:.
2021-12-28 21:56:45
355
原创 React和Vue循环为什么要加key
1、React和Vue循环，基于没有key的情况diff速度会更快,没有绑定key的情况下遍历节点的时候,虚拟DOM的新旧节点会复用。2、不带有key，并且使用简单的模板，基于这个前提下，可以更有效的复用节点，diff对比也是不带key的快，因为带key在增删节点上有耗时。这就是Vue文档所说的默认模式。但是这个并不是key作用，而是没有key的情况下可以对节点就地复用，提高性能。3、 为什么还要建议带key呢？因为这种不带key只适用于渲染简单的无状态组件。对于大多数场景来说，列表组件都有自己的状态.
2021-12-24 14:41:25
776
原创 vue2 原理
获取和设置/**Object.defineProperty(obj, prop, descriptor)参数1:obj: 要在其上定义属性的对象。参数2:prop: 要定义或修改的属性的名称。参数3:descriptor: 将被定义或修改的属性的描述符(包含数据描述符和存取描述符)。**///数据描述符let obj1 = {};Object.defineProperty(obj1, "key", { //该属性对应的值，默认为 undefined。 value: 1, /.
2021-12-24 11:36:34
440
原创 观察者与订阅者模式
订阅者模式（多个接受人,只有一个发布点）// on是订阅 emit是发布let e = { _callback: [], on(callback) { // 订阅一件事 当这件事发生的时候 触发对应的函数 // 订阅 就是将函数放到数组中 this._callback.push(callback); }, emit(value) { this._callback.forEach(method => .
2021-12-22 14:08:54
159
原创 Vue如何优化首页加载
首页白屏原因主要原因是单页应用,加载资源过慢,需要将所有需要的资源都下载到浏览器端并解析。单页面应用的html是靠js生成,因为首屏需要加载很大的js文件(app.ja vendor.js),所以当网速差的时候会产生定程度的白屏。首屏优化方法1,在路由返回内容前添加loading(骨架屏)vue-server-rendereryue-skeleton-webpack-pluginpage-skeleton-webpack-plugin2,使用首屏SSR +跳转SPA方式来优化3,改单页应
2021-12-14 15:13:25
1183
原创 Vue3.2 defineEmits 和 defineExpose
1.defineEmits// 普通方式写法（注意它不会去检测类型值）const emits = defineEmits(['lrqclick','lrqchange'])// 去调用父组件自定义的事件emits('lrqclick', "2")<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" lrq="lrq" @lrqclick="he"> <template #lrq> 这是一个具名插槽.
2021-12-13 17:32:38
4551
原创 Vue3.2setup 到 顶层 await
1.setup直接挂再script<script setup lang="ts"></script>2.defineProps// props 改为defineProps// required 改为 ? defineProps<{ msg?: string, lrq: string}>()3.withDefaults// withDefaults是给默认值withDefaults(defineProps<{ .
2021-12-13 11:09:43
6346
1
原创 Vue3基础
1. setup函数##setup 函数是组件逻辑的地方，它在组件实例被创建时，初始化 props 之后调用**2. refref 主要是用来包装原始类型的数据setup(props) { const msg = ref('hello') const appendName = () => { msg.value = `hello ${props.name}` } return { msg, appendName
2021-12-07 11:22:27
1247
原创 vue防抖和节流
// 节流 (N秒内触发一次) throttle(fn, interval) { let last = 0 return function () { let context = this let args = arguments let now = +new Date() if ((now - last) > interval) { last = now fn.apply(context, args) }
2021-12-06 15:45:46
463
原创 倒计时Javascript
倒计时定时器function countDownTime() {// 倒计时截止时间var EndTime = new Date(‘2021/01/01 00:00:00’);// 现在的事件var NowTime = new Date();// 时间差（时间单位：ms）var t = EndTime.getTime() - NowTime.getTime();var d = 0;...
2019-05-30 16:44:27
157
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人