- 博客(350)
- 收藏
- 关注
RSS订阅
原创 在校学生课余时间用React肝出一款个人博客系统，前台+后台管理，求指点
1. 前言之前我使用hexo搭建过个人博客。hexo很强大，渲染页面速度快，支持markdown语法，可以一键部署，还可以扩展各种插件。但hexo搭建的是静态页面，每次更新文章，都要重新生成静态页面，再部署页面。hexo也没有后台管理，想要修改发布的文章，只能修改源代码，再重新生成页面。所以很早之前就想写一个自己的博客系统，由博客展示页面和后台管理页面构成，通过后台管理页面，可以实时更新、发布文章，非常方便。但在当时还没有能力写出这样一个系统，就一直没有去做。后来学习了React之后，想尝试下写自己的
2021-08-25 09:47:05
963
4
原创 阿里云部署，基于React、C/C++，使用TCP/HTTP协议的多人聊天室Web应用
1. 前言最近和后端同学I’M渣渣一起完成了一个Demo级的多人聊天室应用，实现了聊天室的基本功能。采用前后端分离方案，我负责前端代码的编写，I’M渣渣实现了后端的接口。预览地址：多人聊天室源码仓库：[GitHub]2. 应用简介主要功能用户注册用户登录发送、接收消息退出功能主要用到的技术前端：React脚手架Create-React-App状态管理redux + react-redux等前端路由 React-Router、路由鉴权少量使用 AntD 组件库 （Ic
2021-06-01 20:58:09
1221
11
原创 一款使用React、腾讯云开发的TodoList待办事项Web应用
1. 前言最近写了一款基于React脚手架开发的 TodoList 网页应用，主要记录自己的代办事务，方便查看、管理、安排时间，提升效率。PC Web端 + 移动端 + 黑暗模式，可日常使用。没有复杂的界面，没有繁琐的设置，开箱即用，专注于任务管理。应用网址：TodoList2. 应用简介1. 主要功能邮箱注册、登录注册邮箱地址、密码的验证邮箱登录后，可绑定用户名，选择使用用户名登录同一账号退出功能页脚显示一句诗词（今日诗词）实时时间显示黑暗模式、白天模式切换，下次登录自动切换上
2021-05-22 12:29:45
745
4
原创 [详细] Github Actions自动部署hexo博客到阿里云OSS
1. 为什么我要持续部署通过Hexo搭建的个人博客，虽然很强大、很方便，输入hexo clean&&hexo g -d就能快速生成静态页面并部署访问。但Hexo生成的是静态页面，无后端，这些工作都是在本地的电脑上操作的，如果更换电脑了，还需要在github上冲下拉取源代码，重新搭建环境再部署。若电脑不在身边想要随时编辑文章，就有点困难了。另外，每次在本机部署完，还要将源代码push到仓库。这样操作显然是有些繁琐的。好在Github Actions提供了解决方案，可以为仓库添加自动化的操作
2021-04-11 14:44:05
1019
2
原创 [详细] 搭建hexo博客并部署阿里云服务器
最近购买了阿里云的云服务器和域名，自己折腾搭建博客，这里我把搭建的过程记录分享一下。这是我搭建的博客，欢迎大家来访问呀！！！一、本地电脑1. 安装node.js浏览器进入https://nodejs.org/en/，安装LTS（Long Term Support）版本，稳定。按住win+R，输入cmd，进入cmd命令行工具，输入node -v查看node版本，若出现版本信息，则说明node安装成功。2. 安装hexo在cmd命令行中输入npm install hexo-cli -g，安装
2021-03-01 20:44:16
1305
12
原创 一道代码题看 CommonJS 模块化规范
在模块内部定义的变量，无法在其他模块中所读取。根据CommonJS模块化规范，一个单独的JS文件就是一个模块，每个模块是一个单独的。再次导入相同模块时，并不会再执行了，会直接从内存中取这个。实际上，在第一次导入中，会执行要导入的文件，并在内存中缓存一个对象，其中。，形成循环引用，是否会报错呢？若不报错，运行的结果是怎么样的？导入模块，实际上就是执行一遍要导入的模块，然后将其输出的。，说明若多次引用，实际上导入的模块是同一个对象。模块，并判断两个导入的变量是否为相等。属性，分别是文件中定义的常量。...
2022-07-16 00:55:07
502
1
原创 ES6：Proxy与Reflect学习笔记
ProxyProxy 是什么通过调用new Proxy()，可以创建一个代理用来代替另一个对象，实现基本操作的拦截和自定义。这个代理与目标对象表面上可以被当作同一个对象来看待。关于Proxy有几个术语：traps：捕获器，提供访问属性的方法。handler：处理器，一个定义了一个或多个捕获器的对象。target：被Proxy代理虚拟化的对象。通过如下方式，即可创建一个Proxy：const p = new Proxy(target, handler);两个参数即对应上述的相应术语。
2022-04-16 21:31:46
1363
原创 Web Workers：在后台线程执行指定脚本
使用Web Worker可以在后台线程中运行 JavaScript，线程可以执行任务而不会干扰用户界面。使用规则worker是使用Worker()构造出的实例对象，在后台线程中运行一个命名的 JavaScript 脚本。worker实例对象可以通过将信息发送到创建它的 JavaScript 代码。worker运行在另一个全局上下文中，而非window对象。worker中不能直接操作 DOM 节点，也不能使用window对象的默认方法和属性。worker和主线程之间，通过postMessage(
2022-04-11 15:05:19
1104
原创 学习 redux 源码笔记：redux 是如何工作的？
最近学习了状态管理库 redux 的源码，简单记录一下学习笔记。redux 简介redux是 JavaScript 的状态管理库，提供可预测的状态管理。redux有几个核心概念：store：唯一存放状态的容器state：状态action：状态更新的动作reducer：action对应的更新状态的动作函数dispatch：通过action找到对应的reducer，更新stateredux的使用有三大原则：单一数据源整个应用的state存储在一个状态树中，整个状态树只存在于唯一的s
2022-04-07 15:48:33
1098
原创 JavaScript关于JSON字符串的相关操作
JSON.stringify语法JSON.stringify(value[, replacer [, space]])value：将要序列化成 一个 JSON 字符串的值replacer：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。space：指定缩进用的空白字符串，美化输出。举例如下
2022-04-01 16:55:02
1792
原创 解决webpack5打包CSS图片路径不正确问题
问题最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack 配置如下：module.exports = merge(common, { target: 'browserslist', mode: 'production', devtool: false, output: { path: path.resolve(ROOT_PATH, './b
2022-03-25 13:00:55
3769
原创 实践：基于Webpack5搭建React+TS开发环境
💡前言最近学习了 Webpack 5 之后，想自己搭建个项目练练手，于是就搭建了一个基于 Webpack 5 的 React 的脚手架。脚手架配置了相关模块，集成了常用功能，便于自己以后 React 新项目的搭建，开箱即用！仓库地址：「Github」🔌模块/功能框架React路由react-router-domTypescript状态管理库redux样式预处理less、sass代码检测eslintgit commit前规范检测commitlint时间库dayjsUI库antd，配
2022-03-08 22:04:47
1728
原创 React Portals：将子节点渲染到其他DOM节点
使用 React 时，一般来说，使用函数组件return一个元素时，该元素是被挂载到其最近的 DOM 父节点下，例如：return ( <div> {this.props.children} </div>);挂载了一个新的div元素，其子元素被渲染在此div中。但是，我们需要将子元素挂载到其他的任意 DOM 节点下。例如，最近在实习中遇到一个的问题，要写一个鼠标悬浮时向下弹出选择框的效果。实际效果却是选择框向下弹出，但只显示出了一部分，有一部分不可见。打
2022-03-02 15:56:21
1203
原创 Commit Message 相关规范整理
最近在实习，写了一个小需求。本地调试没问题后，提交代码，发现一直有两个错误：subject may not be empty [subject-empty]type may not be empty [type-empty]Mentor 指出，是我提交时的 Commit Message 不规范造成的。后来自己学习了一下 Commit Message 规范，记录成此笔记，若有不妥之处，欢迎批评指出～1. Commit Message 组成按照业界流行的 Conventional Commits
2022-01-25 17:08:33
2878
原创 mini-react-router 实现核心路由跳转功能
1. 实现路由跳转实现了与react-router-dom的5.x版本相同的用法，包括BrowserRouter、Link、Switch、Route等组件，基本用法如下代码所示：<Router> <div> <Link to="/a">组件A</Link> <Link to="/b">组件B</Link> <Link to="/a/c">组件C</Link&g
2022-01-07 20:44:31
544
原创 JavaScript 实现异步任务调度器
1. 题目要求最近遇到了一个 JavaScript 手写代码题，要求实现一个具有并发数量限制的异步任务调度器，可以规定最大同时运行的任务。实现一个Scheduler类，使下面的代码能正确输出。// 延迟函数const sleep = time => new Promise(resolve => setTimeout(resolve, time));// 同时进行的任务最多2个const scheduler = new Scheduler(2);// 添加异步任务// time
2022-01-04 14:24:01
2066
原创 一次移动端适配实践 —— rem布局
最近把之前写的 TodoList 小项目重构了一遍。比起之前的版本，重构后的项目改用 Hook，使用 Scss 作为 CSS 预处理器，react-router-dom升级到 V6 版本，同时使用了rem的移动端适配方案。本文就这次重构，总结这次的rem移动端适配实践。1. 几个概念1. 物理像素物理像素又叫设备像素，指的是屏幕上的显示单元，设备实际的像素点，由设备本身的屏幕决定。一个物理像素就是屏幕上一个最小的显示单元，每个显示单元都有自己的颜色和亮度。例如，某屏幕设备在宽度方向有 750 个像素点
2022-01-01 18:02:28
689
原创 JavaScript 中null和undefined的区别
JavaScript 中的基本数据类型包括：String、Number、Boolean、null、undefined、BigInt，其中null和undefined都表示“无”这层含义，一般情况下，两者几乎没有区别。1. 相似之处在全局定义两个变量，一个是null，另一个是undefined，最终他们都被挂载到全局对象上了，且值都为undefined：var a = null;var b = undefined;console.log(global.a, global.b); // undefi
2021-12-16 16:23:15
1016
1
原创 React 性能优化方法useMemo、useCallback
在 React 中，可以使用useMemo和useCallback来优化无用渲染的性能问题。本文是自己学习useMemo和useCallback的笔记，介绍了它们的使用场景和区别。
2021-12-15 21:12:42
1814
原创 JavaScript 常见的5种设计模式
本文是自己学习 JavaScript 设计模式的笔记，整理了 JavaScript 常见的五种设计模式，并总结了相应的案例代码。1. 装饰者模式装饰者模式是指，在不改变对象自身代码的前提下，新增功能的模式。如下代码所示，创建3个飞机对象。plane可以发射普通子弹；plane2不仅可以发射普通子弹，还可以发射导弹；plane3不仅可以发射普通子弹和导弹，还可以发射炮弹。创建构造函数Plane2时，不改变plane的功能，只增加功能，将Plane的实例挂载到自身属性上，并在fire方法下，调用.
2021-11-29 12:09:45
1650
原创 React 利用Context实现组件通信
本文是自己学习useContext的笔记。1. 两组件通信React 中，父子组件需要通信时，父组件可以将参数写在props中传递给子组件，实现父组件向子组件通信；父组件还可以传递一个函数给子组件，子组件调用这个函数，实现子组件向父组件的通信。这就完成了父子组件的相互通信。但当组件嵌套关系复杂的时候，如下图所示，A组件下有B组件和C组件，B组件下有D组件，C组件下有E组件。当需要在A组件和D组件之间通信时，也可以采取上述的方法，A通过props一层一层传递参数到D组件，D组件再调用函数，一层一.
2021-11-25 20:36:25
1002
原创 React 利用消息订阅与发布机制实现组件通信
1. 两组件通信在 React 中，组件之间的通信方式有很多。例如在父子组件中，父组件向子组件通信时，可以将参数写在props传递给子组件；子组件向父组件通信时，可以使用回调函数的方式，父组件传递给子组件一个函数，子组件通过调用这个函数，实现向父组件通信。父子组件通信，具体看这里。但是，假如有这样一些组件，A组件下有B组件和C组件，B组件下有D组件，C组件下有E组件，如图所示：如果需要D组件向E组件通信，即D组件向E组件传值，可以将状态定义在公共的父组件A上，分别向B、C组件传递参数和函数，再依次传
2021-11-24 20:13:47
671
1
原创 JavaScript 理解异步函数、async/await关键字
1. Promise异步函数，即async / await，是基于Promise的应用，可以让我们以同步的方式写异步的代码。如下代码，一个使用Promise的简单例子，Promise对象中的函数参数中，写了一个定时器setTimeout。定时器的第三个参数为10，表示定时器结束后，10将作为参数，传递给定时器的回调函数resolve。这就意味着，定时器结束后，这个Promise对象会解决为数值10。const p = new Promise((resolve, reject) => setTim
2021-11-12 23:58:30
1373
1
原创 React 关于render props技术的理解
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop。关于render props的使用场景，我们先来看一段代码：// A组件class A extends Component { state = { count: 0 }; add = () => { this
2021-11-11 15:24:21
1894
1
原创 React 多个setState会调用几次？
1. 两个setState，调用几次？如下代码所示，state中有一个count。对按钮绑定了点击事件，事件中执行了两次setState，每次都将count的值加1。当点击按钮时，setState会执行几次？render()会执行几次？答案：都是1次。state = { count: 0 };handleClick = () => { this.setState({ count: this.state.count + 1 }); this.setState({ count:
2021-11-10 14:44:24
3993
2
原创 React 关于setState同步或异步问题的理解
1. setState同步？异步？在 React 的类式组件中，我们可以使用setState方法更新state状态。但有些时候使用setState之后，得不到最新的数据。其实 React 中setState本身执行的过程和代码是同步的，只是因为 React 框架本身的性能优化机制而导致的。React 中合成事件和生命周期函数的调用顺序在更新之前，导致在合成事件和生命周期函数中无法立刻得到更新后的值，形成了异步的形式。假如在一个合成事件中，循环调用了setState方法n次，如果 React 没有优化，
2021-11-09 15:10:20
3841
2
原创 React 父子组件通信的几种方法
在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。1. 父组件向子组件通信1. props如下代码，name作为props由父组件传递给子组件，子组件拿到name后，渲染在页面上。参数name由父组件传递给了子组件。import { useState } from 'react';const Son = ({ name })
2021-11-08 21:00:44
13712
4
原创 关于React Hook使用TypeScript遇到的问题记录
最近使用 React + Hook + TS 写了一个练手的demo，练习了 React + Hook 的 TypeScript 写法。本文主要记录自己在写demo过程中，遇到关于 TypeScript 写法上的坑。demo地址：「ts-todo」1. 创建 TS 项目使用create-react-app创建React项目，应该没有什么坑，记得在创建React项目的时候，添加typescript配置即可：npx create-react-app app-name --template typescr
2021-11-04 20:18:37
658
原创 JavaScript 关于数组的扩展运算符实现
在 JavaScript 的数组扩展运算符中，可以很轻松地将数组展开，并创建新的数组：const arr = [1,2,3,4,5];const arr0 = [...arr];const arr1 = [1,...arr];const arr2 = [1,...arr,3,4];const arr3 = [1,...arr,...arr];将如上代码复制到babel官网，babel会自动将代码转换成浏览器兼容的 JavaScript 代码，就能看到它如何实现的了："use strict"
2021-11-04 10:23:07
493
原创 JavaScript 异步编程Promise详解
1. 定义Promise对象用于表示一个异步操作的最终完成（或者失败）及其结果值，是异步变成的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。ES6 将其写进了语言标准，统一用法，提供了原生的Promise对象。一个Promise对象代表一个在这个Promise被创建出来时不一定已知的值，它可以把异步操作最终的成功返回值或失败原因和相应的处理程序关联起来。这样，异步方法并不会立即返回最终的值，而是会返回一个Promise。一个Promise必然处于以下几种状态之一：pending：
2021-11-03 16:00:24
516
原创 JavaScript class和function的区别
在 JavaScript 中，ES6 开始引入class的概念。实际上，JavaScript 中class的本质也是基于原型prototype的实现方式作了进一步的封装，其本质还是函数function。虽说如此，class和function还是有不同之处。1. 相同点：都可作为构造函数1. 函数作为构造函数class和function都可以作为构造函数，通过new操作符来实例化。如下代码，函数作为构造函数的写法。函数作为构造函数，通常首字母要大写。构造函数中的this指向构造函数创建出来的实例对象u
2021-11-02 13:19:37
3478
原创 JavaScript ES6中Object的新增方法
在 ES6 中，添加了Object.is()、Object.assign()、Object.keys()、Object.values()、Object.entries()等方法。1. Object.is()Object.is()方法用来判断两个值是否为同一个值。使用语法如下，其中，value1和value2是比较的两个值。Object.is(value1, value2);Object.is()方法返回一个布尔类型的值，若满足以下条件则两个值相等：都是undefined都是null都是t
2021-11-01 15:04:11
1662
原创 「每日一题」只出现一次的数字 III
这是 LeetCode 上 2021-10-30 的每日一题：「260. 只出现一次的数字 III」1. 题目描述给定一个整数数组 nums，其中恰好有两个元素只出现一次，其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答案。你的算法应该具有线性时间复杂度。你能否仅使用常数空间复杂度来实现？示例1 ：输入：nums = [1,2,1,3,2,5]输出：[3,5]解释：[5, 3] 也是有效的答案。示例2 ：输入：nums = [-1,0]输出：[-1,.
2021-10-30 19:30:32
154
原创 JavaScript 箭头函数的特点、与普通函数的区别
1. 箭头函数的使用ES6 中新增了使用箭头=>来定义函数表达式的方法。很多情况下，箭头函数和函数表达式创建的函数并无区别，只有写法上的不同。本文第二块内容将介绍箭头函数和普通函数功能上的区别。1. 普通函数到箭头函数如下所示，定义一个函数，可以使用function关键字，函数接收两个参数a和b，返回a和b的和。function getSum(a, b) { return a + b;}若使用箭头函数来定义这个函数，可以写成如下形式，省略function关键字，用箭头=>
2021-10-30 18:45:10
414
原创 JavaScript 变量声明var、let、const详解
JavaScript 中的变量是松散类型的，可以保存任何类型数据，变量只不过是一个名称。JavaScript 中，可以声明变量的关键字有var、let和const。1. var使用var定义变量，可以保存任何类型的值。若不初始化变量，变量会保存undefined。1. 函数级作用域使用var定义的变量会成为包含它的函数的局部变量。function func() { var a = 'hi'; // 局部变量}func();console.log(a); // ReferenceErr
2021-10-29 16:26:08
1711
原创 JavaScript 手动实现instanceof
1. instanceof的用法instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。function Person() {}function Person2() {}const usr = new Person();console.log(usr instanceof Person); // trueconsole.log(usr instanceof Object); // trueconsole.log(usr instanceof P
2021-10-28 15:43:35
789
原创 JavaScript中的Object.defineProperty()方法
1. 功能Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。2. 语法Object.defineProperty(obj, prop, descriptor)1. 参数obj：要定义属性的对象。prop：要定义或修改的属性的名称或Symbol。descriptor：配置项，需传一个对象，该对象有如下属性：value：该属性对应的值，可以是任何有效值（数值，对象，函数等），默认是undefinedwritabl
2021-10-27 19:24:51
265
原创 JavaScript 实现数组扁平化的常见方法
在处理数据时，经常会遇到需要将多维数组转化成一维数组的场景，也就是数组扁平化，这里我总结了三种方式来实现数组扁平化。1. reduce + 递归使用reduce处理数组，reduce的第一个参数是一个函数，第二个参数是可选的，是传递给函数的初始值。如果没有提供初始值，则将使用数组中的第一个元素。这里传入一个空数组[]作为初始值，接着判断cur是否是数组，若为数组，则递归调用；若不是数组，就将cur拼接到pre。const arr = [1, 2, [3, [4, [5, 6], 7], 8], 9,
2021-10-26 15:23:43
162
原创 JavaScript 作用域、作用域链的理解
1. 作用域作用域表示当前的执行上下文，值和表达式在其中可见或可被访问到的上下文。作用域决定了代码区块中变量和其他资源的可见性。在JavaScript中，作用域可分为全局作用域、局部作用域、块级作用域。1. 全局作用域在代码中任何地方都能访问到的对象，拥有全局作用域。JavaScript中，一般有三种情况拥有全局作用域：（1）window对象的属性、方法如图所示，所有window对象的属性都拥有全局作用域。之所以可以在JavaScript的任何地方使用alert函数，是因为它被定义在了win
2021-10-20 11:27:49
238
原创 如何优化CSS以提高性能？
（1）属性设置使用简写例如：.box { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;}简写为：.box { margin: 10px 20px 30px 40px;}可以减小生成包的体积。（2）用CSS替换图片一些箭头、圆，若能用CSS代替，尽量用CSS画。可以减少HTTP请求，减轻服务器压力。（3）删除不必要的单位、零例如：.
2021-10-19 15:41:35
110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人