自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

冲锋

学秃的心

原创 在vscode 上搭建 React 源代码调试环境(16.8v)

克隆此仓库 git clone https://gitee.com/frontend-qin/react-source-code.git 配置 vscode 安装插件 Debugger for Chrome 后 url:必须是你的 react 项目启动的开发环境地址 { "ver...

2020-06-08 10:14:26 211 0

原创 react-router5 - 实现 Switch 和 Redirect 组件

用法 <HashRouter> <Link to='/'>home</Link> <Link to='/about'>about</Link> <Link to=&#...

2020-06-04 17:46:53 127 0

原创 react-router4 - 实现Link组件进行点击跳转

原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to=&...

2020-06-03 17:49:11 112 0

原创 react-router3 - 利用 path-to-regexp 实现路径及参数的匹配

上节代码也看到了, 在判断的时候,是直接拿 props上传的 path 和 监听到的 pathname作的全等比较 那这样的话,如果手动传入 /about/1, /about/page/2 这样的路径就匹配不到了, 肯定会返回 null 的, path-to-regexp仓库 path-to-...

2020-06-03 17:09:05 122 0

原创 react-router2 - 实现 HashRouter 和 Route组件理解实现原理

原生库的使用 官方路由使用效果演示 实现思路 1. 先导出俩组件 react-router-dom / index.js import Route from './Route'; import HashRouter from './HashRouter'...

2020-06-03 15:57:02 71 0

原创 reactRouter1 - 路由实现原理(hash, history)

实现原理 1. 利用hash和history这两种模式实现对路由的切换 2. 根据匹配到的路径,渲染对应的组件 hash模式原理 通过监听 hashchange 事件, 在回调里拿到 window.location.hash 的值 hash 模式演示 <body> &l...

2020-06-03 13:47:50 50 0

原创 redux8 - redux 中间件 和 applyMiddleware 及其实现原理

参考redux仓库, redux-logger库 新建个项目吧 - 引入 redux, react-redux 中间件执行流程图 演示代码仓库 就这个演示了,点击 + 1 ,现在呢, 我想打印个日志,就是每次点击按钮,都能打印出老的状态和新的状态 理逻辑,既然是在每次点击事件之后打印...

2020-06-02 18:11:46 44 0

原创 redux7 - 手写实现 react - redux 基本功能 Provider 和 connect

参考reac-redux 库 源码 以下实现的功能代码演示地址 使用react-redux库 官方 react-redux 库,使用 index.js import React from 'react'; import ReactDOM from 'react-dom...

2020-06-02 15:23:52 44 0

原创 redux6 - 实现 react-redux 前置技能react 高阶组件的使用

react-redux使用演示 代码太多,就放codesandbox.io 了,可以看到,在组件中连接仓库和组件的一个重要方法, connect() ,该方法的返回值就是个高阶组件 什么是高阶组件 高阶组件: 同高阶函数,参数可以是组件, 或者返回一个组件, 使用场景: 一般用于公共部分的抽离...

2020-06-02 09:27:39 65 0

原创 redux5 - 实现 react-redux 前置技能之 react库的context的使用

参考redux仓库的src目录,初步手写实现了以下3个方法 createStore() : 创建数据仓库,导出了3个方法(dispacth,subscribe,getState) combineReducers():合并多个小的reducer,传入一个对象 bindActionCreators...

2020-06-01 17:29:08 30 0

原创 redux4 - 处理有多个 reducer时如何合并,以及实现 combineReducers

参考源码redux仓库 redux原则之一就是单一性,即状态,仓库,reducer都是唯一的,但在组件式的技术开发中,为了好管理状态,通常一个组件,或嵌套组件对应一个 reducer, 最后再合并成一个大的reducer 代码太多,请参考演示代码 代码演示两个组件的都有各自的组件状态,怎么进行合...

2020-06-01 16:04:50 70 0

原创 redux3 - 通过提交函数派发action及 手写 实现 bindActionCreators 函数

dispatch 即可以是提交一个对象的语法, 还可以提交一个函数的写法 直接通过提交函数派发动作 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; im...

2020-06-01 12:50:58 35 0

原创 redux2 - 原生html页面和react中使用自己手写的 - redux

原生html页面中 redux.js // 创建仓库 function createStore(reducer) { let currData; let listeners = []; const getState = () => currData; const dispat...

2020-06-01 10:38:23 30 0

原创 redux1 - 20行代码实现redux

准备工作 首先建一个React的脚手架项目, 删除src下的所有东西,保留一个空的 index.js 当前目录 index.html <!DOCTYPE html> <html lang="en"> <head> <me...

2020-05-27 16:45:39 48 0

原创 Vue源码系列-6- computed计算属性的实现原理

