摘要：
### 编译结果分析 #### 观察编译结果后，模拟打包模块 ``` // 改对象中保存了所有的模块，以及模块对应的代码 var modules = ((modules)=> { var moduleExports = {}; // 用于缓存模块的导出结果 // require函数相当于是运行一个模 阅读全文
posted @ 2023-04-19 16:44
HuangBingQuan
阅读(54)
评论(0)
推荐(0)
摘要：
解决方案 配置 treeNodeFilterProp 属性，treeNodeFilterProp='title' 阅读全文
posted @ 2023-04-12 12:49
HuangBingQuan
阅读(16)
评论(0)
推荐(0)
摘要：
React-router v6 路由总结 组件 BrowserRouter：整个前端路由以 history 模式开始，包裹根组件 HashRouter：整个前端路由以 hash 模式开始，包裹根组件 Routes：类似于 v5 版本的 Switch，主要是提供一个上下文环境 Route：在 Rout 阅读全文
posted @ 2023-03-23 11:20
HuangBingQuan
阅读(186)
评论(0)
推荐(0)
摘要：
1. viewviewport 缩放适配 (()=> { let viewprot = document.querySelector('#viewport'); // 获取设备宽度 let curWidth = document.documentElement.clientWidth; // 计算缩 阅读全文
posted @ 2023-03-11 22:43
HuangBingQuan
阅读(104)
评论(0)
推荐(0)
摘要：
深入认识React类组建修改状态-setState setState，它对状态的改变，可能是异步的； 如果改变状态的代码处于HTML元素事件中，则其是异步的，否则是同步 如果遇到某个事件中，需要同步调用多次，需要使用的函数方式得到最新状态。 最佳实践 把所有的setState当作是异步的。 永远不要 阅读全文
posted @ 2023-03-09 11:13
HuangBingQuan
阅读(56)
评论(0)
推荐(0)
摘要：
react hook 风格下不再使用class类的形式定义组件，也就不再适用mobx以前版本的装饰器语法。 以下分享 reack hook 语法风格下使用 mobx v6 版本的状态管理配置使用方式。 相关依赖： "mobx": "^6.8.0", "mobx-react-lite": "^3.4. 阅读全文
posted @ 2023-03-08 11:36
HuangBingQuan
阅读(295)
评论(0)
推荐(0)
摘要：
关系选择器 E+F：下一个满足条件的兄弟元素节点 div + p (选中和div并列的第一个p) E~F：所有满足条件兄弟元素节点 div ~ p (选中和div并列的所有p) 属性选择器 div[class~=“a”] // 选中class值中有a div[class|=“a”] // 选中cla 阅读全文
posted @ 2023-03-05 17:00
HuangBingQuan
阅读(41)
评论(0)
推荐(0)
摘要：
单页面中使用React 在单页面中使用React需要引入三个js：React的核心库、依赖核心库、babel（编译JSX） <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> 阅读全文
posted @ 2023-03-03 21:32
HuangBingQuan
阅读(19)
评论(0)
推荐(0)
摘要：
Hello TypeScript TypeScript是JS的超级，是一个可选的、静态的类型系统 静态的（类型检查发生的时间，在编译的时候，而非运行时） 类型系统（对代码中所有的标识符（变量、函数、参数、返回值）进行类型检查） 在node中搭建TypeScript环境 安装typescript：ya 阅读全文
posted @ 2023-02-26 22:13
HuangBingQuan
阅读(35)
评论(0)
推荐(0)
摘要：
生成一个唯一ID，时间戳+4位随机数 export function generateId() { return Date.now() + Math.random().toString(16).substring(2, 4); } 阅读全文
posted @ 2023-02-25 19:08
HuangBingQuan
阅读(33)
评论(0)
推荐(0)
摘要：
// 原数组 let objArray = [ { name: "111", id: "1" }, { name: "333", id: "3" }, { name: "111", id: "2" }, { name: "222", id: "3" }, ]; function objSet(arr 阅读全文
posted @ 2023-02-21 13:01
HuangBingQuan
阅读(29)
评论(0)
推荐(0)
摘要：
Vue数据响应式底层原理 数据响应式定义：（当数据变化的时候，会自动运行一些相关函数） 原理就是通过Object.defineProperty() 对属性进行劫持，当访问该属性时我们就收集依赖，当数据发生改变后就派发更新 function observe(obj) { for (const key 阅读全文
posted @ 2023-02-19 21:59
HuangBingQuan
阅读(64)
评论(0)
推荐(0)
摘要：
<!-- 理想适口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scalc=1, maximum-scale=1, user-scalable=no"> <!-- 代码意义： wi 阅读全文
posted @ 2023-02-07 22:05
HuangBingQuan
阅读(34)
评论(0)
推荐(0)
摘要：
准确判断一个变量的数据类型 由于typeof无法判断引用数据类型 所以需要调用 Object.prototype.toString.call上的方法 /** * 获取变量准确类型的函数 * @param { * } target "目标变量" * @returns { String } */ con 阅读全文
posted @ 2023-02-02 13:45
HuangBingQuan
阅读(50)
评论(0)
推荐(0)
摘要：
应用场景 Vue组件中写样式，通常如下方代码： <style scoped> .comA .data { background: red; } </style> 因为关键字scoped的原因,style标签内的样式只会对当前组件内容生效,因为最终生成出来的样式选择器是这样的: .comA .data 阅读全文
posted @ 2023-01-19 19:51
HuangBingQuan
阅读(133)
评论(0)
推荐(0)
摘要：
简化if，条件映射 举个例子 - 根据一个分数转换成绩 阅读全文
posted @ 2023-01-06 23:13
HuangBingQuan
阅读(49)
评论(0)
推荐(0)
摘要：
报错：vuex报错 this.$store显示undefined 可能是版本问题或者store压根就没有注入到vue的原型上所以导致undefined。 解决方案 检查main.js中是否将store注入vue实例中，如果没有将store引入并注入！ import Vue from "vue"; i 阅读全文
posted @ 2023-01-03 00:27
HuangBingQuan
阅读(1052)
评论(0)
推荐(0)
摘要：
深度克隆（深拷贝） export const deepClone = (targetObj)=> { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port1.postMessage(ta 阅读全文
posted @ 2022-12-29 23:54
HuangBingQuan
阅读(90)
评论(0)
推荐(0)
摘要：
Mobx解决的问题 React的数据管理，除了redux之外，一个新的状态管理方案mobx 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流，数据流完全可控并可追踪。要实现该目标，便需要进行相关的约束。Redux由此引出了dispatch action reducer等 阅读全文
posted @ 2022-12-29 16:30
HuangBingQuan
阅读(133)
评论(0)
推荐(0)
摘要：
什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。 1. 举个栗子（默认插槽） 父组件 <template> <div> 我是父 阅读全文
posted @ 2022-12-28 22:32
HuangBingQuan
阅读(44)
评论(0)
推荐(0)
摘要：
在初次使用React 的装饰器时，第一次在项目中使用 @会报错，原因是react默认是不支持装饰器的，所以才会报错，所以是需要做一些配置来支持装饰器。 安装插件 yarn add -D react-app-rewired customize-cra yarn add -D @babel/core @ 阅读全文
posted @ 2022-12-27 21:57
HuangBingQuan
阅读(81)
评论(0)
推荐(0)
摘要：
// 按字典排序（中文排序） const cityArr = ['湖北', '广州', '上海', '重庆', '厦门']; function changeCity(arr, callback) { callback(arr.sort((a, b)=> { return a.localeCompar 阅读全文
posted @ 2022-12-24 03:44
HuangBingQuan
阅读(28)
评论(0)
推荐(0)
摘要：
前言 前端打包后，有时需要将打包好的项目跑一下看看效果，这时就可以使用 serve 工具，在本地启动一个静态文件服务器。本文主要简单记录下 npm 包 serve 的基本使用命令。 一、全局安装 serve yarn global add serve or npm install --global 阅读全文
posted @ 2022-12-21 20:44
HuangBingQuan
阅读(964)
评论(0)
推荐(0)
摘要：
redux-thunk与redux-promise redux-thunk与redux-promise都是一个中间件，目的：用来处理redux中的复杂逻辑，比如异步请求； redux-thunk 用法： store里面提供了applyMiddleware方法来在初始化store的时候加载中间件 // 阅读全文
posted @ 2022-12-10 22:30
HuangBingQuan
阅读(284)
评论(0)
推荐(0)
摘要：
Redux底层源码 底层就是发布与订阅模式 const creareStore = (reducer)=> { let list = []; let state = reducer() const subscribe = (callback)=> { list.push(callback) } co 阅读全文
posted @ 2022-12-08 01:40
HuangBingQuan
阅读(25)
评论(0)
推荐(0)
摘要：
Redux-详解-解开谜底 类似于vuex是一个全局状态树（跨组件通信），让组件通信的时候会变得极其方便。 作用：集中式管理 react 应用中多个组件共享的状态 Redux的设计理念 组件可以派发( dispatch)行为( action)去修改state，然后为这些actions编写reduce 阅读全文
posted @ 2022-12-07 04:48
HuangBingQuan
阅读(54)
评论(0)
推荐(0)
摘要：
Css module 在React多人开发中 css中的类肯定会发生冲突 如果每个页面的样式文件加上.module（文件名.module.scss）那么就会避免冲突（原理是将模块的类和id后面会随机生成一些字符串 防止避免冲突） 我们如何获取到那个随机的类呢 例如A页面 目录结构 a -> a.mo 阅读全文
posted @ 2022-12-06 03:21
HuangBingQuan
阅读(99)
评论(0)
推荐(0)
摘要：
路由拦截 应用场景：鉴权，当用户进入到需要授权的组件时，这时候进行拦截，判断用户是否授权，如果授权则放行，正常跳转，如果非授权则重定向授权页面。 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect, 阅读全文
posted @ 2022-12-06 02:10
HuangBingQuan
阅读(344)
评论(0)
推荐(0)
摘要：
参数传递与获取参数 1. 动态路由传参 * 前提配置路由，留好占位 // 1.配置占位 <HashRouter> <Switch> <Route path="/xxx/:id"></Route> //留好占位 </Switch> </HashRouter> // 2.参数传递 import useH 阅读全文
posted @ 2022-12-06 02:09
HuangBingQuan
阅读(692)
评论(0)
推荐(0)
摘要：
路由模式 BrowserRouter与HashRouter BrowserRouter 没有#的路径 HashRouter 有#路径 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect, Route, 阅读全文
posted @ 2022-12-06 02:07
HuangBingQuan
阅读(82)
评论(0)
推荐(0)
摘要：
反向代理 目的：解决跨域问题 在src目录下新建一个setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( 阅读全文
posted @ 2022-12-06 02:02
HuangBingQuan
阅读(175)
评论(0)
推荐(0)
摘要：
useReducer+useContext = 全局状态管理 类似于vuex， 这样的意义是将所有组件的状态都挂载到外部，即组件内是无状态的。 举个栗子useReducer import React, { useReducer } from 'react' // 1. 引入useReducer // 阅读全文
posted @ 2022-12-03 01:45
HuangBingQuan
阅读(111)
评论(0)
推荐(0)
摘要：
useContext 应用场景：非父子组件通信，使用 const GlobalContext = React.createContext() // 创建供应商 供应商提供数据 // App组件提供数据 <GlobalContext value={{ test: "这是一个测试数据" }}></Glo 阅读全文
posted @ 2022-12-01 02:06
HuangBingQuan
阅读(54)
评论(0)
推荐(0)
摘要：
useRef 应用场景：绑在DOM上，绑在组件上，保存临时变量永远不丢失 举个栗子 import React, { useState,useRef } from 'react' export default function App() { const [count, setCount] = use 阅读全文
posted @ 2022-12-01 01:27
HuangBingQuan
阅读(47)
评论(0)
推荐(0)
摘要：
useCallback记忆函数 目的：缓存函数，优化代码 防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次。 举个栗子 var handleClick = useCallback(()=> { console.log(name) }, [name]) // 阅读全文
posted @ 2022-11-30 22:40
HuangBingQuan
阅读(94)
评论(0)
推荐(0)
摘要：
useEffect 总结 特性 参数必须是一个回调函数与一个数组 组件首次加载会执行一次useEffect的回调，之后依赖的值更新则会执行useEffect中的回调。 如果第二个参数是一个空数组则意味着=>空数组不依赖任何东西，所以只会执行一次类似类组件中的componentDidMounted 可 阅读全文
posted @ 2022-11-30 20:14
HuangBingQuan
阅读(89)
评论(0)
推荐(0)
摘要：
vue-router vue-router 是 vue的一个插件库，专门用来实现 SPA应用。 SPA 单页面 Web 应用（single page web application，SPA）。 整个应用只有 一个完整的页面。 点击页面中的导航链接 不会刷新页面，只会做页面的 局部刷新。 数据需要通过 阅读全文
posted @ 2022-11-29 00:42
HuangBingQuan
阅读(56)
评论(0)
推荐(0)
摘要：
shouldComponentUpdate 控制组件自身或子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化。 PureComponent PureComponent会帮你 比较新Props跟旧的Props，新的State和就的State（值相等，或者对象含有相同的属性、且属性值相等等）， 阅读全文
posted @ 2022-11-28 16:40
HuangBingQuan
阅读(33)
评论(0)
推荐(0)
摘要：
初始化阶段的生命周期只会执行一次钩子函数，运行中的阶段会随着状态的改变或父组件变更了属性而执行钩子函数，销毁阶段会随着组件在DOM数上被移除而触发的钩子。 具体看文件中的代码：https://gitee.com/manongquan02/react_test.git 新的生命周期 getDerive 阅读全文
posted @ 2022-11-27 23:10
HuangBingQuan
阅读(95)
评论(0)
推荐(0)
摘要：
/* * @Author: HuangBingQuan bingquan111@qq.com * @Date: 2022-11-25 17:42:05 * @LastEditors: HuangBingQuan bingquan111@qq.com * @LastEditTime: 2022-11- 阅读全文
posted @ 2022-11-26 17:02
HuangBingQuan
阅读(157)
评论(0)
推荐(0)
浙公网安备 33010602011771号