- 博客(41)
- 收藏
- 关注
RSS订阅原创 解决 npm 安装包时，出现 Refusing to delete xxx，Move it away, and try again.
我想重新安装一下 @vue/cli然后就出错了按照提示，找到它不能删除的文件，手动删除，然后重新运行结果还是出错，同样的错误提示，又让删除另一个文件不知道还要梅开几度，所以我直接把文件夹删除了，然后再重新执行 npm install @vue/cli -g 进行安装我这里是提示这个文件夹下有文件不能删除，我就直接把它整个给删了，具体看自己0.0...
2021-04-29 18:09:21
5645
1
原创 TypeScript 学习总结 —— 参数属性
问题描述在类中，可以对属性或方法进行权限约束，例如 public(默认)、protected、private、readonly(ts)我们可能会写这样的代码class Person { public name protected jobs private age readonly sex constructor (name, jobs, age, sex) { this.name = name this.jobs =
2021-04-29 15:37:53
577
原创 webpack 学习 —— 深入 loader
环境搭建初始化项目npm init -y安装依赖npm i webpack@5 webpack-cli@4 -D目录结构自定义 loader暴露 loader// loaders/loader1.js// loader 是一个函数，接收要处理的内容，返回处理后的内容module.exports = function (content) { console.log(123) return content}配置使用loader// /web
2021-04-26 17:26:51
328
原创 Vue 源码学习 —— AST 抽象语法树形成
AST 理解AST 跟 虚拟DOM 的关系手写简单源码目录结构：parse.js:// 处理原始串，去除换行跟空格function trimAll (str) { let strList = str.split('\n') strList = strList.map(s=>s.trim()) return strList.join('')}// 解析属性字符串function parseAttrs (attrsStr) { attrsStr
2021-04-26 11:41:40
357
原创 Vue 源码学习 —— 数据响应式原理 (Vue 2.x)
对象的响应式目录结构：执行关系：observe.jsimport Observer from './Observer'export default function observe (value) { // 如果 value 不是对象，则不处理 if (typeof value != 'object' || !value) return var ob if (value.__ob__) { ob = value.__ob__
2021-04-24 12:20:59
308
2
原创 Vue 源码学习 —— snabbdom 虚拟 DOM 和 diff 算法原理
前言snabbdom 是著名的虚拟DOM库，是 diff 算法的奠基者，Vue也借用了它的思想因此，在学习Vue的虚拟DOM和diff算法之前，先学习snabbdom能加更容易理解其设计思想snabbdom安装snabbdomnpm i -S snabbdomwebpack环境配置webpack安装npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3目录：webpack.config.jsmodule.
2021-04-16 13:24:02
489
3
原创 Vue 源码学习 —— Mustache 模板引擎原理
前言Mustache 是模板引擎思想的奠基者，Vue 中的模板引擎也借用了它的思想因此，在学习Vue的模板引擎之前，先学习Mustache能加更容易理解模板引擎的设计思想Mustache下载：到 BootCDN 搜索 mustache，复制链接到浏览器打开，并保存到本地即可或使用该链接：mustache.js(v4.1.0)引入：基本使用：渲染普通对象： <div id="root"></div> <script src="js/mustache
2021-04-14 22:41:15
517
原创 Vuex 学习总结 —— 完整案例
目录结构components/src/components/TodoFooter.vue<template> <div> <label> <input type="checkbox" v-model="checkAll"/> </label> <span> <span>已完成{{completeSize}}</span> / 全部{{tota
2021-04-14 13:28:11
772
1
原创 TypeScript 学习总结 —— 抽象类 abstract class 和接口 interface
抽象类abstract class// 定义一个抽象类，不能直接实例化，需要其他类继承并实现全部抽象方法abstract class Animal { readonly name; // 只读属性 constructor (name: string) { this.name = name } // 抽象方法 abstract sayName():void}// 继承抽象类，并实习抽象方法class Dog extends Animal {.
2021-04-10 15:25:20
617
原创 TypeScript 学习总结 —— Webpack 中配置使用 TS
初始化 node 项目npm init -y安装依赖npm i -D webpack webpack-cli typescript ts-loader编写 webpack 配置文件：webpack.config.jsconst path = require('path')module.exports = { entry: './src/index.ts', output: { path: path.resolve(__dirname, 'dist.
2021-04-10 11:38:59
389
原创 TypeScript 学习总结 —— TS 基础配置
如下{ "compilerOptions": { "target": "ES2015", "outDir": "./dist", "watch": true, "removeComments": true, "noEmitOnError": true, "alwaysStrict": true, "noImplicitAny": true, "strictNullCh.
2021-04-10 11:14:18
470
原创 TypeScript 学习总结 —— 类型解释
ts 中有如下类型从字面量类型说起字面量类型即类型是字面上的，比如上面将 a指定为 'hello' 类型，同时 a的值也只能是 'hello'any 跟 unknown：any 跟 unknown 都可以表示任意类型，但有一些不同，如下any类型变量 可以赋值给任意类型，而 unknown 不可以，所有 unknown 可以看成安全的 anyvoid 跟 never: void 表示返回值为空的类型，never 表示没有返回值返回值为空有：不返回、返回 undefi.
2021-04-09 23:39:37
268
原创 TypeScript 学习总结 —— 类型约束
在 ts 中，我们可以对变量的类型进行约束，比如下面这样当我们把 a 声明为 number 类型的变量，就不可以再为它赋其他类型的值但实际上，即使我们不显式指定它的类型，ts也可以自动推断出正确的类型，如下因为给 a 赋初值的时候，为它指定的123 是number 类型的，所以 ts 知道，a是number 类型的因此，不可以再给 a 赋其他类型的值既然不需要给变量显式的类型约束，ts 也可以得到变量的类型，那么，有没有其他情况，需要显示给变量指定类型的，如下首先..
2021-04-09 19:43:20
546
原创 React 学习笔记 —— 错误边界 ErrorBoundary
当在某个组件出现错误时，整个网页都会报出错误提示但这对用户来说是不友好的因此，我们需要想办法，将错误限制在组件内，并且当错误发生时，进行替换显示如下import React, { Component } from 'react'export default class A extends Component { state = {error: ''} // 父组件通过此方法捕获发生的错误 static getDerivedStateFromError(error) .
2021-04-09 13:22:34
665
原创 React 学习笔记 —— render props
children props往组件里传递内容，可以使用 children props，如下import React, { Component } from 'react'export default class A extends Component { render() { return ( <div> <B> <C/> {/* 组件B 里
2021-04-09 12:43:06
537
原创 React 学习笔记 —— PureComponent
普通 Component 存在的问题：只要执行 setState()，即使不改变状态数据，组件也会重新 render()当前组件render时，子组件也会无条件render，即使子组件没有任何更新解决方案一：改写 Component 中的shouldComponentUpdate()，对props、state进行判断，如果不需要更新就返回 false，但这样太麻烦了解决方案二：使用PureComponent代替 Component，该组件自动重写了shouldComponentUpda.
2021-04-09 11:53:49
243
原创 React 学习笔记 —— Context
父子组件传递参数很方便，直接使用 props传递祖孙组件传递参数也可以使用 props 逐层传递，但是对于中间层并不需要使用该参数的组件，也必须接收、并向下传递，非常复杂因此，祖孙组件之间的通信，一般不使用 props，而是Context，如下import React, { Component } from 'react'const MyContext = React.createContext() // 创建一个 Contextconst {Provider} = MyContext //.
2021-04-09 10:27:51
246
原创 React 学习笔记 —— Fragment
在 JSX 的语法中，明确要求，仅能有一个根标签因此，我们往往使用 div 去包裹整个组件标签但这样，会在页面上增加许多无用的 div，并且增加页面的标签层级可以用以下两种方式解决第一种：使用 Fragment 标签，它会在编译时被忽略import {Fragment} from 'react'...<Fragment> <p>test</p> <p>test</p></Fragment>...第二种：.
2021-04-09 09:40:58
429
原创 React 学习笔记 —— Ref Hook
用以下三种方式创建 Ref 都可以import React from 'react'export default function Count () { const [count ,setCount] = React.useState(0) const myRef = React.createRef() const myRef2 = React.useRef() // Ref Hook 的方式 const myRef3 = {current: undefined}.
2021-04-09 09:29:36
416
原创 React 学习笔记 —— Effect Hook
Effect Hook 可以使得函数式组件也能使用生命周期钩子React.useEffect()接收两个参数，参数1为函数，参数2为数组参数1的函数会在组件挂载、数据更新时调用，参数2表示要监听的数据参数1函数的返回值，会在数据更新、组件卸载时调用模拟 componentDidMount React.useEffect(() => { console.log('componentDidMount') }, []) // 参数2为空数组，表示不监听任何数据，即.
2021-04-08 22:58:09
290
原创 React 学习笔记 —— State Hook
在函数式组件中，我们不可以使用 this，因此，也无法使用 this.state为了在 函数式组件中使用 state ，需要使用 state Hook如下import React from 'react'// 该函数执行 1+n 将，1次是初始化渲染，n次是更新export default function Count () { // 使用 useState 返回一个组件，[状态，修改状态的方法] // useState 只在第一次执行，取参数作为初始值，并作缓存，后续执行不再使用该参数.
2021-04-08 20:43:54
272
原创 React 学习笔记 —— 路由组件 lazyLoad
当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求如下import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'const Home = lazy(()=>import './home')const About = lazy(()=&g.
2021-04-08 19:27:36
339
1
原创 React 学习笔记 —— setState 扩展
写法一调用语法：this.setState(state, [callback])setState 接收的第一个参数，用于描述state的改变setState 是异步改变 state 的，当 setState 改变 state 并调用 render 更新界面之后，会调用 callback适用于 state 的改变不依赖于原状态写法二调用语法：this.setState(updater, [callback])setState 接收的第一个参数为函数，返回值用于描述state的改变upda
2021-04-08 19:04:01
309
原创 React 学习笔记 —— redux 开发者工具安装使用
到Chrome应用商店下载开发者工具将其钉在工具栏，方便观察使用可以看到 redux 开发工具并没有被激活点亮，因为使用它，还需要进行其他配置安装 redux-devtools-extensionyarn add 在 store.js 中引入，并使用import {createStore, applyMiddleware} from 'redux'import {composeWithDevTools} from 'redux-devtools-extension'..
2021-04-08 16:59:15
359
原创 React 学习笔记 —— redux 示例完整版
描述：组件 Count、组件 Person，将数据存入 Redux，实现数据共享目录结构App.jsimport React, { Component } from 'react'import Count from './containers/Count'import Person from './containers/Person'// 引入 容器组件 并使用export default class App extends Component { render() {..
2021-04-08 16:09:12
456
原创 React 学习笔记 —— redux 的使用
安装使用运行命令yarn add reduxredux 原理图主要流程组件 通过 Action Creators 分发(dispatch) action 给 StoreStore 将 之前的状态(previousState)、action，传递给 ReducersReducers 对状态处理后，返回给 Store 新的状态组件通过 getState() 获取状态各部分职责Action Creators: 负责生成 action 对象，并分发给 StoreStore：负
2021-04-07 17:12:16
415
1
原创 React 学习笔记 —— antd 的使用
安装使用antd官网运行yarn add antd引入使用import React, { Component } from 'react'import {Button} from 'antd' // 引入需要的组件import 'antd/dist/antd.css' // 引入样式export default class App extends Component { render() { return ( <div> <
2021-04-07 11:51:24
538
原创 React 学习笔记 —— 多级路由刷新页面时样式丢失问题
问题原因：多级路径下，加载样式时，使用相对路径，在刷新时将多级路由也考虑在内// 如下，样式路径 './' 导致加载资源时，需要参考当前路径，因此多级路由会影响资源的加载 <link rel="stylesheet" href="./test.css" />解决方法：使用 绝对路径 // 加载 根目录下的 test.css ，与当前路由无关 <link rel="stylesheet" href="/test.css" />使用 %PUBLIC_URL%.
2021-04-06 12:41:57
707
1
原创 React 学习笔记 —— 前端路由 react-router-dom 总结
路由理解当使用 hash 或 history 的方式去改变网址路径(path)时，并不会刷新网页或发出请求通过监听 hash 或 history 的变化来动态的切换组件的显示据此，可以维护 path(路径) 跟 component(组件) 的 一对一的路由而管理这些route(路由)的就是router(路由器)简单 demo主要目录结构index.jsimport React from 'react';import ReactDOM from 'react-dom';imp
2021-04-05 19:17:55
375
原创 React 学习笔记 —— 配置代理以跨域
配置 package.json在 package.json 中 追加如下配置"proxy":"http://localhost:5000"假设 前端项目运行在 3000 端口，那么，向3000 端口发起请求，且 3000 端口不存在对应资源时，请求就会转发给 5000 端口创建 setupProxy在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则： const proxy = require('http-prox
2021-04-05 10:43:15
266
原创 React 学习笔记 —— 使用 axios 发起 ajax 请求
安装 axios命令行运行：yarn add axios使用案例准备测试用的后端接口const express = require('express')const app = express()app.use((request,response,next)=>{ console.log('有人请求服务器1了'); console.log('请求来自于',request.get('Host')); console.log('请求的地址',request.url); ne
2021-04-05 10:00:35
336
原创 React 学习笔记 —— defaultChecked 跟 checked 及 defaultValue 跟 value 的区别
defaultChecked只在初次渲染时生效，更新时不受控制export default class App extends Component { state = { checked: true // 因为初始值为 true，因此在初始渲染时，多选框为选中状态 } handleClick = () => { this.setState({ checked: !this.state.checked // 但由于是 defaultChecked，因此更
2021-04-04 10:05:04
2218
原创 React 学习笔记 —— css 样式的模块化
问题描述当不同组件中的css规则，存在冲突时，高优先级的样式，就会覆盖低优先级的样式，示例如下：目录结构样式冲突Welcome 组件后引入，因此覆盖Hello组件的样式如下当组件越来越多的时候，我们当然不想组件之间产生干扰，看如下两种解决方案css预处理工具（更常用）通过给样式加上区分组件的前缀，避免样式的冲突.hello { h1 { background-color: tomato; }}.welcome { h1 { background-colo
2021-04-03 20:03:05
784
原创 React 学习笔记 —— React 脚手架
安装使用全局安装npm install -g create-react-app创建项目create-react-app hello-react启动项目cd hello-reactnpm start文件目录解读.git：git 管理文件node_moudles: node 模块public：公共资源src：代码主要写在这里面.gitignore: git的忽略文件，描述哪些文件不用管理package.json：node 包的配置文件，描述应用信息、命令等RE
2021-04-03 19:23:15
301
原创 React 学习笔记 —— DOM 的 diffing 算法理解
Diff 时 key 的作用key 用来作为唯一标识，便于 newVDOM 跟 oldVDOM 进行比较key 相同的 VDOM 会进行比较，如果内容相同，直接复用真实DOMkey 相同的 VDOM 比较时，如果内容不同，则会重新创建真实DOM如果没有找到相同的key，则直接创建真实DOM使用 index 作为 key 的副作用性能问题 ：当对数组进行逆序插入、删除等破坏index跟item之间的对应关系的操作时，会产生没有必要的真实DOM更新因为 index 错位，导致
2021-04-03 13:27:48
298
2
原创 React 学习笔记 —— 组件生命周期
生命周期汇总图线路一class Demo extends React.Component { // 实例化组件时执行 constructor () { super() this.state = { count: 0 } console.log('constructor') } handleAdd = () => { this.setState({
2021-04-02 22:41:30
289
1
原创 React 学习笔记 —— 非受控组件与受控组件
非受控组件即未对数据进行收集，现用现取class Demo extends React.Component { handleClick = ()=>{ // 现用现取，当事件触发时，再在回调函数中获取输入框中的值 console.log("账号：" + this.account.value) console.log("密码：" + this.password.value) } render () { return
2021-04-02 17:34:59
238
原创 React 学习笔记 —— refs 属性
字符串 ref注意：过度使用字符串ref 会存在效率问题，该方式可能会在未来的版本中移除class Demo extends React.Component { handleChange = () => { // 可以通过 refs 访问到被引用的标签 this.refs.p.innerText = this.refs.input.value } render () { return ( <div&
2021-04-02 13:17:14
319
原创 React 学习笔记 —— props 属性
this.state 是组件内部产生的数据this.props 是从组件外面，通过属性传入到组件中的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.
2021-04-01 23:05:59
395
原创 JS声明提升的一些问题
声明提升的坑变量声明提升：通过var定义(声明)的变量，在定义语句之前就可以访问到，值为undefinedvar a = 2function fn() { console.log(a) var a = 1}上面的代码将输出undefined，因为var声明的变量存在提升，等价于下面这段代码var a = 2function fn() { var a // 屏蔽了外部的变量a，同时自身未被赋值 console.log(a) a = 1}函数声明提升：通过function
2021-04-01 11:34:07
309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人