计算属性默认是有缓存的,内部实现参考源码 src/core/instance/state.js 调用initComputed() 方法,创建 watcher /** * 初始化 computed * @param {*} vm * @param {*} computed */ fun...

2020-03-30 10:07:16 80 0

原创 Vue源码系列-5- Vue.set() 使用场景以及实现原理?

官方api解释了它的使用场景 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’) 所以我们要知道,只有先定义在data ...

2020-03-29 00:29:18 67 0

原创 Vue源码系列-4- Vue为什么采用异步渲染以及原理

为什么采用异步渲染? 因为如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染, 这样就会可能进行大量的dom重流或者重绘,所以为了性能考虑,减少浏览器在Vue每次更新数据后会出现的Dom开销,Vue 会在本轮数据更新后,再去异步更新视图! src/core/observer/ind...

2020-03-28 23:33:51 308 0

原创 Vue源码之旅-3- nextTick()实现原理

参考文档的 异步更新队列, 从官方文档的说明, 我们可以看出, Vue 的更新是组件级的,这么做的目的就是为了提升性能, 它内部怎么做的也比较好理解, 其实就是利用了 微任务 和 宏任务 src/core/util/env.js export const nextTick = (function...

2020-03-28 21:59:44 405 0

原创 vue源码之旅-2 - 数据响应式原理的实现

在官方文档的深入响应式原理这一节可以看到,Vue是通过Object.defineProperty 来定义数据的响应式的, 接着从源码层面来喵一眼到底是怎么做的? src/core/instance/state.js 我简单注视了一下源码 /** * 1. 调用initData()方法, 初始化用...

2020-03-28 20:55:37 80 0

原创 vue源码之旅-1- new Vue( ) 做了什么事?

源码目录: 源码:src / core /instance / index.js import { initMixin } from './init' import { stateMixin } from './state' import ...

2020-03-27 13:10:13 67 0

原创 数据库客户端使用

1. 软件包下载 链接: https://pan.baidu.com/s/1dFyxumIo9KhVtE5t1Cduag 提取码: dz8u 2. 下载后解压到桌面 3. 安装 navicat121 软件 注意: 你可能需要以 管理员权限 运行 安装,默认安装就好,尽量别改路径,...

2020-03-18 16:48:09 105 0

原创 springboot的jwt登录验证

代码量不多, 就直接上代码了 public class TokenUtil { /** * 过期时间15秒 */ protected static final long EXPIRE_TIME = 15 * 1000; /** * toke...

2020-01-17 14:50:32 57 0

原创 vue 递归菜单树

做一个后台管理系统, 很多时候是不会只有一两层这种定死的数据结构的, 往往,我们不知道它会有多少层数据, 这就需要我们来递归渲染, 而再react中我们递归个菜单就比较方便, 跟平时写递归函数差不多, 而在vue中,我们就需要递归组件了,那vue中问么递归组件呢, 其实就是依靠 组件中的name属...

2019-12-06 18:07:08 138 0

原创 学习一下 ts + hooks + react

用hooks: 基本不写 类组件了 一个useEffect 的功能 太棒了, 比钩子更清晰 ts: 写的贼难受, 难受啊 ts-react-hooks-antd 仓库地址 第一次撸ts啊, 个别地方还是any 一把梭的, 至于为啥不用redux, 那就是难受, 不想碰那东西, 撸 hook...

2019-11-27 21:02:17 683 0

原创 vuepress 搭建 文档 博客

文档博客 怎么玩的,直接参考 vuepress文档吧, 可以木事总结一些知识点,或者转载,每日反复翻看几遍,如沐浴春风般温暖,不扯其它了,简单写写自己搭建的模板怎么部署到 github的静态页面, 由于git访问比较慢,所以最后 会搬到 码云上 边,那速度,飞一般的感觉.... 先搭建模板...

2019-11-21 19:27:04 310 2

原创 vue + vant h5 模板处理

仓库地址:vue-vant-mobile,基础配置一套, 拿来直接进行页面开发,

2019-11-05 15:42:22 1153 0

原创 vue 签名组件

临时帮朋友写个移动端的项目, 发现 它的项目中有个 pdf 文档的 签名功能, 也是折腾了一下签名组件 签名组件原理: 利用原生canvas 配合 移动端的事件, touchstart, touchend, touchmove, 进行 在canvas 画布上画线, 最后,把生成的签名, 通过 t...

2019-10-30 11:45:31 368 0

原创 Vue响应式原理实现

Vue响应式特点 1.使用对象时,必须先声明,这个属性才是响应式的 2. 给对象数据递归增加getter和setter 3.数组里套对象,对象时支持响应式变化的,常量则没有效果 4.修改数组的索引及长度,是不会导致视图更新 5.如果是新增的数据(对象类型),vue 才会帮你监控 vu...

2019-10-28 18:39:31 72 0

原创 手写vuex及原理解析

参考:vuex代码仓库,vuex官方文档 关于vuex 的怎么使用,就不说了, 这次主要是通过自己实现一个vuex,来理解vuex 的原理及内部实现 关于vuex 的工作流程, 就不再赘述了,官方的流程图(在vuex是什么?)这一节中画的很清楚(具体位置基本在最底部了) 具体工作流程: ...

2019-10-28 11:23:01 841 0

原创 webpack 中公共模块,基础库, 多次使用的公共方法单独抽离,以减少包体积和打包时间

1. 使用html-webpack-externals-plugin 插件 安装html-webpack-externals-plugin yarn add html-webpack-externals-plugin 配置 webpack.config.js(配置完之后页面自动引入) ...

2019-09-08 19:02:17 630 2

原创 webpack 在移动端 适配 px 转rem, 以及内联 手淘 的 flexible 库

移动端开发中, 我们 都需要做 尺寸处理来适配各种手机型号 简单记录一下, webpack 自动处理 px转rem, 而我们只需要根据设计稿尺寸写px 单位就好 1. 安装 lib-flexible yarn add lib-flexible 2. 安装 px2rem-loader ...

2019-09-08 17:54:14 200 0

原创 dva 开发 ,简单写写,及配置 不同的 服务器打包指令

安装 dva-cli $ npm i dva-cli -g $ dva -v 创建新应用 $ dva new project $ cd project $ npm start 配置接口及打包环境 cross-env 地址 # 安装插件 $ npm i cross-en...

2019-08-27 16:13:59 881 0

原创 使用 UmiJs 中的 ant-design-pro 开发系统,配置自己的接口 和 路由

文档地址参考,以下信息都是项目模板已初始化完毕,项目启动如下 1. 关闭 国际化 开发 1. 执行 npm run i18n-remove 2. 删除 src 下的locales 包 2. 配置接口环境,不说了,只不过,这个define 需要添加到 config 文件夹下, 配置方法同...

2019-08-11 11:41:22 888 0

原创 使用 umi + dva 开发配置接口环境

乌米文档,创建项目模板啥的就不说了 关于选择project, 自定义开发的话, 选择 app 选项,其它不多说了 之后会问你选择 ts 吗? ,是否使用antd, dva, code spliting ,dll,可选的,自己决定 最后,启动项目,打开控制台,一堆警告,和错误提示,关...

2019-08-11 10:31:20 2056 0

原创 撸的 react 管理系统,记录一下

react-antd-admin 仓库 地址 业余时间撸的 react 管理系统,欢迎探讨留言,模板只是一个空模板 前端技术: react + antd + router + redux 本项目没有使用 dva 及 umi集成开发,纯 官方脚手架 暴露配置文件开发,项目配置好了,开发和...

2019-06-28 12:57:13 227 0

原创 react官方 脚手架 中 配置服务器接口环境,不同的打包名

使用react官方脚手架,在开发中,难免要自己配置接口服务环境,打不同的包,作为一名前端,这一切都想要自动化,手动改容易出错,而且比较麻烦,接下来,记录一下自己的配置之旅。。。 参考react-create-app 文档 react 兼容 IE 7 - 8 低版本 具体配置 .....

2019-06-24 14:38:50 947 0

原创 使用 一个小 案例演示 vuex 在真实项目 开发中的 辅助 函数 的使用

创建 项目 demo .... 略过 , 选项 直选了 vuex ,其它的 没有选..................................................... demo很简单, 就是 通过 异步调接口 ,处理数据并渲染出来,所有的操作 都走 vuex (下图就是...

2019-06-08 17:45:11 391 0

原创 关于vue.config.js中配置前端代理

写在前边 注意开发环境的本地代理或者测试环境的代理,在部署到正式上时,一定要换成线上的IP地址,不然,数据拿不到哦 代理配置 easy mock 模拟接口地址 , 就以第一个进行说明怎么配置和使用了, 只说代理配置部分,其它不再说明 新建项目(略过le... ) ip地址配...

2019-05-29 23:33:09 12767 7

原创 学习ReactRouter路由的使用

参考官方文档:react-router官方文档 ReactRouter 是一种前端路由的实现方式,关于前端路由的原理后续补充 Router 的新版本号是 v5,ReactRouter 包含 3 个库:react-router、react-router-dom 和 react-router-na...

2019-05-15 16:27:29 100 2

原创 学习React中的JSX基本语法

JSX简介 参考:react 官方jsx介绍 JSX 是一种用于描述UI的JavaScript扩展语法,本质上仍然是JavaScript React 认为,一个组件应该是具备UI描述和UI数据的完整体,不应该将它们分开处理,于是发明了JSX,作为UI描述和UI数据之间的桥梁。这样,在组件内部...

2019-05-06 17:34:50 257 0

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