面试题目总结，比较杂，记录用

• febook.hzfe.org/awesome-int…
• juejin.cn/post/728043…
• react.iamkasong.com/

url中的#!

www.ruanyifeng.com/blog/2011/0…

xml语法有哪些

xml是存储和传递数据的。

1. xml必须有一个根元素。

2. xml必须有关闭标签。

3. 对大小写敏感。

4. 必须正确嵌套。

5. 属性值必须加引号。

6. 注释与html相同。

7. 空格会保留。

8. 以LF存储换行。

9. 实体引用。
   在 XML 中，有 5 个预定义的实体引用：

注释： 在 XML 中，只有字符 "<" 和 "&" 确实是非法的。大于号是合法的，但是用实体引用来代替它是一个好习惯。

iframe

iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。

1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

2. UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..

3. 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

iframe怎么通信的

babel、loader是干啥的

Babel是一个JaveScript编译器。
Babel是一个工具链，主要用于将采用ECMAScript 2015+语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中
Babel通过语法转换器来支持新版本的JavaScript语法。

babel能干什么

• 语法转换

• 通过Polyfill方式在目标环境中添加缺失的功能（引入第三方polyfill模块，例如core-js）

• 源码转换（codemods）

• 等等

Babel能转换JSX语法

babel的包构成

1. 核心包

• babel-core: babel转译器本身，提供了babel的转译API，如babel,transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。

• babylon: js的词法解释器。

• babel-traverse: 用于对AST(抽象语法树)的遍历，主要给plugin用。

• babel-generator: 根据AST生成代码。

2. 功能包

• babel-types: 用于检验、构建和改变AST树的节点。

• babel-template: 辅助函数，用于从字符串形式的代码来构建AST树节点。

• bebal-plugin-xxx: babel转译过程中使用到的插件，其中babel-plugin-transform-xxx是transform步骤使用的。

• babel-preset-xxx: transform阶段使用到的一系列plugin。

• babel-polyfill: JS标准新增的原生对象和API的shim，实现上仅仅是core-js和regenerator-runtime两个包的封装。

• babel-runtime: 功能类似babel-polyfill，一般用于library和plugin中，因为它不会污染全局作用域。

3. 工具包

• babel-cli: babel的命令行工具，通过命令行对js代码进行转义。

• babel-register: 通过绑定mode.js的require来自动转义require引用的js代码文件。

babel的配置

1. 使用形式
   如果是以命令行方式使用babel，那么babel的设置就以命令行参数的形式带过去；还可以在package.json里在babel字段添加设置；
   但是建议还是使用一个单独的.babellrc文件，把babel的设置都放在这里，所有babel API的options(除了回调函数之外)都能够支持。

2. 常用options字段说明

• env: 指定在不同环境下使用的配置。比如production和development两个环境使用不同配置，就可以通过这个字段来配置。env字段的从process.env.BABEL_ENV获取，如果BABEL_ENV不存在，则从process.env.NODE_ENV获取，如果NODE_ENV还是不存在，则取默认值“development”。

• plugins: 要加载和使用的插件列表，插件名前的babel-plugin-可省略；plugin列表从头到尾的顺序运行。

• presets: 要加载和使用的preset列表，preset名前的babel-preset-可省略；presets列表的preset按从尾到头的逆序运行。

• 同时设置了presets和plugins，那么plugins的先运行；每个preset和plugin都可以再配置自己的option。

3. 配置文件的查找
   babel会从当前转译的文件所在目录先查找配置文件，如果没有找到，就顺着文档目录树一层层向上查找，直到.babelrc文件存在或者带babel字段的package.json文件存在为止。

babel的工作原理

babel是一个转译器，它只是把同种语言的高版本规则翻译成低版本规则，而不像编译器那样，输出的是另一种更低级的语言代码。

但是和编译器类似，babel的转译过程也分为三个阶段： paring、transforming、generating；
以es6代码转译为es5代码为例，babel转译的具体过程如下：

ES6代码输入 -> babylon进行解析 -> 得到AST -> plugin用babel-traverse对AST树进行遍历转译->用babel-generator通过AST树生成ES5代码

1. plugins

2. presets

3. polyfill

es6怎么转es5

