【无标题】

JS

js的几种数据类型

number、string、boolean、null、undefined、symbol (ES6)：主要用于创建一个独一无二的标识、bigint (ES10)是一个内置对象，它提供了表示大于最大安全整数之外的方法, bigint 通常用于计算最大安全整数之外的数值
引用数据类型：Object（function、array）

BFC

格式化上下文，一个独立的块级渲染区域，区域里面的元素不会在布局上影响到外面的元素；
触发条件：
body根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
BFC 应用
解决margin叠加问题，上下重叠，给其中一个盒子添加父元素
两栏布局，第一个盒子浮动，第二个盒子margin-left赋值
清除浮动

防抖和节流

防抖（多次触发只执⾏最后⼀次）
作⽤： ⾼频率触发的事件,在指定的单位时间内，只响应最后⼀次，如果在指定的时间内再次触发，则重新计算时间
节流（规定时间内只触发⼀次）
作⽤： ⾼频率触发的事件,在指定的单位时间内，只响应第⼀次

原型链 && js原型继承的几种方法

原型：
①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype
原型链：
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。如果Object的原型上还没有，那就不找了，返回undefined。所有实例通过prototype.__proto__一直向上找 ，最后都会指向Object.prototype，可以理解成所有对象都是Object的实例，而Object.prototype.proto 是null。
继承：
1、原型继承：创建一个构造函数，并为其设置私有属性和公有属性。
2、原型链继承：将父类实例赋值给子类原型对象
3、构造继承：通过使用call、apply方法可以在新创建的对象上执行构造函数,用父类的构造函数来增加子类的实例
4、组合继承：构造继承与原型继承组合。
5、克隆原型链继承：将等待继承的原型对象克隆，再赋值给继承的原型对象
6、class继承：使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super

React：

setState

1.setState调用后并不是立即执行，需要走完react的生命周期，到render的时候，state的值才改变
2、在setTimeout中调用setState，表现为同步，会在下一次宏任务中执行，

• 1.直接传递对象的setstate会被合并成一次
• 2.使用函数传递state不会被合并
  由执行机制看，setState本身并不是异步的，而是如果在调用setState时，如果react正处于更新过程，当前更新会被暂存，等上一次更新执行后在执行，这个过程给人一种异步的假象
  setState并不是立马更新,他会将所有需要更新的state放到待更新事件中，最顶层的组件didmount 后执行再执行累积的setState

setState()的参数接收

setState()可以接收一个对象外，还可以接收一个函数。
传递对象:
批处理，对相同变量进行的多次处理会合并为一个，并以最后一次的处理结果为准
传递函数:
链式调用，React 会把我们更新 state 的函数加入到一个队列里面，然后，按照函数的顺序依次调用。
同时，为每个函数传入 state 的前一个状态，这样，就能更合理的来更新我们的 state 了,该函数有两个参数：prevState props

useState ：

1、接受一个参数作为初始化值
2、返回一个数组，数组的第一个值为最新的状态 count，第二个值为一个函数用于修改状态 setCount
3、setCount 设置后需要触发重新渲染

react性能优化

1、ShouldComponentUpdate 组件接受到新属性或新状态时执行该钩子函数，可返回false ，阻止render调用
2、使用生产版本的react.js
3、使用key帮助react 识别子组件最小变化
4、PureComponent 必须用 class 组件，浅比较，PureComponent自带通过props和state的浅对比来实现 shouldComponentUpate()，而Component没有。

webpack性能优化：

1、加快webpack打包速度;优化loader** ：
a、优化loader文件的搜索范围
(主要通过配置test、include、exclude、等字段）
b、在一些性能开销较大的loder之前添加cache-loader，将结果缓存到磁盘中。
默认保存在node_modules/.cache/cache-loader
2、减小webpack打包后的文件体积；代码压缩：Webpack 默认使用的是 TerserWebpackPlugin，默认开启了多进程和缓存，构建时，项目中可以看到 terser 的缓存文件 node_modules/.cache/terser-webpack-plugin。抽离公共组件：主要是配置 optimazation.splitChunks

webpack处理js兼容性问题

1、使用插件：babel-loader @babel/core @babel/preset-env
缺点：只能处理基本的js兼容性问题，Promise等高级语法就不能转换
2、使用插件：@babel/polyfill （安装后导入即可）
缺点：这个插件会将所有的兼容性代码全部引入，会导致打包后文件体积变大