自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 收藏
  • 关注

原创 node koa 日志打印中间件

好用的koa 日志打印中间件

2022-11-14 17:13:33 309 1

原创 for循环中使用let定义变量问题记录

for循环中使用let定义变量问题记录

2022-11-14 16:34:27 348

原创 Event Bus简单实现

EventBus javascript简单实现

2022-10-08 14:45:07 272

原创 npm scripts的钩子功能

npm scripts的钩子功能

2022-10-08 11:13:46 469

原创 JS 对象深复制

一、使用扩展运算符使用扩展运算符可以实现部分对象的深复制,若对象中有数组或其他引用类型,则扩展运算符不能实现深复制。成功案例:let obj1 = { name: "rain", age: 18}let obj2 = { ...obj1 }obj2.name = "snow"console.log(obj1)// {name:'rain',age:18}console.log(obj2)// {name:'snow',age:18}失败案例:let obj1 = { n

2022-04-10 14:49:37 551

原创 JS 对象深复制

一、使用扩展运算符使用扩展运算符可以实现部分对象的深复制,若对象中有数组或其他引用类型,则扩展运算符不能实现深复制。成功案例:let obj1 = { name: "rain", age: 18}let obj2 = { ...obj1 }obj2.name = "snow"console.log(obj1)// {name:'rain',age:18}console.log(obj2)// {name:'snow',age:18}失败案例:let obj1 = { n

2022-03-14 18:27:49 3898

原创 JS immutable组件

介绍更多信息immutable中文:不变的,不可改变的每次修改一个Immutable对象时都会创建一个新的不可变的对象,在新对象上操作并不会影响到原对象的数据。安装npm i immutable一、Immutable优化性能的方式Immutable实现的原理是持久化数据结构,也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗,Immutable使用了结构共享,即如果对象树中一个节点发生变化,只修改这个节点和受它影响的

2022-03-14 18:24:38 3333

原创 React Redux

介绍Flux是一种架构思想,专门解决软件的问题。它跟MVC架构是同一类东西,但是更加简单和清晰。Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(state对象)保存着一整个应用的状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers),这样就可以进行数据追踪,实现时光旅行。安装npm i redux一、redux介绍及设计和使用的三大原则state以单一对象存储在state对象中state只读(每次

2022-03-13 22:04:43 1230

原创 Promise方法解决回调地狱

一、回调地狱示例弊端:data1,data2,data3这三个数据不能重名,调试起来很不方便。需要的操作多时,回调会一直往里塌陷。const fs = require("fs")fs.readFile("./one.txt", (err, data1) => { fs.readFile("./two.txt", (err, data2) => { fs.readFile("./three.txt", (err, data3) => { console.

2022-03-13 16:16:04 1964

原创 React 反向代理

一、安装npm install http-proxy-middleware --save二、在src目录下创建setupProxy.js文件三、编写setupProxy.js代码**注意:**每次编写完setupProxy.js文件后都要重启服务器const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( '/api

2022-03-11 19:05:23 859 1

原创 React Router路由

一、React 路由1 什么是路由?路由是根据不同的url地址展示不同的内容或页面。一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URL之间的同步映射关系2 路由安装npm install react-router-dom@53 路由使用<Redirect from="/" to="/home"/>exact 精确匹配(Redirect即使使用了exact,外面还要嵌套Switch来用)Warning:Hash hist

2022-03-11 17:27:19 301

原创 React Hooks

一、使用hooks的理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高二、useState(保存组件状态) const [name, setName] = useState("rain")//useState 记忆函数,记住状态三、useEffect(处理副作用)和useLayoutEffect(同步执行副作用)Function Component不存在生命周期,所以不要把Class Componen

2022-03-10 20:47:13 335

原创 React 非父子组件通信方式

一、非父子组件通信方式1 状态提升(中间人模式)React中的状态提升概况来说,就是将多个组件需要共享的状态提升到它们最近的父组件上,在父组件上改变这个状态然后通过props分发给子组件import React, { Component } from 'react'export default class Tenth extends Component { state = { title: '' } render() { return ( <div

2022-03-07 21:40:58 892

原创 React Ref父子通信

一、Ref版-表单域组件父组件利用ref对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法import React, { Component } from 'react'class Tenth extends React.Component { state = { value: '' } clear() { this.setState({ value: '' }) } render() { return

2022-03-07 17:10:24 670

原创 React props属性验证

一、属性验证1 安装npm i prop-types2 使用import React, { Component } from 'react'import PropTypes from 'prop-types'export default class Fifth extends Component { //static 定义类属性,可以在类外Fifth.proTypes直接使用 static propTypes = { title: PropTypes.string,//规定t

2022-03-07 13:29:22 439

原创 React setState异步同步

一、setStatesetState处在同步的逻辑中,异步更新状态,更新真实domsetState处在异步的逻辑中,同步更新状态,同步更新真实domimport React, { Component } from 'react'export default class App extends Component { state = { num: 1 } handleOnClick() { this.setState({ num: this.state.nu

2022-03-06 21:27:52 595

原创 React 脚手架初始化项目

一.React 脚手架初始化项目1 初始化项目,命令:npx create-react-app my-app2 启动项目,在根目录执行命令:npm start3 npx 命令介绍npm v5.2.0引入的一条命令目的:提升包内提供的命令工具的使用体验原来:先安装脚手架包,再使用这个包中提供的命令现在:无需安装脚手架包,就可以直接使用这个包提供的命令补充说明推荐使用:npx create-react-app(固定格式) my-app(项目名称)可以使用npm i

2022-03-03 22:27:42 702 2

原创 JS arr.sort()排列数值

arr.sort()默认情况下,sort()会按照升序重新排列数组元素,即最小的值在前面,最大的值在后面。为此,sort()会在每一项上调用String()转型函数,然后比较字符串来决定顺序。即使数组元素都是数值,也会先把数组转换为字符串再比较、排序。let arr = [0, 1, 5, 10, 15]arr.sort()console.log(arr)//[ 0, 1, 10, 15, 5 ]sort()排列数值方法let arr = [3, 2, 1, 5, 10, 15]arr.

2022-03-01 20:17:53 944

原创 JS 正则表达式基础详解

一、正则表达式概述1 什么是正则表达式正则表达(Regular Expression)是用于匹配字符串组合的模式。在JavaScript中,正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。2 正则表达式的特点灵活性、逻辑性和功能性非常强。可以迅速地用极简单的方式达

2022-02-28 17:54:40 2977

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除