babel:只转义新标准引入的语法，比如es6的箭头函数转为es5函数。
新标准引入的新的原生对象、部分原生对象新增的原型方法、新增的API等（如Proxy、Set等），这些babel是不会转义的，需要用户自行引入polyfill来解决。

项目里第三方页面是怎么嵌入的

微应用（qiankun）

简述一下map和set

1. Set

• Set是es6新增的数据结构，类似于数组，但成员的值都是唯一的，没有重复的值，我们一般称为集合。

• Set本身是一个构造函数，用来生成Set数据结构。

• Set的实例关于增删改查的方法：

add() 添加某个值，返回Set结构本身。当添加实例中已经存在的元素，set不会进行处理添加。s.add(1).add(2).add(2) // 2只被添加了一次

delete()  删除某个值，返回一个布尔值，表示删除成功。 s.delete(1)

has()  返回一个布尔值，判断该值是否为Set的成员。  s.has(2)

clear()  清除所有成员，没有返回值。  s.clear()

• 遍历

2. Map

xss攻击

• juejin.cn/post/722776…
• juejin.cn/post/714274…

左侧固定200px, 右侧自适应 es新特性

• juejin.cn/post/706032…
• juejin.cn/post/707328…

diff算法

• juejin.cn/post/722959…

• juejin.cn/post/713174…

react内部算法的一种重写，react虚拟dom本质是js对象，当状态发生变化时，对比差异，找出不同，进行渲染。

fiber

• www.51cto.com/article/722…
• www.jb51.net/article/274…
• juejin.cn/post/726125…
• juejin.cn/post/707754…

git cherry-pick

• 可以合并更改到新分支

两个独立网站怎么嵌入

• iframe或qiankun

echarts复杂的图表有写过吗

git stash

• 保存当前工作进度，把暂存区和工作区的改动保存起来；

defer和async

• js加载顺序，defer是延迟加载，等到

js中的reduce

• 根据需要累加、过滤、分组、映射等操作，是一个非常强大的数组方法。

css3

cookies,sessionStorage和localStorage的区别，是否受同源策略的限制

• github.com/js-cookie/j…
• juejin.cn/post/713497…
• juejin.cn/post/684490…

promise方法：异步编程的一种解决方案, 链式操作降低了编码难度，可读性增强

• promise对象仅有3个状态: pending（进行中）, fulfilled（已成功）, reject（已失败）

• 实例方法：then(), catch(), finally()

• 构造函数方法：.all(), .race(), .allSettled(), .resolve(), .reject(), .try()

ajax和fetch原理，怎么向后端传值

• juejin.cn/post/708348…

Ajax和Fetch都是用于在浏览器和服务器之间进行通信的技术，但它们的工作原理有所不同。

Ajax（Asynchronous JavaScript and XML）的原理是在用户和服务器之间添加一个中间层（AJAX引擎），通过XmlHttpRequest对象来向服务器发送异步请求，获取数据，并使用JavaScript来操作DOM来更新页面。这种方式可以使用户的操作与服务器响应异步化，即在不影响用户操作的情况下，网页可以更新其局部内容。

Fetch是一个现代的、功能更强大的浏览器内置函数，用于进行网络请求。Fetch请求返回的是一个Promise对象，这是Fetch API的一大特点。当发生网络故障或其他阻止请求完成的情况时，Promise通常会被拒绝。Fetch在默认情况下不会发送或接收任何cookies，如果站点依赖于维护用户会话，这可能会导致未经认证的请求。如果想要在同域中自动发送cookie，可以通过设置credentials的same-origin选项来实现。

总的来说，Ajax和Fetch各有优点和缺点，选择使用哪种技术主要取决于具体的应用需求和兼容性考虑。

BFC

BFC（Block Formatting Context）具有以下特性：

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算，float的值不为none。overflow的值不为visible。position的值不为relative和static。display的值为table-cell、table-caption、inline-block中的任何一个。

es6新特性

• let,const

• promise

• map,set

hooks原理

• juejin.cn/post/712384…
• juejin.cn/post/694486…

useCallback和useMemo的区别

• useCallback返回的是函数，而useMemo返回的是值

useEffect使用场景，如何减少useEffect

• 初始化和监听某个值的变化，当值改变的时候调用方法
  一些通用的逻辑可以放到同个useEffect里，或者可以自定义hook

为啥要用setState,而不是直接改变状态的值

• 因为要用数据的改变去触发视图的更新

