Amethyst的博客

文章目录useMemouseCallbackuseStateuseReduceruseRefuseEffectuseMemouseMemo的功能是记忆某个结果，只有当依赖项发生改变时才会更新输出结果组件初始化：执行计算函数，获取计算结果缓存计算结果和依赖项计算返回结果组件更新：判断依赖项和缓存的依赖项是否相同，相同则直接返回已缓存的计算结果不同则执行计算函数，获取新的计算结果，缓存新计算结果和新的依赖项并返回计算结果注意：React会使用Object.is()对新旧依赖数组中

文章目录虚拟DOM和diff算法虚拟DOMDiff算法单节点diff多节点diffreact中key值的作用如何理解fiberReact的双缓存机制虚拟DOM和diff算法虚拟DOM背景：以前使用jq等命令式的完成一些DOM操作，伴随着前端工程化的不断发展，涌现了react、vue等MVVM框架，不用再关心具体的DOM操作，而是把重点放在了基于数据状态的操作，一旦数据更改，相应的DOM元素也会跟着变化，这种声明式的开发方式极大地提高了开发体验，更好地帮助我们实现组件复用、逻辑解耦等虚拟DOM本质上

文章目录跨域问题解决跨域的三种方法1、跨源资源共享(CORS)JSONPreact脚手架配置代理(proxy)第一种配置代理的方法第二种配置代理的方式跨域问题通过xhr进行ajax通信的一个主要限制是跨院安全策略。默认情况下，xhr只能访问与发起请求的页面在同一个域内的资源。这个安全策略可以防止某些恶意行为。解决跨域的三种方法我们在5000端口开启一个服务，需要做的是跨域请求服务端返回的数据。sever1.js如下const express=require('express');const

XSS推荐一篇文章跨站脚本攻击，在网页中嵌入一段js代码反射型xss（非持久型）：攻击的代码放在url中，提交到服务器，又返回给客户端，浏览器解析执行存储型xss（持久型）：常见的攻击方式是在留言的地方，输入一段xss脚本，服务端将评论内容存储在数据库中，这样每次刷新浏览器都会解析执行攻击代码防御输入过滤、输出编码（如把留言全部当成字符串）设置cookie为http-only：只要cookie含有http-only字段，那么任何javaScript脚本都没有权限读取这条cooki

浏览器存储cookie和session的区别cookie数据存放在浏览器上，session存放在服务器上cookie一般在客户端有大小限制，一般为4K，session没有限制，但是考虑到服务器性能，一般不能存放太多数据cookie可以设置过期时间，否则一直有效，session在超过一定的时间（通常30min）后就会失效，当关闭浏览器时，会自动调用session.invalidate()方法，清除掉session中的信息cookie安全性较低，可以通过分析本地的cookie并进行co

文章目录发布订阅模式（观察者模式）通用的发布-订阅模式取消订阅的事件全局的发布-订阅对象模块间通信先发布再订阅总结发布订阅模式（观察者模式）定义：定义对象之间一对多的依赖关系，当一个对象状态发生改变时，所有依赖它的对象都将得到通知发布-订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要做任何改变，同样发布者需求改变时，也不会影响到之前的订阅者。只要约定的事件名没有变化，就可以自由地改变它们实现发布-订阅模式指定发布者

文章目录策略模式使用策略模式计算奖金表单验证（多种校验规则）策略模式的优缺点策略模式定义：定义一系列的算法，把它们一个个封装起来，并且使它们之间可以相互替换将不变的部分和变化的部分分隔开是每个设计模式的主题，策略模式的目的就是将使用的算法和算法的实现分离开来使用策略模式计算奖金绩效为S的人奖金为4倍工资，A为3倍，B为2倍，要求提供一段代码，方便地计算每个员工的奖金//策略对象const strategies={ 'S':function(salary){ re

文章目录单例模式透明的单例模式用代理实现单例模式惰性单例单例模式核心：确保只有一个实例，并提供全局访问 （注意：全局变量不是单例模式）实现：用一个变量标志当前是否已经为某个类创建过对象，如果是，则在下次创建类实例的时候，直接返回之前创建的对象（用闭包缓存数据），若不是则通过new创建一个新的对象应用场景：登录框透明的单例模式需求：实现一个透明的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。为了把标志变量instance封装起来，此处使用自执行的匿名函数和闭包const

文章目录cookie和session的区别cookie，localStorage，sessionStorage的区别CSRF和XSS攻击及防范跨域问题浏览器的同源策略跨域解决方案跨域资源共享（CORS）通过JSONP跨域websocket协议跨域cookie和session的区别cookie数据存放在浏览器上，session存放在服务器上cookie一般在客户端有大小限制，一般为4K，session没有限制，但是考虑到服务器性能，一般不能存放太多数据cookie可以设置过期时间，否则一直有效，se

关于css和js是否会阻塞DOM解析和执行通常我们把script标签放在body尾部，link标签放在head头部，通过CDN引入第三方库时，放在link标签前面概括CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染JS会阻塞DOM解析CSS会阻塞JS的执行浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染Body内部的外链CSS较为特殊，会形成FOUC(样式闪烁)现象，请慎用

01-css盒模型box-sizing：padding-box（包含padding和content）、border-box（IE盒模型）、content-box（标准盒模型）CSS中盒模型分为IE盒模型和标准盒模型：二者主要区别是width的包含范围IE盒模型的width表示content+padding+border这三部分的宽度标准盒模型的width只是content部分的宽度02-BFC（块级格式化上下文）块级格式化上下文，是一个独立的渲染区域，并且有一定的渲染规则，约束

01-href和src的区别请求资源类型不同：href表示超文本引用，用来建立当前元素和文档之间的连接，如: link、a请求src资源时会将其指向的资源下载并应用到文档中，如script、img、iframe作用结果不同：href用于在当前文档和引用资源之间确立联系src用于替换当前内容浏览器解析方式不同：用href引入，浏览器会识别为css文件，会并行下载资源并且不会停止对当前文档的处理（因此建议css使用link加载）使用src，浏览器解析到src时会暂停其他资源的下载和处