目录
React
特性
- 组件设计,声明式,函数编程
- jsx,虚拟DOM(diff算法最小化BOM操作),单向数据绑定
生命周期
useEffect
useEffect模拟三个生命周期 (挂载, 更新, 卸载前)
- componentDidMount
- componentDidUpdate
- componentWillUnmount
router传参方式
- 路由参数
<Route path="/users/:userId"} />
与let { userId } = useParams();
- 查询参数
<Link to="/users?userId=123" />
与
let searchParams = new URLSearchParams(location.search); let userId = searchParams.get('userId');
- state
<Link to={{ pathname: '/users', state: { userId: 123 } }}/ >
与let { userId } = location.state;
这种方式通常用于向下一个路由传递一些数据,但不在URL中暴露。
注意点
- react18之前在生命周期函数和合成事件中表现为异步,在原生事件中表现为同步。 在react18优化批处理之后,在任何地方调用setState都会批处理,因此都表现为异步。
HTTP请求
- fetch,原生API,
- axios,更方便,基于ajax
状态码
- 2xx - 成功状态码
- 3xx - 重定向状态码
- 4xx - 客户端错误状态码
- 400 Bad Request: 服务器无法处理请求,通常是因为请求格式有误。
- 401 Unauthorized: 请求需要用户认证。
- 403 Forbidden: 服务器拒绝请求,权限不足。
- 404 Not Found: 未找到请求的资源。
- 500 服务器错误状态码
HTML
行内元素
- a img picture span input textarea select label
语义化
H5新特性
HTML5最新版本。例如语义化标签(如 <header>, <footer>, <article>
等)、新的表单输入类型、音视频支持、Canvas绘图等。
cookie,session,token
- cookie存储在浏览器中。
- session存储在服务器而不是用户浏览器中,安全性更高
- token是用于身份验证和授权的令牌
cookie sessionStorage localStorage 联系区别
1.都是浏览器存储 2.都存储在浏览器本地
区别:
1.cookie由服务器写入, sessionStorage以及localStorage都是由前端写入
2.cookie的生命周期由服务器端写入时就设置好的,localStorage是写入就一直存在,除非手动清除,sessionStorage是由页面关闭时自动清除
3.cookie存储空间大小约4kb, sessionStorage及localStorage空间比较大,大约5M
4.数据共享都遵循同源原则,sessionStorage还限制必须是同一个页面
5.前端给后端发送请求时,自动携带cookie, session 及 local都不携带
6.cookie一般存储登录验证信息或者token,localStorage常用于存储不易变动的数据,减轻服务器压力,sessionStorage可以用来监测用户是否是刷新进入页面,如音乐播放器恢复进度条功能
前端性能优化
- 文件加载:图片压缩,精灵图
- 渲染:避免无用渲染:懒加载 ,减少渲染次数
XSS
- 跨站脚本攻击,攻击者可以通过向Web页面里面插入script代码,当用户浏览这个页面时,就会运行被插入的script代码,达到攻击者的目的
- 危害:泄露用户的登录信息cookie ;恶意跳转:直接在页面中插入window.location.href进行跳转
CSRF
1.概念:跨域请求伪造。
2.原理:诱导用户跳转到新的页面,利用 服务器的验证漏洞 和 用户之前的登入状态,来模拟用户进行操作。
3.防范:利用cookie的sameSize属性规定其他网站不能使用本网站的cookie。或者使用token验证,再去验证用户身份。
BEM命名规范
bolck-element–modifier
例如nav-header btn--error
对特殊的样式,不应该直接修改基础样式,而应该加一个class修饰。
JS
判断变量的类型
- typeof 但无法区分 null 和 object 类型
- instanceof ,不能判断字面量!
let str = new String('Hello');
console.log(str instanceof String); // 返回 true
let num = new Number(10);
console.log(num instanceof Number); // 返回 true
let bool = new Boolean(true);
console.log(bool instanceof Boolean); // 返回 true
// 但是...
console.log('Hello' instanceof String); // 返回 false(因为字符串字面量不是 String 对象的实例)
console.log(10 instanceof Number); // 返回 false(因为数字字面量不是 Number 对象的实例)
console.log(true instanceof Boolean); // 返回 false(因为布尔值字面量不是 Boolean 对象的实例)
- Object.prototype.toString
作用域链
输出小红,就近原则
事件委托
事件委托又叫事件代理,是一种在父元素上监听事件,然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托,可以避免为每个子元素都绑定事件处理程序,提高性能并简化代码。例子:list绑定事件,而不是每个li元素绑定事件
闭包
闭包即是方法里返回一个方法
let counter=makecounter()//返回一个对象
counter.add() couter.value()
闭包形成的原理:作用域链,当前作用域可以访问上级作用域中的变量
闭包解决的问题:能够让函数作用域中的变量在函数执行结束之后不被销毁,同时也能在函数外部可以访问函数内部的局部变量。
闭包带来的问题:由于垃圾回收器不会将闭包中变量销毁,于是就造成了内存泄露,内存泄露积累多了就容易导致内存溢出。 加分回答
闭包的应用,能够模仿块级作用域,能够实现柯里化,在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。
ES6新特性
- 箭头函数
- let/const
- 模版字符串
- 解构赋值 {a}={a:1,b:2}
- Array.from()将类数组转为数组,例如"abc"—>[a,b,c]
- 基本类型Symbol
节流和防抖
防抖:将多个操作变成一次 。例子:输入框中输入一个调用一次,导致太频繁会产生抖动
节流:一定时间内只调用一次 例子:点击提交多次,只提交一次
二者都用到了闭包的思想
Promise
- 处理异步操作
- 解决地狱回调问题问题
Promise 实例具有链式调用的特点,可以通过 then()方法进行链式调用,将多个异步操作连接起来,实现更复杂的异步控制流程。
同时,Promise 提供了 catch() 方法用于捕获Promise 链中任何一个 Promise 的 reject 状态,
以及,finally() 方法用于在 Promise链的最后添加处理逻辑,不管 Promise 是成功还是失败都会执行。
遍历Map方法
- of方法
for (let [key, value] of myMap)
CSS
盒模型
CSS盒模型由内容区域、内边距、边框和外边距组成
分为两种:标准盒模型(默认)、怪异盒模型
标准盒模型在设置width和height时设置的是content的大小, 不包括padding,margin。
怪异盒模型在设置width和height时设置的是盒子的大小, 包括padding,margin。
样式优先级
!important > 内联样式(style) > ID选择器(id) > 类选择器(class) > 标签选择器
CSS尺寸设置的单位
px、rem、em、vw、vh
- em它是描述相对于父元素的字体尺寸,所以它也是相对长度单位。
- rem是相对于应用在根元素的字体尺寸。一般浏览器字体大小默认为16px,则2rem == 32px;
BFC
块级格式化上下文
浮动
浮动盒子可以向左、右移动,直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离文档流,所以文档流中的元素几乎认为浮动盒子不存在。
清除浮动的方法:
- 下一个兄弟元素设置属性clear: both; both代表l,r
- 父元素设置overflow:hidden,触发BFC
权重
- !important
- 内联样式
- ID 选择器
- 类选择器、属性选择器(type=‘int’)、伪类选择器(a:hover)
- 元素选择器,标签
background-image
div背景图片根据字内容铺满
- background: url(https://images.jdycdn.com/) 0% 0% / 100% 100%;
- background-size: contain
background-repeat: no-repeat;
background-position: center;