react性能优化

• memo进行组件缓存

• useMemo缓存大量计算，只有依赖值改变时才去调用计算函数

• 图片使用webp格式

• 使用PureComponent,shouldComponentUpdate,前者会进行浅比较，如果是同个props则不会渲染组件，如果引用类型地址不同但值相同时也认为是有差异的，会渲染

• 避免使用内联对象

• 避免使用匿名函数

• 延迟加载不是立即需要的组件

• 调整css代替组件加载或卸载

• 使用React.Fragment避免添加额外DOM

类组件和hooks各有什么优缺点

• hooks保留了简组件语法，使得函数式组件有了状态管理和生命周期管理，在原来class组件的基础上解决了代码冗余、逻辑难以复用等问题。

• 可以将公共的状态提取出来进行封装

• 类组件的缺陷：super的传递、this指向、繁琐的生命周期

umi

组件通信方式

• 父子组件间：props和回调函数

• redux

• context

setTimeout为何会延迟执行

如何设置token

代码题

juejin.cn/post/694613…

zoom面经

www.nowcoder.com/discuss/380…

useEffect对应的是类组件的哪个生命周期函数

   componentDidMount, componentDidUpdate, componentWillUnmount
   处理副作用的函数，与渲染无关的操作，如数据获取、事件监听、动画等。
   第一个参数是回调函数，第二个是依赖项，当依赖项为空时，只会在渲染完之后调用一次，相当于componentDidMount; 当依赖项不为空时，会在依赖项改变的时候调用函数，相当于componentDidUpdate; useEffect中可以返回一个清除函数，如清除定时器、取消事件监听，相当于componentWillUnmount.

讲讲自己定义的 hooks ？

项目中遇到了哪些问题？ 如何解决的？

了解哪些 vue 的源码？ diff 算法了解过吗？ 现在有三个节点， abc，换了a b 的位置， 怎么更新？

响应式原理讲讲？

• 通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

js 基础数据类型和 引用数据类型的区别？

• string,number,boolean,bigInt,symbol,null,undefined

• object

• 存储的位置不同：基本数据类型存储在栈里，引用数据类型存储在栈里，指向堆里开辟的一块内存地址

讲讲两种数据类型的回收机制？ 有一个方法，里面有一个基础数据类型 a，还有用 const 定义的 b 对象，怎么回收?

• 引用计数和标记清除
  a = null

讲一讲闭包？特点？会有什么问题？怎么处理？

• 内部函数返回外部函数作用域外面的变量，可用于函数柯里化
  引起内存泄露

封装一个 防抖 的 hooks

vue 的组件通信？

一道力扣的easy算法

手写一个 bindX 的方法，那边发了题目和代码，要能实现它的一些功能

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

hooks，useMemo和useCallback

hooks本质是一个函数，而这个函数主要就是逻辑复用，hooks的驱动条件是什么？
是props的修改，useState、useReducer的使用是无状态组件更新的条件，从而驱动自定义hooks

• useMemo（处理无关的渲染）

1. 1. 当一个父组件调用了一个组件的时候，父组件的state发生变化，会导致父组件更新，而子组件虽然没有发生改变，但也会更新。
   2. 当一个页面内容非常复杂，模块非常多的时候，函数式组件会【从头更新到尾】，只要一处改变，所有的模块都会进行刷新，这种情况没有必要
   3. useMemo就是为了防止出现【只要父组件状态更新，无论有没有对子组件进行操作，子组件都会更新】
   4. memo的作用是【结合了pureComponent纯组件和componentShouldUpdate功能】，会对传入的props进行一次对比，然后根据第二个函数返回值来进一步判断哪些props需要更新。
   5. useMemo和memo理念上差不多，都是判断是否满足当前的限定条件来决定是否执行callback函数，而useMemeo的第二个参数就是一个数组，通过这个数组来判定是否更新回调函数。
   6. useMemo只在list发生变化的时候才会进行渲染，从而减少不必要开销

• • 可以减少不必要的循环和不必要的渲染

• • 可以减少子组件的渲染次数

• • 通过特地的依赖进行更新，可以避免很多不必要的开销，但要注意，有时候配合useState拿不到最新的值，这种情况可以考虑使用useRef解决

• useCallback

