qq_21087199-CSDN博客

原创 chrome浏览器解决跨域请求SameSite方案

在chrome浏览器地址栏输入chrome://flags并回车在搜索栏中输入SameSite by default cookies搜索，并禁用如图中的两项设置，改为Disabled即可点击右下键ReLaunch重启浏览器即可什么是SameSite

2021-02-25 14:31:14 1454

原创性能优化原则

（适用于所有编程的性能优化----空间换时间）减少CPU计算量，减少网络加载耗时。多使用内存、缓存或其他方法。

2024-04-10 16:05:09 810 1

原创【运行环境】加载资源的形式

html代码媒体文件，如图片，视频等。

2024-04-10 15:57:43 140

原创 https

先用非对称加密，然后生成一个key 再用对称加密（成本小）非对称加密：一对key ,A 加密后，只能用B来解密。http 是明文传输，敏感信息容易被中间劫持。https=http+加密，劫持了也无法解密。现在浏览器已开始强制https协议了。对称加密：一个key负责加密和解密。https同时用到了两种加密方式。第三方证书：阿里云ssl 证书。

2024-04-09 16:26:42 502

Content-type 发送数据的格式，如application/json。Content-type返回数据的格式，如application/json。Content-Encoding 返回数据的压缩算法，如gzip。Accept-Encoding 浏览器可接收的压缩算法，gzip。Content-length 返回数据的大小，多少字节。Accept-language 浏览器可接收的语言。User-Agent (UA ) 浏览器信息。Accept 浏览器可接收的数据格式。Host 请求的域名。

2024-04-08 15:03:58 470

原创【http】http 状态码和http methods及restful api

一 http 状态码1 状态码分类1xx 服务器收到请求2xx 请求成功如2003xx 重定向如3024xx 客户端错误，4045xx 服务端错误 5002 常见状态码200 成功301 永久重定向（配合location ,浏览器自动处理）302 临时重定向（配合location ,浏览器自动处理）304 资源未被修改，缓存资源404 资源未找到403 没有权限500 服务器错误504 网关超时3 关于协议和规范就是一个约定要求大家跟着执行不要违反规范

2024-04-08 15:00:01 405

原创【 Vue 3】Vue3.0性能提升主要是通过哪几方面？

回顾Vue2,我们知道每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter,则会通知watcher ,从而使关联的组件重新渲染可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多diff和遍历其实都是不需要的，造成性能浪费因此，Vue3在编译阶段，做了进一步优化。

2024-03-26 14:17:25 567 1

原创【 Vue 3 】Vue3.0所采用的CompositionApi与Vue2.x使用的Options Api 有什么不同？

Composition API可以说是Vue3的最大特点，那么为什么要推出Composition Api,解决了什么问题?以上通过使用Composition Api都能迎刃而解。

2024-03-26 13:51:42 375

原创对高阶组件的理解？应用场景？

高阶函数(Higher-order function),至少满足下列一个条件的函数上述代码中，该函数接受一个组件WrappedComponent作为参数，返回加工过的新组件EnhancedComponent。

2024-03-22 20:32:41 293

原创【React 】React 性能优化的手段有哪些？

代码层面工程层面框架机制层面通过这三个层面的优化结合，能够使基于react项目的性能更上一层楼。

2024-03-22 17:48:53 1721

原创【 Redux 】 Redux中间件的理解？常用的中间件有哪些？实现原理？

中间件(Middleware)是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理，其本质上一个函数，对store.dispatch方法进行了改造，在发出Action和执行Reducer这两步之间，添加了其他功能。

2024-03-20 14:22:16 870

原创【 React 】在React项目中是如何使用Redux的？

通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图

2024-03-20 12:46:59 603

原创【React 】如何提高组件的渲染效率？在React中如何避免不必要的render?

在实际开发过程中，前端性能问题是一个必须考虑的问题，随着业务的复杂，遇到性能问题的概率也在增高除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染。

2024-03-19 19:12:04 703

原创【 React 】React JSX 转换成真实DOM的过程？

使用React.createElement或JSX编写React组件，实际上所有的JSX代码最后都会转换成React.createElement(…),Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象。

2024-03-19 12:03:11 573

原创【 React 】Real DOM 和Virtual DOM的区别？优缺点？

在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构上述中，ReactDOM.render()用于将你创建好的虚拟DOM节点插入到某个真实节点上，并渲染到页面上通过console.log(VDOM),则能够得到虚拟VDOM消息。

2024-03-18 16:50:54 635

原创【 React 】React render方法的原理？在什么时候会被触发？

在render过程中，React将新调用的render函数返回的树与旧版本的树进行比较，这一步是决定如何更新DOM的必要步骤，然后进行diff比较，更新DOM树*

