qq_41580536的博客

Webpackwebpack的五个核心概念:entry,入口配置,设定webpack以那个文件为入口起点开始打包,分析构建内部依赖图output,输出配置,设定打包后的资源bundles输出位置以及命名loader,处理非js文件,webpack只识别js和json文件,因此需要loader将非js文件翻译解析plugins,执行范围更广的任务,功能扩展,功能强化mode,分为两种:development,开发模式,设置代码本地调试运行的环境production,生产模式,设置代码优化

Vue3/React-对比实现仿知乎专栏–01技术栈Vue3：全家桶+TS+bootstrapReact：React全家桶(函数式组件hooks)+TS+Redux+Antd项目创建React ：create-react-app react-version --template typescriptVue3 ：​ npm install -g @vue/cli npm install -g @vue/cli-init​ vue create vue3-version初步文件结构/as

TS+react自建组件库 05KGD的第十个组件-Upload需求分析文件分析：①文件状态：ready、uploading、success、error②文件属性展示：uid、size、name、status、percent、raw、response、error设计实现import { FC, useRef, ChangeEvent, useState} from 'react'import axios from 'axios'import Button from '.

TS+react自建组件库 04KGD的第七个组件-Input需求分析属性分析：能否禁用、图标、规格大小、输入框前缀、输入框后缀设计实现import {FC, ReactElement, ChangeEvent, InputHTMLAttributes} from 'react'import { IconProp } from '@fortawesome/fontawesome-svg-core'import classNames from 'classnames'import Ic

TS+react自建组件库 03KGD的第五个组件-Icon引用第三方图标库：fontowesome安装指令：yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/react-fontawesome引入：import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome

TS+react自建组件库 02KGD的第二个组件-Alert需求分析类型分析-type：成功、默认、危险、警告功能分析-：默认弹出框、可添加描述弹出框设计实现import React, {FC, useState} from 'react'import classNames from 'classnames'export enum AlertType { Success = 'success', Default = 'default', Danger = 'dange

TS+react自建组件库 02KGD的第二个组件-Alert需求分析类型分析-type：成功、默认、危险、警告功能分析-：默认弹出框、可添加描述弹出框设计实现import React, {FC, useState} from 'react'import classNames from 'classnames'export enum AlertType { Success = 'success', Default = 'default', Danger = 'dange

TS+react自建组件库 01Hello World组件测试import {FC} from 'react'interface IHello { message?: string; }const Hello:FC<IHello> = function(props){ let {message} = props; return ( <h2>{message}</h2> )}Hello.defaultPro

0929 NOTE–TS学习定义js的超集，可以在任何浏览器、计算机和操作系统上运行，但是执行时会先编译成js代码执行。优势①、有些错误如：未传参，js在浏览器中编译运行时才会报错，而ts在代码执行前便会报错提示②、代码提示友好程度更高③、代码中变量的类型声明使语义更清晰易懂环境搭建安装ts：npm i typescript -g / yarn add typescript -g编译ts文件：tsc demo.ts //执行后编译生成一个js文件，执行插件：np

antd的craco实现按需引入样式插件安装：yarn add antd @craco/craco babel-plugin-import 项目根目录下craco.config.js配置：const CracoLessPlugin = require('craco-less');module.exports = { babel: {//支持装饰器 plugins: [ [ "import",

react后台管理系统—0922①报错：Error: Invariant failed: You should not use outside a 原因：在Router外使用NavLink标签解决：给根组件套上BrowserRouter外标签②报错：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you

react后台管理系统 —0921引入antd库：报错：Manifest: Line: 1, column: 1, Syntax error.原因：创建react-app项目时候删除了manifest.json文件，但是在public的index.html中还有它的引入没有删除。解决：删除index.html中的： 样式出现问题：原因：未引入样式解决：引入样式，代码：import ‘…/…/…/node_modules/antd/dist/antd.less’;引入axios：

0920 NOTEredux数据共享(1).定义一个Pserson组件，和Count组件通过redux共享数据。(2).为Person组件编写：reducer、action，配置constant常量。(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。纯函数一个函数的返回结果只依赖于它的参数，并且在执行过程里面

0919 NOTEredux的简单使用①安装：npm i redux②引用举例：//store.jsimport {createStore} from ‘redux’import reducer from ‘./reducers’export default createStore(reducer)//reducer.jsconst initState = 0;export default function countReducer(preState=initState,action

0918 NOTEredux的三个核心概念action动作的对象包含2个属性：​ type：标识属性, 值为字符串, 唯一, 必要属性​ data：数据属性, 值类型任意, 可选属性例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }reducer​ 用于初始化状态、加工状态。​ 加工时，根据旧的state和action， 产生新的state的纯函数。store将state、action、reducer联系在一起的对象如

0917 NOTE路由的基本使用原生html中可以通过a标签调转不同页面react中通过路由链接实现切换组件//1.安装react库npm i react-router-dom//2.组件中引入import {Link,BrowserRouter,Route} from "react-router-dom"//3.Link标签类似a标签 to属性用于链接跳转<Link className="" to="/about">About</Link><Link c

0916 NOTEtodoList案例总结​ 1.拆分组件、实现静态组件，注意：className、style的写法​ 2.动态初始化列表，如何确定将数据放在哪个组件的state中？​ ——某个组件使用：放在其自身的state中​ ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）​ 3.关于父子之间通信：​ 1.【父组件】给【子组件】传递数据：通过props传递​ 2.【子组件】

原始类型和对象类型原始类型有哪几种？null是对象么？答：​ js中原始类型有6种：Number，Boolean，String，Symbol，undefined，null；​ 原始类型与对象类型的区别在于，原始类型存储的是值，而对象类型存储的是指向堆中对应数据的指针，原始类型存于栈中，对象类型存于堆中，虽然，比如，类似123.toString()可以执行转化，但是其实过程中是发生了类型强制转化，证据是通过instanceof判定123是否是Number类型，打印结果为false，代表原始类型没有原

0915 NOTE新生命周期生命周期流程图（新）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JGxOTqb-1631716995505)(0915%20NOTE.assets/image-20210915101237823.png)]对比旧生命周期流程图：​ 下述生命周期方法即将过时，在新代码中应该避免使用它们：UNSAFE_componentWillMount()UNSAFE_componentWillUpdate()UNSAFE_compo

重构call、apply、bind逻辑梳理：第一个参数为改变后this指向，第一个参数不存在则默认指向windowcall后续参数不限制，apply只能拥有两个参数，且第二个参数必须为类数组call与apply改变this指向后调用函数，bind改变this指向后返回一个新函数，不执行call、apply、bind所有函数均可调用，因此，这三个方法均为函数原型对象上的属性callFunction.prototype.myCall = function (invoke) {