• • useCallback和useMemo及其类似，可以说是一模一样，唯一不同的是useMemo返回的是运行的【结果】，而useCallback返回的是【函数】

• • 注意：这个函数是父组件传递子组件的一个函数，防止做无关的刷新，其次，这个组件必须配合memo，否则【不但不会提升性能，还有可能降低性能】

• • 没有经过useCallback封装的函数会再次刷新，而经过useCallback包裹的函数不会被再次刷新

css盒模型

css的盒模型由content、padding、border、margin组成。但盒子的大小由content+padding+border组成，把margin算进去的那是盒子占据的位置，而不是盒子的大小。
我们在编写代码的时候应尽量使用标准的W3C模型（需在页面中声明DOCTYPE类型），这样可以避免多个浏览器对同一页面的不兼容。
如果不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒模型。FireFox等会将其解释为W3C盒子模型；若声明了，则所有浏览器都会把盒模型解释为W3C盒模型。

1. 标准盒模型
   宽高只包含content,不包含padding和border

2. IE盒模型
   宽高包含padding和border，指的是content+paddding+border

虚拟DOM

仅存于内存中的DOM，还未展示到页面中，所以称为VDOM。

diff算法

核心就是找到可复用的节点，剩下的旧节点删掉，新节点新增。

this.state是同步还是异步，两个state渲染机制

隐藏一个元素有几种方法

1. overflow:hidden 隐藏元素溢出的部分，占据空间，无法响应点击事件

2. opacity:0；  元素依然存在原来的位置，占据空间也可响应事件

3. visibility:hidden  占据空间，无法点击

4. display:none  彻底隐藏：不占空间，不影响布局也无法响应事件

5. position:absolute

6. clip(clip-path):rect()/inset()/polygon()

7. z-index:-1000  不占据空间，无法点击

8. transform:scaleY(0) 占据空间，无法点击

typeof和instanceof的区别

1. typeof是一个一元运算符，放在一个运算数前面，这个运算数可以是任何类型。它返回一个字符串，说明运算数的类型。它只能判断原始数据类型和函数，无法精准判断出引用数据类型。（都返回object）

2. instanceof运算符返回一个布尔值，检测构造函数的protoType属性是否出现在某个实例对象的原型链上，（判断某个实例是否属于某构造器函数）（只要右边变量的prototype在左边变量的原型链上就返回true，否则返回false）

3. 区别：

• typeof会返回一个运算数的基本类型，instanceof返回的是布尔值

• instaneof可以准确判断引用数据类型，但不能正确判断原始数据类型

• typeof可以判断原始数据类型（null除外），但无法判断引用数据类型（function除外）

前端代码的三种设计模式

1. 组件模式

2. 组合模式

3. Membrane模式

函数式组件父向子传值

父->子：通过props传值
子->父：事件
context
redux

如何避免一个组件被重复渲染

style-loader是干嘛的

polyfill

css3选择器

如何改变this指向

1. 在浏览器里，在全局范围内 this 指向 window 对象；

2. 在函数中，this 永远指向最后调用他的那个对象；

3. 构造函数中，this 指向 new 出来的那个新的对象；

4. call、apply、bind 中的 this 被强绑定在指定的那个对象上；

5. 箭头函数中 this 比较特殊, 箭头函数 this 为父作用域的 this，不是调用时的 this. 要知道前四种方式, 都是调用时确定, 也就是动态的, 而箭头函数的 this 指向是静态的, 声明的时候就确定了下来；

6. apply、call、bind 都是 js 给函数内置的一些 API，调用他们可以为函数指定 this 的执行, 同时也可以传参。

为啥不用jq，而用react

父子组件传值，更复杂的传值

• 父->子：通过props传值

• 子->父：事件

• context

• redux

内存泄露（某块内存虽然不再使用，但是无法释放）

内存管理机制的主要任务是：区分变量使用情况，并周期性清除无用变量。

• 哪些操作会引发内存泄露

• • 减少组件DOM渲染

• • window上的监听事件没有移除或移除错误

• • console导致的内存泄露

• • 闭包的错误使用

• • 绑在EventBus的事件没有解绑

• • 弱引用：weakset,weakmap

• 怎样避免

1. 数据懒加载、组件懒加载、虚拟滚动、数据分页等方式，来减少组件的 DOM 渲染

2. 在 window 上添加的监听事件，在页面卸载时要主动移除，并注意移除的正确性

