- 博客(63)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 React Hooks 基础、实现、原理
1.Hooks的调用尽量只在顶层作用域进行调用。2.不要在循环、条件或者是嵌套函数中调用Hook，否则可能会无法确保每次组件渲染时都以相同的顺序调用Hook。3.Hooks 的串联不是一个数组，是一个链式的数据结构，从根节点 workInProgressHook 向下通过 next 进行串联。4.React Hooks目前只支持函数组件。
2023-01-07 17:14:56
1322
原创 问题小结（3.22）
1.通过搜索展示的内容其中的关键词显示高亮我们通过后端给与的接口，调用接口展示数据内容时，有时候是带条件参数的，也就是说通过特定的参数来查询相对应的数据。搜索按钮功能就是如此，那么当我们需要把展示的数据其中的关键词搜索展示的是高亮应该如何做到呢？方法：1.通过正则表达式把对应的内容筛选出来，然后设置其的高亮样式再通过拼接拼接回去，将拼接后的数据展示到页面当中2.遍历数据利用indexOf判断是否有对应的关键词，关键词内容设置为高亮后返回数据，再展示我利用的是第二种方法：<span v-htm
2022-03-22 17:00:54
1314
原创 问题小结（key）
1.const声明的常量不可以改变？在学习ES6的时候都会有这样的说法，const定义的变量不可以修改，而且必须初始化。但是但const定义的常量为对象呢？例如 const obj = {a:1};obj.a = 2;console.log(a) //输出为2因为对象是引用数据类型，里面的值只是引用所在地址所以可以修改。但是如果我们要使对象里面的值不能修改呢？那就要用到Object.freeze（）方法了。需要注意的是，使用 Object.freeze()冻结的对象只能保证这个对象的属性不变，如果
2022-03-11 14:56:01
783
原创 开发中发现的小技巧
1.利用Echart作一个词云为了减少消耗和可复用性，将其封装成一个组件EChart_wordcloud.vue<template> <div :style="{height:height,width:width}" /></template><script>import * as echarts from 'echarts';import "echarts-wordcloud";// echarts themerequire('echa
2022-03-07 15:22:40
398
原创 Redux使用例子
组件：import React, { Component } from 'react'//引入actionimport { increment, decrement, incrementAsync} from '../../redux/actions/count'//引入connect用于连接UI组件与reduximport {connect} from 'react-redux'//定义UI组件class Count extends Component { state = {car
2022-02-28 17:08:40
397
原创 Redux知识点
Redux中文文档：https://www.redux.org.cn/Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。作用: 集中式管理react应用中多个组件共享的状态。什么情况下需要使用redux？1.某个组件
2022-02-28 17:02:07
486
原创 React -- 组件的生命周期
React组件的生命周期和Vue类似都是代表组件从创建到死亡经历的一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用，我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。生命周期流程图(旧)生命周期的三个阶段（旧）初始化阶段: 由ReactDOM.render()触发—初次渲染1. constructor()2. componentWillMount()3. render()4. componentDidMount() =====>
2022-02-28 16:32:02
163
原创 React-组件三大核心属性: state、props、refs
1、statestate是组件对象最重要的属性, 值是对象.React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。例子： //1.创建组件 class Weather extends React.Component{ //初始化状态 state = {isHot:false,wind:'微风'
2022-02-28 16:14:24
1282
原创 React 面向组件编程
React面向组件编程开发React组件分为函数式组件和类组件两种。最大的区别在于他们声明和使用的不同。1.函数式组件函数式组件，就是利用函数进行编程，是一种编程范式。以函数作为主要载体的编程方式，用函数去拆解、抽象一般的表达式，最小‘可视’单位是函数的一种编码规范，重点体现‘函数式’。例子：//1.创建函数式组件function MyConent(){console.log(this);return 我是用函数定义的组件}//2.渲染组件到页面ReactDOM.render(,doc
2022-02-28 15:10:08
552
原创 React JSX
JSX是什么？官方解释：JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。全称: JavaScript XML 。 react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖作用
2022-02-27 22:27:14
84
原创 开发过程中遇到的一些小问题记录（I）
1.向后端发起数据请求，报404错误熟悉的404：代表接口未找到，也就是说路径问题但是我看我的路径和请求路径一模一样，然后就查呀查，结果发现基本上都是在说路径问题（也有几小概率后端问题），但是请求路径是可以直接访问的。最后发现别人的pathRewrite前有http，一试完美解决（果然路径问题）。(小声吐槽，接口文档都那么描述不清晰的嘛，接口毫无规律可言)2.style的scoped属性在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私
2022-02-24 17:54:17
177
原创 小结过去几个月+复盘遇到的一些问题
序言岁月寥寥,时光悠悠。从在学校慢慢摸索的程序员小白，到忐忑不安的面试小白，再到现在逐渐接触、入门企业落地项目的菜农。参与项目，辅助开发。其中遇到问题和重要的知识点，记录起来，然后有时间进行复盘非常重要。（本来打算年后就进行的，一拖再拖）1.项目依赖安装失败（1）要么是node版本对应不上（2）要么安装着安装着卡住（3）要么报Install fail! Error: [tui-editor@1.3.3 › tui-chart@3.11.3 › raphael@git+https://github.
2022-02-21 23:17:14
1936
转载 VScode快捷键
基础编辑 Basic editing导航 Navigation搜索和替换 Search and replace多光标和选择 Multi-cursor and selection丰富的语言编辑 Rich languages editing编辑器管理 Editor management文件管理 File management显示 Display调试 Debug集成终端 Integrated terminal...
2022-01-29 09:48:13
66
原创 TypeScript面向对象编程(二)
面向对象的特点 封装、继承、重写封装：相当于把属性和方法放入一个容器中，将属性和方法存储储存起来，并可以调用。 继承：通过继承可以将其他类中的属性和方法（除了私有）引入到当前类中。通过继承可以在不修改类的情况下完成对类的扩展 重写：当使用继承时，子类有和父类相同名字的方法，子类会覆盖掉父类的方法。TS中属性具有三种修饰符：public（默认值），可以在类、子类和对象中修改protected ，可以在类、子类中修改private ，可以在类中修改 只读属性（readonly）： 如果在声明属性时
2022-01-27 22:57:45
1344
原创 TypeScript面向对象编程(一)
什么是面向对象编程？官方解释：面向对象程序设计(Object Oriented Programming)作为一种新方法，其本质是以建立模型体现出来的抽象思维过程和面向对象的方法。模型是用来反映现实世界中事物特征的。任何一个模型都不可能反映客观事物的一切具体特征，只能对事物特征和变化规律的一种抽象，且在它所涉及的范围内更普遍、更集中、更深刻地描述客体的特征。通过建立模型而达到的抽象是人们对客体认识的深化。通过查阅各种各样的对面向对象编程的解释，对面向对象有了一些理解：面向对象是相对于面向过程而言的。面向对
2022-01-16 12:29:38
573
1
原创 TypeScript配置属性
TypeScript配置属性需要先创建一个tsconfig.json文件。配置选项：（包含）include：定义希望被编译的目录默认值：["**/*"]示例："include":["./src/**/*","tests/**/*"] //**:所有目录 *：所有文件`上述示例中，所有src目录和tests目录下的文件都会被编译exclude定义需要排除在外的目录默认值：[“node_modules”,“bower_components”,“jspm_packages”]示例："
2022-01-12 12:55:11
696
原创 TypeScript与JavaScript
JavaScriptJavaScript 是一种轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行，能够实现浏览器端丰富的交互功能，为用户带来流畅多样的用户体验。JavaScript 是基于对象和事件驱动的，无需特定的语言环境，只需在支持的浏览器上就能运行。JavaScript 语言具有以下特点：JavaScript 是一种脚本编写语言，无需编译，只要嵌入 HTML 代码中，就能由浏览器逐行加载解释执行。JavaScript 是一种基于对象的语言，可以创建对象同时使用现有对象。但是
2022-01-11 21:41:53
790
原创 vue路由跳转的几种方式
一、router-link1不带参数： // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 2带参数：<router-link :to="{name:'home', params: {id:1}}"><rou
2022-01-10 15:00:14
332
原创 CSS三栏布局
1.弹性布局<style> .main { display: flex; justify-content: center; height: 300px; } .left { width: 200px; height: 100%; background-color: red; } .content { flex: 1; background-color: blue; } .right { w
2022-01-07 23:14:45
294
原创 Vue 的 computed 和 watch 的区别
computed 是模板表达式的声明式描述，会创建新的响应式数据。而 watch 是响应式数据的 自定义侦听器，用于响应数据的变化。除此之外，computed 还具有可缓存，可依赖多个属 性，getter 函数无副作用等特点。watch 则更适用于异步或开销大的操作。1. 实现原理在了解 Vue 数据双向绑定的基础上，computed 等同于为属性设置 getter 函数 （也可设置 setter），而 watch 等同于为属性的 setter 设置回调函数、监听深度 deep 及响应速度
2022-01-07 13:17:36
1607
原创 webpack 在不同阶段做的事情
1. webpack 初始化过程从 webpack 项目 webpack.js 文件 webpack 方法出发，可以看到初始化过程如下：将命令行参数和用户的配置文件进行合并。调用 getValidateSchema 对配置进行校验。调用 createCompiler 创建 Compiler 对象。i. 将用户配置和默认配置进行合并处理。ii. 实例化 Compiler。iii. 实例化 NodeEnvironmentPlugin。iv. 处理用户配置的 plugins，执行 plugin
2022-01-07 12:44:45
628
原创 webpack 的工作流程
webpack 是一种模块打包工具，可以将各类型的资源，例如图片、CSS、JS 等，转译组合为 JS 格式的 bundle 文件。webpack 构建的核心任务是完成内容转化和资源合并。主要包含以下 3 个阶段：1. 初始化阶段初始化参数：从配置文件、配置对象和 Shell 参数中读取并与默认参数进行合并，组合成最终使用的参数。创建编译对象：用上一步得到的参数创建 Compiler 对象。初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等。2.
2022-01-07 12:42:12
2358
原创 js延迟加载
方法1：defer , 这属性可以让DOM加载好了再执行js外部文件，只用于引入的script标签中 ,在方法2：async, 这属性异步加载js，只用于引入的script标签中 在浏览器开了一个线程，在浏览器开了一个线程，在浏览器开了一个线程，js是单线程浏览器不是，所以在浏览器再渲染线程的同时，也开启js引擎线程，即使加了async，并不能改变是在onload事件之前就运行的事实,与defer不同的是，这异步是和渲染同时进行，并且多个async顺序情况不确定，不考虑依赖，所以用还是defer更好方法3
2022-01-06 20:18:15
216
原创 Cookie 、session、sessionStorage 、localStorage 的区别
Cookie： cookie 数据始终在同源的 http 请求中携带 （即使不需要） ， 即 cookie 在浏览器 和服务器间来回传递 。 而 sessionStorage 和 localStorage 不会自动把数据发给服务器， 仅 在本地保存。 cookie 数据还有路径 （path） 的概念， 可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。 （key： 可以在浏览器和服务器端来回传递， 存储容量 小， 只有大约 4K 左右）session：session的数据信
2022-01-06 19:23:29
731
转载 前端和后端是如何交互的
接口数据格式你可以和你的后端商量，比较正规的会给你一个接口文档，上面写清了参数和代表的意义，以及传递的数据类型，接着他会给你一个接口，然后我们前端要做的就是对接口了，一般是用ajax来请求接口，请求里面放上url，dataType和success成功以后要执行的操作就好了，在这个成功函数里面你可以写当你这个请求成功以后你想执行的操作，当你不确定是否请求到的时候，你可以F12来查看响应码，或者在成功函数里面打印console.log(data)来检查，记得这个data也要传递给success函数哦，就是这个成
2021-12-26 22:42:56
12573
空空如也
npm在VS-code中运行不了 在cmd上可以 node都可以运行
2022-03-10
怎么设置复选框和对应的文字的距离？
2022-02-22
elementui el-upload清空上传列表
2022-02-15
Vue怎么提高显示的优先级 或者覆盖 如上图，字体显示不完整
2022-02-09
react使用reduce报错（无法读取未定义的属性（读取'reduce'））
2022-01-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人