简介篇
自我简介:
面试官您好，我叫 xx，来自于 xx，目前在 it 行业已有 4 年经验，其中后端经验 1 年，前端经验 3 年，在项目中担任项目组长一职， 其职责主要有 2，其一是承担项目的开发任务，按计划分配小组任务目标，其次就是培养新人达到胜任工作水平；在此期间主要主导过 4 个项目，分别是星福生活管理平台兼星福生活 H5 开发，每车 U 货司机货主端 app 及管理平台，wms 仓库管理系统，及叽喳智慧社区,并带领团队参与过小程序的开发，看了一下贵公司这边的技术选型，很符合我这边的技术发展方向，希望能够得到这次工作机会，谢谢。
一、Es6 新特性
1.let:块级作用域
2.const:常量
3，箭头函数
4.模板字符串
二、 promise 作用
promise：解决回调地狱问题，可用于异步处理（then, catch）
三、 常见数组方法
for in ,for of ,forEach,map,filter,find 等等
四、 什么是闭包，闭包的负面影响
闭包：内部函数能够访问到外部函数的局部变量，优点其一，存在私有化空间，避免了全局变量的污染，其二，持久化内存，缺点就是由于闭包会持久化内存，闭包过度使用，会造成内存泄漏
五、 什么是跨域？什么是不跨域？
一句话：同一个 ip、同一个网络协议、同一个端口，三者都满足就是同一个域，否则就是跨域问题了。而为什么开发者最初不直接定为一切可跨域的呢？默认的为什么都是不可跨域呢？这就涉及到了同源策略，为了系统的安全，由 Netscape 提出一个著名的安全策略。现在所有支持 JavaScript 的浏览器都会使用这个策略。
所谓同源是，域名，协议，端口相同。当我们在浏览器中打开百度和谷歌两个网站时，百度浏览器在执行一个脚本的
时候会检查这个脚本属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行，如果没有同源策略，那
随便的向百度中注入一个 js 脚本，弹个恶意广告，通过 js 窃取信息，这就很不安全了
六、 跨域解决方法
使用 jsonp:用于实现跨域问题
代理
cors
七、get 和 post 区别
（1）、安全性不同：get 安全性低，数据会出现 url 中，post 的所有操作对用户来说都是不可见的。
（2）、编码方式不同:，get 只能对 url 编码，而 post 支持多种编码方式
（3）、传输大小不同：Get 传送的数据量较小，这主要是因为受 URL 长度限制；Post 传送的数据量较大，一般被默认为不受限制。
（4）、执行效率不同：Get 执行效率却比 Post 方法好。Get 是 form 提交的默认方法。
八、网页性能优化方案
（1）代码优化
a:js 代码模块化，公共方法提取
b:script 标签尽可能写在 body 下面
（2）：http 请求优化
尽可能减少 http 重复请求次数
九、什么是 Typescript
Typescript 是 JavaScript 的超集， 是一种面向对象编程语言,强类型语言，你可以明确知道数据的类型。代码可读性极强
十、react 介绍
是什么：是构建用户界面的 js 库
优点：组件化编码，声明式开发，虚拟 Dom 及优秀的 diff 算法jsx:类似 xml 的 js 扩展语法，是原始创建虚拟 Dom 的语法糖
key 作用;主要是判断两个节点是否相同，相同就复用，不同就删除创建新节点
十一、React 生命周期的三个大阶段
1.Mounting: 挂载阶段。(已插入真实 DOM)
2.Updation: 更新阶段。(正在被重新渲染)
3.Unmounting: 销毁阶段(已移出真实 DOM)
十一、React 生命周期新旧生命周期(补充)
旧：
- 初始化阶段: 由 ReactDOM.render()触发—初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息- 更新阶段: 由组件内部 this.setSate()或父组件 render 触发
1. componentWillReceiveProps() //子组件将要接收新的props的钩子
2. shouldComponentUpdate() //控制组件更新的“阀门”
3. componentWillUpdate()
4. render() =====> 必须使用的一个
5. componentDidUpdate()
- 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息新：
- 初始化阶段: 由 ReactDOM.render()触发—初次渲染
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息- 更新阶段: 由组件内部 this.setSate()或父组件重新 render 触发
1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()- 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息新的和旧的生命周期来看，去除了 3 个带 will 的钩子，添加了两个钩子
去除了 3 个钩子为
1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()添加的两个钩子为
1. getDerivedStateFromProps() //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
2. cgetSnapshotBeforeUpdate() //在更新之前获取快照
十二、React 常用钩子
数据接收 实现继承 super(props) :constructor
渲染组件 和 html 标签：render
组件将要挂载时触发的函数：componentWillMount
组件挂载完成时触发的函数：componentDidMount
是否要更新数据时触发的函数（检测组件内的变化 可以用作页面性能的优化(默认值为 true)）：shouldComponentUpdate
十三、redux
是什么：redux 是一个专门用于状态管理的 js 库（本质就是一个 js 库）
作用：集中式状态管理，在 react 中用于多个组件共享状态
三个核心：action (动作对象) ，store,
reducer流程（白话）：比如要开发一个计算器功能，那么我就定义一个 Count 组件，然后我现在需求要加 2，那么我就把这个需求交给动作对象 action,随后动作对象 action 分发 dispatch,dispatch 就是一个普通对象，包含两个属性，一个 type,一个 data.type 用于标识你要做的事情（这里是“加”），data 是数据属性（这里是“2”），得到这个对象后，随后传递给 store,这个时候 store 需要一个 api 创建，也就是 creatStore(),创建好 store 后，立马传递给 reducer,reducer 是一个纯函数，接受两个参数，一个是之前的状态值，一个是动作对象，reducer 加工后返回一个新的状态值给 store,Count 通过另一个 api,getState()来拿到此时存在 store 的新的状态值
角色理解：Count 就相当于（客人），客人吃饭点菜找 action(服务员)，服务员将客人点菜信息给 store（前台）,前台将点菜信息立马给 reducer（后厨），后厨把加工好的菜给前台，前台报编号，客人来取菜
十四、hooks 是什么？
简单介绍下什么是 hooks，hooks 产生的背景？hooks 的优点？
hooks 是针对在使用 react 时存在以下问题而产生的：
组件之间复用状态逻辑很难，在 hooks 之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。
组件逻辑变得越来越复杂，尤其是生命周期函数中常常包含一些不相关的逻辑，完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
复杂的 class 组件，使用 class 组件，需要理解 JavaScript 中 this 的工作方式，不能忘记绑定事件处理器等操作，代码复杂且冗余。除此之外，class 组件也会让一些 react 优化措施失效。
针对上面提到的问题，react 团队研发了 hooks，它主要有两方面作用：
用于在函数组件中引入状态管理和生命周期方法
取代高阶组件和 render props 来实现抽象和可重用性
优点也很明显：
避免在被广泛使用的函数组件在后期迭代过程中，需要承担一些副作用，而必须重构成类组件，它帮助函数组件引入状态管理和生命周期方法。
Hooks 出现之后，我们将复用逻辑提取到组件顶层，而不是强行提升到父组件中。这样就能够避免 HOC 和 Render Props 带来的「嵌套地域」
避免上面陈述的 class 组件带来的那些问题
十五、介绍下常用的 hooks？
// 我们实现一个简易版的useState
let memoizedStates = []; // 多个useState 时需要使用数组来存
let index = 0;
function useState(initialState) {
memoizedStates[index] = memoizedStates[index] || initialState;
let currentIndex = index;
function setState(newState) {
memoizedStates[currentIndex] = newState;
render();
}
return [memoizedStates[index++], setState];
}useState()，状态钩子。为函数组建提供内部状态
useContext()，共享钩子。该钩子的作用是，在组件之间共享状态。 可以解决 react 逐层通过 Porps 传递数据，它接受 React.
createContext()的返回结果作为参数，使用 useContext 将不再需要 Provider 和 Consumer。
useReducer()，Action 钩子。useReducer() 提供了状态管理，其基本原理是通过用户在页面中发起 action, 从而通过 reducer 方法来改变 state, 从而实现页面和状态的通信。使用很像 redux
useEffect()，副作用钩子。它接收两个参数， 第一个是进行的异步操作， 第二个是数组，用来给出 Effect 的依赖项
useRef()，获取组件的实例；渲染周期之间共享数据的存储(state 不能存储跨渲染周期的数据，因为 state 的保存会触发组件重渲染）
useRef 传入一个参数 initValue，并创建一个对象{ current: initValue }给函数组件使用，在整个生命周期中该对象保持不变。