3. 只有devtools打开时，console打印才会引起内存泄露，如果不打开控制台，console是不会引起内存泄露的，生产环境使用插件过滤console

• 事件卸载在生命周期的哪个方法里进行

前端性能优化

juejin.cn/post/721402…

1. xml和html语法的区别

xml可以存储和传输数据

3. setState和useState的区别

4. redux、mobx和react-redux的区别

redux不受框架的限制，

6. 线上崩了，如何排查g

7. 一个项目开始要怎么安排

8. 主题色配置如何做
   写一个配置文件，用户选择主题色之后，将参数传过去，全局更改组件的颜色

9. 一个图表中如何融合多种类型

高阶组件
发布订阅模式
函数柯里化

一、你如何理解闭包的?

当一个内部函数被其外部函数之外的变量引用时, 就形成了一个闭包.

什么情况下会用到闭包：

• 创建私有变量

• 可以延长变量的生命周期。eg:可以判断一个字符串是否在数组里。

1.函数柯里化，频繁调用同一个参数，同时又能轻松复用

code.juejin.cn/api/raw/723…

2.for循环

code.juejin.cn/api/raw/723…

二、原型、原型链

• 当我们创建一个函数时, 函数都会有一个默认属性prototype, 该属性指向一个对象, 该对象就被称之为原型对象

• 所有非空数据都可以通过__proto__指向 原型对象,如果原型对象非空, 那么必然会有__proto__ 指向它自己的原型对象, 如此一层层往上追溯, 以此类推, 就形成了一整条链路, 一直到某个原型对象为null, 才到达最后一个链路的最后环节, 原型对象之间这种链路关系被称之为原型链

三、常用继承方案有哪些？

何为继承：一个类获取另一个或多个类的属性或者方法。继承可以使得子类具有父类的各种方法和属性，以免重复输入很多代码。

继承的原理：复制父类的方法和属性来重写子类的原型对象。
https://juejin.cn/post/6844904013096288269

• 原型链继承

• 构造函数继承

• 组合继承

• 原型式继承

• 寄生式继承

• 寄生组合式继承

• 混入方式集成多个对象

• es6类继承extends

四、New 运算符做了哪些事情?

• 创建一个新的空对象

• 把新对象的原型绑定到构造函数的原型上

• 构造函数被执行，执行过程中的this被绑定在新的对象上

• 返回这个新的对象（构造函数中一般不会显式返回，但有时也可以return this）

五、事件循环?

JS 主线程不断的循环往复的从任务队列中读取任务， 执行任务，这种运行机制称为事件循环。

六、变量回收机制?

执行环境会找出那些不再继续使用的变量，然后释放其占用的内存。

每隔一个周期就执行一次垃圾回收。（引用计数和标记清除法）

尽量少用全局变量
尽可能手动清除变量的引用

七、 常见的数据类型有哪些?

vue3js.cn/interview/J…

• Null(空)

• Nudefined(未定义)

• Number(数字)

• String(字符串)

• Object(对象)

• Boolean(布尔值)

• Symbol(符号)

• BigInt(任意大整数)

八、let、const、var 的区别?

标题	let	var	const
变量提升	无	有	无
作用域	块级作用域	全局作用域或函数作用域	块级作用域
重复声明	不可	可以	不可
初始值设置	可以不设置	可以不设置	必须设置
指针指向	可以更改	可以更改	不可更改
全局添加属性	-	在全局作用域声明的变量会挂载在window对象上	-

九、apply、call、bind 的区别?

标题	call	apply	bind
接收参数	非数组	数组	非数组
执行时机	立即执行	立即执行	不立即执行，返回的是一个函数

手写bind:
juejin.cn/post/706338…

十、宏任务、微任务？

juejin.cn/post/684490…
浏览器的事件循环中分为宏任务和微任务。JS中任务分为同步任务和异步任务。

宏任务和微任务皆为异步任务，它们都属于一个队列，主要区别在于它们的执行顺序，Event Loop的走向和取值。

宏任务：整体代码scripts,setTimeout,setInterval,setImmediate。

微任务：原生Promise(有些实现的Promise将then方法放到了宏任务中)、async/await、process.nextTice、Object.observe(已废弃)、MutationObserver。

