weixin_47552598的博客

转载 event loop

eventloop

原创 vite。

开始 {#getting-started} | Vite中文网

原创 create-react-app

tnpm init react-app my-app

原创 useCallback、useMemo、useEffect

useCallback - 简书useCallback(fn, inputs)===useMemo(() => fn, inputs))useCallback 和 useMemo 的区别 - 简书useMemo和useEffect有什么区别？怎么使用useMemo - 简书react hooks中， useEffect的依赖为引用类型如何处理？_哦莫昔洛依的博客-CSDN博客_useeffect依赖对象精读《Function Component 入门》 - 掘金如何使用Reac..

转载 js之从原型到原型链

原型与原型链

原创 css进阶

一、box-sizingcontent-box width+padding+border+margin border-box width(content+padding+border)+margin二、outline在css调试阶段可以通过outline在查看各个盒模型之间的关系outline和border显示效果类似。两者的区别是，1.border占用空间，outline不占用空间，不会影响元素的尺寸和位置。2.border 可应用于几乎所有有形的htm...

原创 html2canvas

html2canvas(document.body, {useCORS: true,allowTaint: true,backgroundColor: '#ffffff',// windowWidth: document.body.scrollWidth,// windowHeight: document.body.scrollHeight,height: document.body.offsetHeight,width: document.body.offsetWidth,.

原创 赋值、浅拷贝、深拷贝

原创 hash路由与history路由的区别

1.hash模式hash模式的url会在尾巴后面带上#号，hash值的变化不会导致浏览器向服务器发出请求,不会导致重新加载页面,hash的改变的会触发hashchange时间,可以监测浏览器的前进后退。hash的传参会有体积的限制2.history模式history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中需要与后端配合、后端可以拿到路由信息有history.go()、history.back()、history.forward()、history.pushStat

原创 lable 标签右对齐

label{display:inline-block;width:150px;text-align:right;}

原创 当自定义组件在Form.Item里面获取不到值的时候

比如说自定义Select组件 <Select style={{ width:'200px' }} onChange={handleSelect} > { data && data.length && data.map(item => { return <Option value={item.id}>{item.type}</Option&g

转载 前端知识体系

最新整理的 web 前端知识体系 - 知乎what-is-fe | Web 前端知识体系

原创 前端面试问题(持续更新)

1.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式浮动：元素脱离文档流，漂浮在文档流的块框上浮动带来的问题：父元素高度无法被撑开，影响页面布局清除浮动的方式：为父元素前后添加伪类撑起父元素，使用clear：both清除浮动.parent:after,.parent:before{ content:" "; display:block; clear:both }2.BFC块级格式化上下文，它是一个独立的渲染区域，规定内部

原创 useMemo、useCallback

useCallback和useMemo的参数跟useEffect一致，他们之间最大的区别有是useEffect会用于处理副作用，而前两个hooks不能。useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。import React,{useState} from 'react'; export default function W

转载 webpack

webpack是一个前端工程化的构建打包工具。webpack核心概念Entry：入口Output：告诉weboack在哪里输出它所创建的bundlesModule：模块，在webpack里一切皆是模块，一个模块对应着一个文件。webpack会从配置的Entry开始递归寻找所有依赖的模块Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割Loader：loader让webpack能够处理那些非js文件（webpack自身只能理解js）Plugin：插件可以让

原创 前端网络安全问题

1.xss（跨站脚本攻击）攻击者往web页面恶意注入script代码，当用户访问的时候，注入的script的代码就会执行，造成危害防御：对用户输入的内容进行过滤，对输出在网页上的内容进行转义或编码2.crsf(跨站请求伪造)1.用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A； 2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A； 3.用户未退出网站A之前，...

原创 fetch、ajax、axios区别

ajax 异步的js和xml，对原生xhr的封装， 可以实现异步数据交互，实现页面局部刷新fetch属于原生js，脱离了xhr，提供的api丰富 基于promiseaxios支持promise api ，拦截请求和响应，提供了一些并发请求的接口（重要，方便了很多的操作）...

原创 前端开发优化问题（要持续更新）

前端优化，一般是先基础优化（图片编码原理等问题），高一点 即为进阶优化（浏览器的渲染机制，浏览器的存储，优化），结合服务端进行优化（首屏渲染等问题）等。1.减少http请求，资源的合并与压缩，图片懒加载(图片进入可视区域再加载)，图片预加载（提前加载放到缓存），多张图片合并放到一张http上，cdn托管...

原创 前段解决跨域

跨域：协议、域名、端口号不同为跨域 （同源策略可以较少被恶意攻击的可能性)1.jsonp通过script标签不会跨域这一特性，将一个函数通过params传递，后端将参数放到函数里面再传递给前端2.cors通过一个配置，或者直接通过cors第三方中间件3.node正向代理在webpack的devServer中配置proxydevServer:{port:8000,proxy:{"/api":{target:"...

转载 输入url到页面加载经历了什么

1.域名解析输入一个url,先将这个url解析为ip地址，被称为DNS解析2.TCP连接(三次握手)第一次握手:客户端向服务端发送请求报文第二次握手:服务端收到请求报文，如同意连接，则向客户端发送确认报文第三次握手:客户端收到服务端的确认后，再次给服务端发出确认报文，完成连接3.浏览器发送http请求请求报文包括三部分:请求行：指定http请求的方法，url，http协议版本等请求头：描述浏览器的相关信息，语言，编码等请求正文：向服务端传递的数据4.服务端处.

转载 关于token

1.token的引入：token是在客户端频繁向服务端请求数据，服务端频繁验证用户的账号密码是否正确，在这种背景下，token产生了2.token的定义：token是服务端返回的一串字符串，当第一次登陆后，在请求其他接口的时候需要带上3.token的目的：减轻服务器压力，减少频繁的查询数据...

原创 什么时候需要用到redux

redux给react提供了一个可预测化的状态管理机制,如果这个应用的数据状态非常之多且复杂的时候,通过react层级传递很难或者无法让两个组件互相交流的时候，这个时候就需要把所有的state集中到组件顶部，能够灵活的将所有state分发给所有的组件1.用户的使用方式复杂,也就是说用户操作的每一步的状态都需要去记录(还是状态复杂)2.或者说用户的权限、身份问题需要放在全局，随时可以去拿3.某个组件的状态,需要做到共享4.一个组件需要改变全局的组件...

转载 mvc、mvp、mvvm

1.mvcModel View Controller ,数据、界面、业务逻辑分离，将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑model(模型)表示应用程序核心(如数据库)view(视图)表示ui(html页面)controller(控制器)处理输入(业务逻辑) ,负责从视图读取数据,控制用户输入,并向模型发送数据mvc的优点:耦合性低：model层与view层和控制器层都是相分离的,当只需要改变一层的时候其他的两层不...

转载 调用setState后发生了什么

（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，

原创 react 虚拟dom

virtul DOM 通过js对象来模拟dom中的真实节点对象,再通过特定的render方法将其渲染成真实的dom节点(dom:文档对象模型)将新元素添加到ui时,将创建表示为树的虚拟dom。每个元素都是该树上的一个节点,如果这些元素中的任何一个状态改变,那么将创建一个新的虚拟dom树。然后将该树与先前的虚拟dom树进行比较或者'差异化'。完成此操作后,虚拟dom将计算出最佳的方法以对真实dom进行更改。这样可以确保对实际dom的操作最少。因此降低了实际更新dom的性能成本...

原创 react diff算法

传统的diff算法的算法复杂度为O(n^3) n为树中节点的总数 性能消耗严重react diff通过引入虚拟dom,将算法的复杂度转换成O(n)diff策略1.dom节点跨层级的操作特别少,可以忽略不计2.拥有相同类的两个组件会生成相似的属性结构,拥有不同类的两个组件会生成不同的树形结构3.对于同一层级的一组子节点,他们可以通过唯一key值进行区分tree diff因为dom节点跨层级的移动操作少到可以忽略不计,所以react通过updateDepth对虚拟dom树进行层级控.

原创 react中refs的使用

class中1.创建refsthis.myRef = React.createRef()2.绑定refs<button ref={this.myRef} onClick={this.getValue}></button>3.获取ref绑定的dom元素getValue = ()=>{console.log(this.myRef.current)}function中1.1.创建refslet myRef = React.useRef()2

原创 为什么使用setState建议内部使用函数

import React, { Component } from 'react'class Index extends Component{ constructor(props){ super(props) this.state={ count:1 } } handleOBj = ()=>{ this.setState({count:this.state.count+1}) .

原创 React事件处理机制

1.react事件并没有绑定到dom节点上而是绑定到了document，然后由统一的事件处理程序来处理，同时基于浏览器的事件冒泡机制，所有节点的事件会在document上触发2.原生事件阻止冒泡会阻止合成事件的触发 合成事件的阻止冒泡不会影响原生事件3.浏览器的事件执行顺序 捕获-目标元素-冒泡 节点上的原生事件执行在目标阶段，合成事件则执行在冒泡阶段原生事件的阻止会影响合成事件 合成事件的阻止不会影响原生事件4.react合成事件的意义: 减少内存消耗,提升性能，一种事件类型只在d..

原创 react-redux的使用

react-reduxstore存储状态数据reducer 接受action并更新store通过Provider 将store里面的数据通过props传给子孙组件通过connect高阶函数连接react组件与redux 有四个参数 一般只用前两个 mapStateToProps mapDispatchToProps 第一个参数将数据映射到props里 第二个参数可以dispatch一些方法//store index.jsimport {createStore} from 'redu

原创 redux

redux数据流向store存储状态数据reducer 接受action并更新store用户在react组件里面通过store.dispatch触发action，将旧state与action流向reducer,reducer返回新的stated到store,然后通过store.subscribe监听数据的更新,通过store.getState拿到数据//Store index.jsimport {createStore} from 'redux'import red...

原创 react-create-app使用sass

只需安装node-sass即可，无需webpack配置，十分简单，十分好用。npm i node-sass --save注：我用的create-react-app版本为4.0.3，react版本为17.0.2。