1.为啥说react比jquery效率高
本质上，React是一个UI库，而JQuery是一个工具库或者说是插件库。
2.怎么理解虚拟dom
虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。
相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM。
3.描述一下组件设计原则
1.从功能上拆分层次
2.尽量让组件原子化，一个组件中的东西不要太多，每个组件只完成不太多的功能
3.容器组件，只管理数据，怎么显示不管
UI组件，只管理视图，数据怎么来不管
例如一个UI组件中，有一个数据，虽然它仅与当前组件有关，在其它组件都没有用到，但是当我们要发请求更改它时，应该去这个数据来源的容器组件中去更改，而不要在当前这个视图组件中更改，这是因为：
更改这个数据的请求，它可能还会用到其它的参数，这些参数在ui组件中却没有，而在容器组件中却很好得到。
4.容器组件就是负责管理数据，所有的数据在这里都能很好的互用。
5.通用组件，应与业务相脱离，实现解耦
6.通用组件要可定制化
4.常用的数据结构有哪些？
数组 列表 栈 队列 树 堆 散列表 图
5.props 和 state 的区别，分别什么时候使用
- props 是组件对外的接口，组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。
- state 是组件对内的接口组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。
根据对外接口props 和对内接口state，组件计算出对应界面的UI。
主要区别：1.props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；props意为属性，只可父组件改变子组件的props，而子组件不能自更新，props是子组件暴露给外部的公有接口
2.state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。
3.在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
4.props主要是用于组件之间传递参数，获取组件的属性值。 组件之间数据单向流动 ，从父组件流向子组件。
5.state主要用于组件更新控制，如果想重新渲染或更新组件，只需要修改state即可，然后根据具体修改的state,
6.props和state是经常要结合使用的，父组件的state可以转化为props来为子组件进行传值。在这种情况下，子组件接收的props是只读的，想要改变值，只能通过父组件的state对其进行更改。
1.Props的使用
当一个组件被注入一些属性（Props ）值时，属性值来源于它的父级元素，所以人们常说，属性在 React 中是单向流动的：从父级到子元素。
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
作用：
通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据
组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
2.State的使用
React 的核心思想是组件化，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。
状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是state是私有的，可以认为state是组件的“私有属性（或者是局部属性）”。
setState( )
通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。渲染完成后，调用可选的callback回调。（大部分情况下不需要调用回调，因为React会负责把界面更新到最新状态）
6、讲下redux的⼯作流程
1）actions
actions英文直译过来就是行动、动作的意思，那么我们就可以猜到他表示的是“怎么做”，简单来说actions就是一个对象，actions里面有两个属性分别为type和data：
type：标识属性，值为字符串且唯一，必要属性（你想要做什么事情
data：数据属性，值为任意类型，可选属性（你要做事情的数据
那我们浅浅举个例子：比如计算器你可以进行加1减2等操作，那么加减乘除这个操作就是你的type，数字就是你的数据
2）store
store有且只能有一个，他相当于一个最高指挥家，他负责把action动作交给对应的reducer进行执行，也就是说将state、action和reducer联系在一起的对象。
3）reducer
reducer用于将store发过来的action完成并将结果返回给store，他接收两个参数preState（旧状态）和action（动作）并返回一个newState（新状态）。
比如像计算器我们需要在原来的数据上进行加1的操作，那么旧状态旧对应原来的数据，action对应加1的操作，返回的新状态就是计算器加完之后重新返回的结果。
7、dva和 redux相比有什么优点
1.React Hooks ：组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。
2.性能比较：在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。
Hooks的优势：
Hooks 避免了 class 需要的额外开支，像是创建类实例和在构造函数中绑定事件处理的成本（但是不可避免的使用了闭包）。
3.Hooks的组件写法可以更多的把逻辑抽离出来，与class相比减少了模板代码，拆分的粒度更细，复用性更高（最大的优点），高阶组件和renderProps也同样能做到。但hooks实现起来的代码量更少，以及更直观（代码可读性）。
4.避免了在class写法中需要在不同生命周期写重复逻辑的心智负担。
5.无需考虑this的指向问题。
8、hooks 的作用是什么
Hook 是用来让我们更好地复用 React 状态逻辑代码的。
注意这里说的不是模板代码，模板代码可以用组件来复用；而单纯的状态逻辑代码没法用组件复用
9、useEffect 对应的声明周期有哪些
- componentDidMount
- componentDidUpdate
- componentWillUnmount
10、useEffect 对应的依赖如果是复杂对象如何处理
react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型，当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变，当为引用数据类型时，useeffect总是会被触发，因为useEffect这里进行的时浅比较
11、react 常用的性能优化方法有哪些
1.避免使用内联函数。每次render渲染时，都会创建一个新的函数实例，应该在组件内部创建一个函数，讲事件绑定到函数，这样每次调用render时，就不会创建单独的函数实例。
2.使用react fragement 避免额外标记。用户创建新组件时，每个组件应具有单个父标签，父级不能有两个标签。所以顶部要有一个公共标签，所以经常在组件顶部添加额外标签div，这个div标签充当父标签意外，没有其他作用，这个时候可以使用fragement，它不会向组件引入任何的额外标记，但是可以作为父级标签。
3.使用immutable。在react中使用immutablr能够带来性能优化，主要体现在减少渲染的次数，为了避免重复渲染，会在shouldComponentUpdate()中做对比，当返回true，执行render方法。immutable通过is方法完成对比。
4.懒加载组件。从工程方面考虑，webpack存在代码拆分的能力，可以为应用创建多个包，并在运行时动态加载，减少初始包的大小， 在react中使用Suspense，lazy组件。下图5.事件绑定方式，从性能考虑，在render方法中使用bind和箭头函数，都会生成新的方法实例，在constructer中欧给使用bind和箭头函数，性能提高
6.服务端渲染，可以使用户更快的看到显然成功的页面，服务端渲染可以起一个node服务，可以使用express。koa等，调用react的renderToString方法，将跟组件渲染成字符串，再输出到相应中
7.组件拆分，合理使用hooks
12、说一下你对diff算法的理解
diff是一种对比算法，对比的是新旧虚拟dom，对比是哪个虚拟节点更改了，找出这个虚拟dom节点，并只更新这个虚拟节点的对应真实节点，而不更新其他数据没发生改变的节点，实现精准地更新真实dom，从而提高效率。
使用虚拟dom算法的损耗计算： 总损耗 = 虚拟DOM增删改+（与Diff算法效率有关）真实DOM差异增删改+（较少的节点）排版与重绘
直接操作真实DOM的损耗计算：总损耗 = 真实DOM完全增删改+（可能较多的节点）排版与重绘
13、简单介绍一下 webpack的工作原理
1、核心概念
（1）entry：一个可执行模块或者库的入口。
（2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。
（3）loader：文件转换器。例如把es6转为es5，scss转为css等
（4）plugin：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。
2、webpack构建流程（原理）
从启动构建到输出结果一系列过程：
（1）初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。
（2）开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。
（3）确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。
（4）编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
（5）完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry配置生成代码块chunk。
（6）输出完成：输出所有的chunk到文件系统。
注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如UglifyPlugin会在loader转换递归完对结果使用UglifyJs压缩覆盖之前的结果。