微任务的引入是为了解决异步回调的问题，假设只有宏任务，那么每一个宏任务执行完后回调函数也加入宏任务队列，就会导致任务队列过长，回调时间变长，会造成页面卡顿，所以引入了微任务。

两个完全独立的系统进行嵌套, 里面那个页面需要登录, 如何让内部系统不需要登录和外面共用用户登录信息? (单点登录)

vue3js.cn/interview/J…

1. 是什么：

用户登录信息存在哪里? localStorage  sessionStorage cookie 之前的区别, 如何选择?

vue3js.cn/interview/J…

• cookie存储的数据量较小，只有4kb，会自动向服务器传递数据，服务端也可以写cookie到客户端.cookie设置的cookie过期时间之前一直有效，即使浏览器或窗口关闭。

• localStorage和sessionStorage存储的数据量有5M左右，只是本地存储，不会向服务端发送。

• 同一域名下的localStorage是可以共享的。

• sessionStorage页面关闭后就清除了，localStorage需要手动清除。

主题色配置是怎么做的?

• 你们做了哪些事?

• 如何没有这个组件库, 你会怎么设计主题切换这个功能?

• • CSS 变量

• • less 有对应主题切换的方案的

• • sass

有没做过 Echarts 复杂图表

webpack 配置

vue3js.cn/interview/w…

提升构建速度：

• 优化 loader 配置，通过配置include、exclude、test属性来匹配文件

• 合理使用 resolve.extensions，解析到文件时自动添加扩展名

• 优化 resolve.modules，指明存放第三方模块的绝对路径以减少寻找

• 优化 resolve.alias，减少查找过程

• 使用 DLLPlugin 插件

• 使用 cache-loader

• terser 启动多线程

• 合理使用 sourceMap

媒体查询

vue3js.cn/interview/c…

headers要传什么参数

请求把用fetch方法封装的，请求的地址、是否需要缓存等参数

hooks

hooks能够更容易解决状态相关的重用的问题：

• 每调用useHook一次都会生成一份独立的状态

• 通过自定义hook能够更好的封装我们的功能

编写hooks为函数式编程，每个功能都包裹在函数中，整体风格更清爽，更优雅

hooks的出现，使函数组件的功能得到了扩充，拥有了类组件相似的功能，在我们日常使用中，使用hooks能够解决大多数问题，并且还拥有代码复用机制，因此优先考虑hooks

1. useState
   初始化状态，接收一个参数，返回一个数组，数组的第一个元素是状态，第二个元素是改变这个状态的方法。这个方法可以return一个函数，在这个函数内部可以做一些卸载的操作。在函数组件中通过useState实现函数内部维护state，参数为state默认的值，返回值是一个数组，第一个值为当前的state，第二个值为更新state的函数

2. useCallback
   有两个参数，第一个是函数，第二个是数组，数组内是依赖项。当依赖项改变时，会更新这个函数。

3. useMemo

4. useEffect
   当页面渲染的时候会调用这个函数，依赖项改变的时候也会触发这个函数的执行，可以让我们在函数组件中进行一些带有副作用的操作。

5. useRedux

6. useContext

7. useRef
   ref可以获取dom节点。有三种方式：传入字符串；传入对象；传入函数；（hooks中使用useRef）

REACT高频面试题

• • react合成事件是什么

• • react的事件机制

• • react怎么处理异常：Error Boundary

• • react怎么做事件代理，原理是什么：基于vdom实现了一个合成层，进行事件处理和分发。一是通过事件委派，react会把所有事件绑定到document上去，统一监听和处理；二是自动绑定，react中上下文都会指向组件这个实例，会自动绑定this或当前组件。

• • 高阶组件、props、hooks有什么区别：都是为了解决代码复用的问题。高阶组件就是代码复用的的高级的形式，接受一个组件、函数，返回一个新的组件；props做组件之间值为函数的props共享；hooks可以在不编写class的情况下使用state以及其他的一种react特性。hooks解决了高阶函数和props的覆盖问题和回调地狱问题，使用更加直观，数据共享更好。为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如：

• 难以重用和共享组件中的与状态相关的逻辑

• 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面

• 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题

• 由于业务变动，函数组件不得不改为类组件等等

在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作