2024-03-18 16:27:07 658

原创【 React 】React 中的setState执行机制

个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用如下例子通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变。

2024-03-17 19:44:56 653

原创【 React 】对React refs的理解？应用场景？

Refs在计算机中称为弹性文件系统(英语：Resilient File System,简称ReFS)React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

2024-03-15 18:43:19 471

原创【 React 】在React 项目是如何捕获错误的？

在react项目中去编写组件内JavaScript代码错误会导致React的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象作为一个框架，react也有自身对于错误的处理的解决方案。

2024-03-15 18:30:10 781

原创【 TypeScript 】对TypeScript中类的理解？应用场景？

类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础类是一种用户定义的引用数据类型，也称类类型传统的面向对象语言基本都是基于类的，JavaScript基于原型的方式让开发者多了很多理解成本在ES6之后，JavaScript拥有了class关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多。

2024-03-14 20:42:26 931

原创【 React 】React 组件之间如何通信？

由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中

2024-03-14 20:31:12 665

原创【 React 】React 中引入css的方式有哪几种？区别？

将css文件作为一个模块引入，这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件。将 css单独与在一个 css文件中,然后在组件中直接引入。

2024-03-13 15:54:00 1169

原创【 React 】React 构建组件的方式有哪些？区别？

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式在React中，一个类、一个函数都可以视为一个组件

2024-03-13 15:42:17 631

原创【 TypeScript 】对TypeScript中泛型的理解？应用场景？

泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型

2024-03-12 15:00:55 1082

原创【 TypeScript 】对TypeScript中函数的理解？与JavaScript的区别？

在TS里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript为JavaScript函数添加了额外功能，丰富了更多的应用场景函数类型在TS 类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建模块

2024-03-12 14:19:18 351

原创【 TypeScript 】对TypeScript中高级类型的理解？有哪些？

除了string、number、boolean 这种基础的类型之外，在ts类型声明中还存在一些高级的类型应用这些高级类型，是ts 为了保证语言的灵活性，所使用的一些语言特性。这些特性有助于我们应该复杂多变的开发场景

2024-03-11 14:08:14 828

原创【 TypeScript 】TypeScript的数据类型有哪些?

在开发阶段，可以为明确的变量定义某种类型，这样ts就能在编译阶段进行类型检查，当类型不符合预期结果的时候就会出现错误提示

2024-03-11 12:27:26 916

原创【TypeScript】对TypeScript的理解？与JavaScript的区别？

TypeScript是JS的类型超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等。

2024-03-11 11:24:12 440

原创【 React 】React 事件绑定的方式有哪些？有什么区别？

为了解决上面正确输出this问题，常见的绑定方式有：render方法中使用bindrender方法中使用尖头函数constructor中bind定义阶段使用箭头函数绑定

2024-03-10 19:38:31 804

原创【 React 】受控组件和非受控组件的理解？应用场景？

如果想要接触被控制，可以为input标签设置onChange事件,输入的时候触发事件函数，在函数内部实现state更新，从而懂啊组织input框的内容改变。受控组件特征：一次性取值（如提交时），提交时验证，即时现场验证，有条件的禁用提交按钮，强制输入格式，一个数据的多个输入，动态输入。如果选择非受控组件的话，控制能力较弱，表单数据就由DOM本身处理，但更加方便快捷，代码量少。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。非受控组件，就是不受我们控制的组件。

2024-03-10 13:37:26 456

原创【 React 】对React中类组件和函数组件的理解？有什么区别？

函数组件语法更短、更简单，这使得它更容易开发、测试和理解。类组件会因为大量使用this让人困惑。

2024-03-08 15:45:11 1410

原创【 React 】super()和super(props)有什么区别

在React 中，类组件基于ES6，所以在constructor中必须使用super在调用super过程，无论是否传入props，React内部都会将props赋值给组件实例props属性中，如果调用了super(),那么this.props在super和构造函数结束之间仍然是undefined。

2024-03-08 14:13:15 821

原创【 React 】state和props有什么区别？

React 的核心思想就是组件化思想，而且页面会被切分成一些独立的、可复用的组件

2024-03-07 18:32:54 601

原创【 React 】对React Router的理解？常用的Router 组件有哪些

Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件BrowserRouter是history模式，HashRouter模式吏用两者作为最顶层组件包裹其他组件。例如将path在Route匹配时写成/detail/:id,那么 /detail/abc、/detail/123都可以匹配到该Route。上述组件当接收到的路由参数name不等于tom的时候，将会自动重定向到首页。动态路由的概念指的是路由中的路径并不会固定。在跳转的路径中添加了一些query参数；● search传递参数。

2024-03-06 16:18:50 1085