前端面试题

1.REACT函数组件和类组件区别

1.函数组件是无状态组件，相比类组件无法使用许多特性，例如生命周期钩子、状态state等，随着hooks出现，类组件也同样可以实现相应的功能

2.函数组件中没有this。所以你再也不需要考虑this。

3.函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可

2.React 复用组件的状态和增强功能的方法（HOC、render props）

HOC
HOC是 react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个 React API 。
具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。
对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。
render props
render props 组件接收一个函数，该函数会调用另一个组件而不是直接渲染， 有一点我们需要注意，一般一个组件调用另一个组件，是将被调用的组件渲染到该组件中，然后进行硬编码，而render props是接收函数，直接调用函数，其函数输出结果作为 props 传入主组件。
当然render props最初的意思是:组件不自己定义render函数，而是通过一个名为render的props将外部定义的render函数传入使用。

3.template 模板是怎样通过 Compile 编译的

Compile 编译有三个阶段
parse函数：通过正则表达式解析模板中的指令，生成AST抽象语法树
optimize函数：优化AST，标记静态的（不需要修改的DOM）节点。diff算法更新时，会跳过静态节点， 8减少比较的过程，优化patch的性能
generate: 将AST生成render函数

https://www.jianshu.com/p/700b8e6347ff

4.简述微信小程序原理

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和appService两个部分；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

5.小程序数据传递方式

页面间数据传递：

1.使用全局变量

在app.js的文件，在这里我们可以定义我们所需要的全局变量。然后在页面中，可以通过 getApp()方法获取到全局应用对象
由于 app.js在项目中是用来做基础配置的，因此不建议将很多变量放在这里配置。一般情况下会将一些持久化的常量配置在这里，对于经常需要变动的量不建议用这个方法。

2.使用本地缓存，可以将用户产生的数据做本地的持久化

3.通过在跳转、重定向等转变页面时候，可以直接通过url来传送数据。

wx.navigateTo和wx.redirectTo不能跳转到tabar定义的页面，查看了微信小程序提供了wx.switchTab进行跳转，但是switchTab不可以传递url参数，后面提供了wx.reLaunch函数。

父子组件传参
父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this.data.name获取。
子组件向父组件传递数据使用this.triggerEvent方法

6.什么是Typescript？和js的区别

TypeScript 是 JavaScript 的一个超集

1、TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序
2、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
3、JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
4、TypeScript 通过类型注解提供编译时的静态类型检查。
5、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
6、TypeScript 为函数提供了缺省参数值。
7、TypeScript 引入了 JavaScript 中没有的“类”概念。
8、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

https://my.oschina.net/u/3991187/blog/4415774

7. redux与mobx的区别

1、redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中
2、redux使用扁平的对象保存数据，需要手动处理变化后的操作;mobx使用observable保存数据，数据变化后自动处理响应的操作
3、redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数;mobx中的状态是可变的，可以直接对其进行修改
4、mobx相对来说比较简单，mobx更多的使用面向对象的编程思维。redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助一系列的中间件来处理异步和副作用
5.mobx调试会比较困难，而redux提供能够进行时间回溯的开发工具，让调试变得更加的容易

8.简述 React Fiber

在react 16之后发布的一种react核心算法，React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法。

在之前React中，更新过程是同步的，这可能会导致性能问题。

当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为JavaScript单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，
就会出现卡顿。

React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

9. react中如何实现命名插槽

this.props.children

10. 如何理解jsx

所谓的JSX其实就是JavaScript对象，就是用JavaScript对象来表现一个DOM元素的结构。JSX就是让JavaScript语言能够支持这种直接在JavaScript 代码里面编写类似HTML标签结构的语法，这样写起来就方便很多。编译的过程会把类似HTML的JSX结构转换成JavaScript的对象结构。

11. 简述react的render

只要组件的状态(props或者state)发生了更改，那么组件就会默认执行render函数重新进行渲染（你也可以通过重写shouldComponentUpdate手动阻止这件事的发生)。同时要注意的事情是，执行render函数并不意味着浏览器中的真实DOM树需要修改。浏览器中的真实DOM是否需要发生修改，是由React最后比较Virtual Tree决定的。我们都知道修改浏览器中的真实DOM是非常耗费性能的一件事，于是React为我们做出了优化。但是执行render的代价仍然需要我们自己承担

注意点
在redux中，reducer是纯函数，需要返回一个全新的对象才会触发redux对state的修改，如果是在原对象上进行修改则无法触发，因为redux会先比较前后两份state的引用，相同就return

12. 有没有使用过HappyPack，简单的说下原理