因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理 6. -  react解决代码复用做了哪些努力 7. -  为啥推出fiber 8. -  fiber动态优先级：给每个任务加一个权重值 9. -  fiber里渲染任务可中断，是怎么实现的： 10. -  使用fiber进行任务控制，会让出控制权，让浏览器去处理，为什么不用setTimeout来做：会造成延迟或掉帧的情况 11. -  message channel:模拟requestidcallback 12. -  fiber是一种什么数据结构：双向链表。可以方便的插入和删除元素 13. -  fiber怎么实现动画支持 14. -  哪些方法会触发react重新渲染：setState\父组件重新渲染 15. -  怎么避免重复渲染：memo:对props进行前比较；useMemo；useCallback 16. -  react中fregement 17. -  react获取组件的dom元素：ref或原生的方式 18. -  context的理解：用于跨级组件数据通信，将父组件 19. -  执行setState，浏览器做了什么事 20. -  setState是同步还是异步？react可以控制的，生命周期或者合成事件是异步的；无法控制的地方，原生事件是同步的。 21. -  setState第二个参数是干什么的？可选的回调函数，会在组件重新渲染之后运行 22. -  props传入的数据类型怎么校验？propsTypes 23. -  react-router的实现原理：哈希模式、memory 24. -  redux的原理和工作流程： 25. -  redux中的异步请求： 26. -  mobx和redux在storage的区别，按照模块进行划分 27. -  useState为什么用数组不用对象：降低使用复杂度，解构赋值 28. -  hooks解决了哪些问题：组件之间复用组件\状态逻辑，class 29. -  hooks使用限制：内部函数中不能使用、条件判断中使用、不能在hooks中使用 30. -  useEffect实现原理： 31. -  react懒加载实现原理：通过es6import方法实现，会提取为单独chunk 32. -  虚拟dom遍历的时候的key是用来干嘛的，可以用index吗 33. -  对虚拟dom的理解，是什么，怎么描述的，怎么性能优化的 34. -  creactElement 35. -  react必须使用jsx吗： 36. -  react高阶组件用了什么设计模式 37. -  装饰器

http与https

http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。 http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。 http的连接很简单,是无状态的。 HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全。

怎样比较两个对象相等|props更新部分

react和echarts版本

网络五层，https属于哪层

http属于应用层

1. OSI七层模型

• • 国际标准化ISO定的一个用于计算机或通信系统间互联的标准体系，协议将计算机网络体系划分为七层。每一层实现各自的功能和协议，并完成与相邻层的接口通信，每一层提供的服务就是该层及其以下层的协作完成的。

层级	OSI模型	解释
1	物理层	建立、维护、断开传输二进制数据的物理连接
2	数据链路层	提供介质访问和链路管理
3	网络层	进行逻辑地址寻址，实现不同网络之间的路径选择
4	传输层	定义传输数据的协议端口号，以及流控和差错校验
5	会话层	不同机器之间建立、管理、终止会话
6	表示层	数据的格式化、转换、加密
7	应用层	网络服务与最终用户的一个接口

2. TCP/IP四层模型和五层协议模型

• • 实际上TCP/IP是四层模型，但是后来为了网络原理的理解方便，把七层模型和四层模型综合了一下，就出来了一个五层模型，五层模型只是将四层模型中的网络接口层分成了两层数据链路层和物理层。

层级	TCP/IP模型	解释
1	网络接口层	负责监视数据在主机和网络之间的交换
2	网络层	主要解决主机到主机的通信问题
3	传输层	为实用层实体提供端到端的通信功能，保证了数据包的顺序传送以及数据的完整性
4	应用层	为用户提供所需要的各种服务

3. 三种模型的类比

TCP/IP四层模型	五层模型	OSI模型
应用层	应用层	应用层
应用层	应用层	表示层
应用层	应用层	会话层
传输层	传输层	传输层
网络层	网络层	网络层
网络接口层	数据链路层	数据链路层
网络接口层	物理层	物理层

4. 相同点

• • OSI和TCP/IP都采用了层次结构的概念

• • 都能够提供面向连接和无连接两种通信服务机制

5. 不同点

• • TCP/IP参考模型的网络接口层实际上并没有真正的含义，只是一些概念性的描述。而OSI参考模型不仅分了两层，而且每一层的功能都很详尽。

• • OSI模型是在协议开发前设计的，具有通用性。TCP/IP是现有协议集然后建立模型，不适用于非TCP/IP网络。