03 2022 档案
摘要：一、immutable数据拷贝优化在于引用，而不是占据内存的深拷贝大量数据的差异性能 (主要是属性多，对数据进行复杂单独提炼修改方便来优化数据源) 1.因为在react中，redux经常要做拷贝，因为redux中的reducer是一个纯函数（输出完全依赖输入，不能影响外部数据） 不管是json方法拷
阅读全文
摘要：一、react里面的组件开发分两类 一种是判断类组件和函数组件开发的区别 1.组件区别： 类组件：有生命周期， 函数组件：没有生命周期，没有状态，纯函数 区别：1.函数组件是一个纯函数，它接收一个props对象返回一个react元素； 而类组件需要去继承React.Component并且创建rend
阅读全文
摘要：一、当需要交换两个变量的值时，如何使用声明交换 1.使用一个临时变量来交换 中间变量 let a=10; let b=20; let temp=a; a=b; b=temp; console.log('a='+a,'b='+b) 2.使用ES6解构赋值语法来交换 let a=10; let b=20
阅读全文
摘要：1.实现类，必须实现Car数据接口 /** 定义数据类型 */ interface Car { wheel: number; color: string; say: () => void; } type CarProp = { wheel: 4 | 6; color: string; } // 实现
阅读全文
摘要：一、为什么使用TS开发，js不足够吗 第一点知识：vscode和TypeScript是都是微软开发，维护的。市场使用人多率 TS是微软公司开发和维护的一种面向对象的编程语言。它是JS的超集，包含其他所有元素。 TypeScript完全遵循OOPS的概念，在TSC（TypeScript编译器）来解析t
阅读全文
摘要：一、当异常出错程序时，应该用什么修补当前场景 //错误处理：即使程序发生错误，也不保证不异常终端的机制 try{ 可能发生错误的代码 // throw new Error(); }catch(err){ 只有发生错误时才执行的代码 }finally{ 无论是否出错，肯定都要执行的代码 } //使用要
阅读全文
摘要：一、当需要与后端接口开发时，根据开发文档来是需要封装ajax请求 1.入口app.js文件配置 // app.js 是项目的入口文件，所以必须调用App(这个方法的名字是固定的)方法，所有的js代码都应该在这个方法中进行编写 App({ // 是一个全局生命周期，而且只有这一个，应用注册生命周期 o
阅读全文
摘要：一、当需要做分页功能时使用原理，如何去做实现 1.定义数据 //定义数据 data:{ typesList:[], type:'全部', list:[], page:1, //加载更多，需要做节流，节流标识（是否有更多数据、是否加载中、是否滚动到底部） hasMore:true, loading:t
阅读全文
摘要：1.transition用法动画效果调试 transition:color .25s linear; /*调试时候直接在浏览器点击linear 去调试动画效果 */ /* 动画效果是在点击移动选中时出现的样式 */ transition :all .25s ...; 直接在浏览器去调试几个按钮就可以
阅读全文
摘要：1.合并数组 并非运算for 运算 setData( { typeList:['全部', ...result.data] //展开运算数组 typeList:['全部'].concat(result.data) //concat数组合并 typeList:result.data.reduce((r,
阅读全文
摘要：一、当需要实现函数组件的双向绑定时无非就是实现手动将事件对象加值变量 1.useState + value + onChange事件对象 =>输入框双想绑定 const Input=()=>{ const [message,setMessage] = useState(''); return( <>
阅读全文
摘要：在REACT组件中： 1.基于数据驱动（修改状态数据，REACT帮助重新渲染视图）完成的组件叫做受控组件 ==>（受数据控制的组件） 2.基于ref操作的dom实现视图更新的，叫做非受控组件 =>在项目场景中，建议多使用受控组件 VUE:[MVVM] 数据更改视图跟着更改，视图更改数据也跟着更改（双
阅读全文
摘要：一、页面常常有事件点击的场景，这里有两种情况分辨 事件冒泡和事件捕获 浏览器上最外层是window对象 1.事件捕获 > 它是从最外层开始发生到最具体的元素 p document ->html ->body ->div ->p 2.事件冒泡是从结构内层最里面元素发生到最外层document对象 最内
阅读全文
摘要：一、实现数据双向绑定 底层原理实现 输入框 1.使用Object.defineProperty实现 <input id="inputNode" type="text" oninput="inputEvt()"/> <h1 id="showNode"></h1> <script> var obj={
阅读全文
摘要：一、当想获取输入框的值并想展现出来时候就需要用什么方式来获取 1.js事件对象 2.框架绑定 1.使用oninput事件 拿取元素id选择器 直接获取 <h1 id="title">HELLO JS oninput</h1> <input type="text" id="a" name="b" cl
阅读全文
摘要：一、url解析 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTTP连接 5.服务器处理请求 6.服务器响应请求 7.浏览器展示HTML 8.浏览器在发送请求获取其他在HTML中的资源 输入地址后，计算机向dns服务器发出ip查询请求，要求进行地址解析，然后dns服务器把ip地址
阅读全文
摘要：1.mobx是一个轻量级的状态管理器，所以很简单(单一全局数据使用class)类有get 数据方法 我们需要把数据做成全局数据，并且这个数据不能污染全局数据 -- 应该是一个闭包(ES6 中class是一个语法糖，本身是一个函数) 所以应该定义一个类，然后导出一个实例（因为数据要全局通用，所以不能导
阅读全文
摘要：开发工具：微信开发者工具，注册账号 => 微信原生开发 网站：https://mp.weixin.qq.com 必须注册：和公众号类似 个人账号 -- 不能有大量用户 企业账号 -- 可以有一切的功能 注意点：公众号，企业号、小程序、小游戏这些号，都是使用的一个邮箱，在这些平台上一旦这个邮箱注册以后
阅读全文
摘要：1.dom盒子添加阴影效果，具备好看的样式点 <style> .layout-dropdown-box{ display:block; width:120px; padding:8px 12px; background-color:#fff; // 加阴影 box-shadow: 0 0 12px
阅读全文
摘要：1.用户菜单列表数据是有后端传递过来的数组菜单列表数据 里面有路由地址，权限地址，以及id 前端根据路由地址来匹配是否有该组件来决定渲染组件页面 前端根据路由用户菜单权限来决定是否有判断菜单列表数据来进行判断有用户权限处理技术点 route有render属性，就是控制访问组件使用的权限技术点 路由也
阅读全文
摘要：1.index项目通用样式使用 // 要有通用样式 -- 系统字体 /* 全局页面通用配置 start */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-f
阅读全文
摘要：1.useEffect是项目（组件）初始化时候，来获取数据 -- 函数组件是没有生命周期的 //继续使用钩子函数来处理 -- 副作用钩子函数 ==>在做事情的时候，会有什么样的副作用 比如更新数据 const [a,setA]=([]) 2.如果在这里面调用了setA(数据)方法api，就直接给a给
阅读全文
摘要：1.常用于应用进行对用户密码保护来做出的加密处理措施 react里使用 yarn add crypto-js 引入crypto-js包 import {AES,enc} from 'crypto-js' //先声明一个 钥匙 const KEY='iskey'//缓存获取数据let cache =
阅读全文
摘要：1. ?.是可选链，只有左边为空或者underfined的时候会执行右边的属性进行查找，如果不存在就返回了undefined来不报错，表明对象是空的 null.name //无法读取属性 var userInfo = null //undefined userInfo.name // 无法读取 nu
阅读全文
摘要：1.logo是先在iconfont下载png格式图片然后上传到网址 https://www.aconvert.com/cn/icon/ 选择64x64的图片下载本地就可以使用缓存icon 2.二维码:草料网免费制作
阅读全文
摘要：钩子函数使函数组件中拥有state和副作用（useEffect）。官方提供了两种state管理的hook:useState,useReducer。 1.react钩子函数 -- useContext 它是react的方法函数createContext()需要先提供数据来进行给以其他使用消费 //st
阅读全文
摘要：1.版本号使用 react：^17.0.2 react-dom:^17.0.2 react-redux:^7.2.6 redux:4 redux-thunk:^2.1.4 2.系统架构todolist案例架构 3.项目 1.实例入口：（配置中心、注册等等）-> 系统组件入口（页面分发中心） -> 2
阅读全文
摘要：1.Redux 基本使用 yarn add redux@4 2.Redux 异步请求 yarn add redux-thunk 3.Redux 跨组件传值 yarn add react-redux // store/index.js import {createStore,applyMiddlewa
阅读全文
摘要：1、Redux 原理 redux框架基于flux（flux是react专用的一个状态管理器）设计思想、设计模式来开发实现的一个js库，它不是react的专用 vuex也是基于flux原理来的一个库 redux 三大设计原则：数据源单一、state只读、纯函数修改 单一数据源原则 -- 全局只有一个，
阅读全文
摘要：.btn{ display:inline-block; vertical-align:middle; line-height:30px; border:solid 1px #ddd; font-size:14px; text-align:center; padding:0 16px; /*下面鼠标样
阅读全文
摘要：在开发的时候建议下载到本地来进行使用，因为网络会有些因素不适宜使用，所以本地的项目就会有很好的稳定依赖 1.直接连接找所需要的插件，进行链接地址，或者下载到本地来进行导入文件就可以直接使用。 https://www.bootcdn.cn/ 2.还一种方式就是网上下载不了文件时，可以在使用框架，里下载
阅读全文
摘要：1.一个问题console.log(0.1+0.2 0.3) //这样的结果时false 四舍五入 toFixed()方法 如果是有精度要求可以直接使用它解决 能得出结果 这样出现数据会不正确 还包括round(),floor(),ceil()等都是不会四舍五入，有精度问题 ES6在Number对象
阅读全文
摘要：1.HOC -- 高阶组件Hign order component 从函数式编程过来的一个概念，它源于HOF high order function 高阶函数 HOF高阶函数： - -就是一个函数接收一个算子函数，然后返回一个算子函数 HOC高阶组件 -- 就是一个函数接收一个组件，然后返回一个组件
阅读全文
摘要：1.调用createContext方法来创建一个Context对象 //createContext(defaultValue:any):React.Context //creactContext方法会执行以后会返回一个Context对象 //interface Context{ // Provide
阅读全文
摘要：->TS->VUE3/react-hooks -> webpack/rollup - nodejs->leader 1.生命周期 -- 只有类组件中才有 受控组件 - - 它的数据全部来源于props 三个阶段：挂载、更新、卸载 在挂载和更新，render方法是更新虚拟dom的必要生命周期，这个方法
阅读全文
摘要：1. 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用(更新数据方法，这个是动画更新重绘) 2.语法： wi
阅读全文
摘要：一，作用域 const和let:没有变量提升，且定义的变量只在let命令所在的代码块生效，在定义之前使用，会报错 var :变量会被提升，在全局范围内都有效，且可在变量定义之前使用 二、重复声明 const和let:在同一作用域内，不允许重复声明同一个变量 var:允许重复声明 三、赋值 let 和
阅读全文
摘要：1.页面节点获取 2.组件内部数据管理对象 -- state 在react中只有两种数据： 一个是组件内部数据 -- 称为state数据(当前组件的状态数据)，还有一个是组件外部数据 类组件的render方法只有这两种数据的更新会触发 定义state，在构造函数中必须先调用super()，名字必须是
阅读全文
摘要：一、函数组件没有this对象，也没有生命周期 hooks是在16.8以后才有的，也就是函数组件是后来添加的， 它的原理就是把类组件的render方法进行抽取实现的 函数组件与hooks 1.useState -- 定义一个state数据 useState为什么会在第二个参数是函数？因为react都是
阅读全文
摘要：一、类生命周期 1.在react中，生命周期只有类组件才有，函数组件没有生命周期 在现在开发过程中，以函数组件为主要开发，类组件几乎被抛弃，因为类组件不灵活，现在的编程偏向与 函数式编程 1.生命周期 -- 挂载 constructor -- 是用于初始化数据 ,不能在这里写setState()调用
阅读全文
摘要：变量作用域：全局变量和局部变量 问题：函数外部无法读取内部 ，声明也会体现是否全局在函数内或者外部 1.闭包：就是指能够读取其他函数内部变量的函数。 在js中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成：定义在一个函数内部的函数（嵌套函数） 本质上，闭包是将函数内部和外部连接起来的桥梁
阅读全文
摘要：1.使用场景在，有数据时间或者数据是不适宜展示的内容，就可以使用过滤器来去修改展示的数据而不去改变原有的数据去过滤。 属性filters就是一个vue用于定义方法过滤器（替换相当于replace()原理实现） //自定义过滤器 {{p.st | dateFormat('MM月DD日 hh时')}}
阅读全文
摘要：1.使用对象替换属性和值方法 var obj={ name:'jack' } obj['name'] //'jack' //对象添加属性var n="age";obj[n]="23" //'23'console.log(obj) //{name: 'jack', age: '23'} 如果属性名称是
阅读全文
摘要：1.在当该表格中出现长度比列幅宽的半角字符时，td的宽度会被内容撑破？ 解决此问题的方法是：在明细行的td中，追加style="word-wrap:break-word;"， 这样做可以使半角连续字符强制换行，不至于撑破列宽。 <td align="left" width="150px" style
阅读全文
摘要：1.下载less@4版本，less-loader@7解释器 cnpm i -S less@4 less-loader@7 组件集成样式集成： 样式预处理器：css -> sass -> less -> stylus -> postcss -> sss UI设计语言：https://ant.desig
阅读全文
摘要：/* * @Author: Qingshan_Chen * @Date: 2022-01-18 10:02:15 * @Description: 项目描述 * @LastEditors: Qingshan_Chen * @LastEditTime: 2022-01-20 18:29:17 * @Fi
阅读全文
摘要：1.在组件传值的时候，开发上会对数据类型进行检测，是否传递的需要数据，有这么一个库可以 使用它的属性特性来决定预料属性类型数据来进行控制和判断 在根据这些的定义检查传递给组件的props，不匹配就会在开发上发出警告 官方安装：npm install --save prop-types react安装
阅读全文
摘要：1.Array.form() 该方法是一个类似数组或可迭代对象对象来用于创建一个新的，浅拷贝的数组实例（因为会返回一个数组实例对象） 有两个参数:arraylike是想要转换成数组的伪数组对象或可迭代对象（一般用在Array(10)伪数组上） 第二个参数可选：如果指定了该参数，新数组中的每个元素会执
阅读全文
摘要：1.前提必须是function声明方法其他时不行的，除了箭头函数 var name='小王',age=17; var obj={ name:'小张'， objAge:this.age, myFun:function(){ console.log(this.name+"年龄"+this.age); }
阅读全文
摘要：1.使用函数调用参数，来对数组进行concat合并处理指向apply调用this执行函数 function combine(){ let arr=[].concat.apply([],arguments); //这里是没有去重，是进行合并数组 return Array.from(new Set(ar
阅读全文
摘要：1.数据绑定语法：{} 定义一个数据，React中的所有绑定语法只有一个是单花括号：{}，没有指令，包括注释都是一个花括号 绑定语法一定得到一个结果，可以是一个方法赶回一个值 绑定对象的值也是直接{}单花括号语法 jsx的注释:{ /* */} =>单花括号里面是多行注释 一旦使用了{}语法。在语法
阅读全文
摘要：作为一个前端开发工程师，在后端还没有ready的时候，不可避免的要使用mock的数据。很多时候，我们并不想使用简单的静态数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。 json-server就是一个很好的可以替代工作的工具 1.json-server是一个包插
阅读全文
摘要：一、标签行内样式写法： <h2 style={{textAlign:"center",fontFamily:"黑体"}}>react</h1> //行内标签样式要用双括号，如遇见两个单词就要第二个单词首字母大写驼峰命名 二、内部声明样式写法 const a={ border:"1px solid b
阅读全文
摘要：一、react初之体验 a.理解React设计的核心思想 它是V（view 视图）框架，设计之初仅仅是不满意Boostrap的页面设计: 1.一切皆组件，最小化到一个元素 2.只有单向数据流 - - 数据可追溯，获取值和设置值都是一个方法 b.React开发特性 除了核心库之外，其它的所有库包括状态
阅读全文
摘要：1.react框架使用版本 node 14版本 react 17.0.2 craco 6.4.3版本 redux 4.1.2版本 react-redux 7.2.6版本 echarts 4版本 （5版本需要定义引入对象） react-router-dom 5坂本
阅读全文
摘要：1，webpack开发环境搭建，以及常用的JS配置模块 官网: https://webpack.docschina.org/ a、用法：作用以及用法 webpack是一个平台，可以进行项目运行和项目打包的一个功能 它提供了一些生命周期，外部框架可以根据生命周期来实现自己的loader：vue的编译器
阅读全文
摘要：1.字符串截取转换成数字 let a='￥322' a.slice(0,1) // '￥' parseInt(a.slice(1,9))//322 //使用js的转换函数来转数字 转数字专用，否则转为NAN 2.转数字的js两个函数专用 parseInt() :这个转换整数 parseInt("12
阅读全文
摘要：1.es6语法删除数组对象根据id元素 const id=2 let arr=[{id:1,name:"b"},{id:2,name:"b"}]; let newArr=arr.filter(function(obj){ return id !== obj.id; }) console.log(ne
阅读全文
