React面试（一）

1.vue和react有什么异同

相同点：
1.VUE和react都将核心功能放在一个库中，其他的功能交给其他库,比如：状态管理库、路由库、UI库等
2.都支持组件化开发的思想
3.运用diff算法和虚拟dom提高性能

不同点
1.vue通过v-model实现双向数据绑定，而react需要手动通过state和setState实现
2.在改变数据时，vue会精确的更新依赖该数据的视图，而react会更新当前组件及其子组件
3.实现数据响应的方式不同，vue通过get和set方法，在set数据时，触发视图更新，在react中通过setState方法触发视图更新

2.useEffect中为什么不能使用异步

1.useEffect中的函数必须在组件销毁的时候调用，所以react在执行的时候必须拿到这个返回值，组件在销毁的时候才能够调用这个返回值
2.在react中，只有第一个useEffect中的函数执行完毕，才会执行第二个useEffect中的函数，如果异步执行的化，会使组件的状态变得复杂难以管理。

3.useEffect和useLayoutEffect的区别

1.两者在平常使用的时候没有区别，在获取组件布局元素的宽和高的时候，使用useLayoutEffect，其它情况使用useEffect
2.useEffect是在dom更新并且挂载到页面之后执行，而useLayoutEffect是在dom更新之后，挂在到页面之前执行的，会阻塞页面的渲染

4.react的生命周期

react生命周期包含三个阶段：挂载阶段、更新阶段、卸载阶段

5.state和prop的区别

state是组建的内部状态，组件是根据这个内部状态进行数据渲染的，而prop是，因为react有组件化的思想，当一个组件依赖其它组件的数据，可以通过prop进行数据的传递，从而进行组件的渲染。

6.受控组件和非受控组件

受控组件就是受状态控制的组件，比如input组件的value值受state影响，当state改变时，value值就会改变；非受控组件他的初始值受传入的值影响，如果要获取最新的值的话，通过ref定位到dom元素，通过dom元素获取最新的值。

7.为什么react16之后不把事件挂载到document上了

因为项目中只有一个document，将事件挂载到根节点上，不同组件有不同的根节点，这样就可以让不同版本的react应用可以共存到一起，而不用考虑兼容性问题。

8.讲一下react的hoc，它可以用来做什么？

hoc就是高阶组件，高阶函数是吧一个函数作为参数传入到另一个函数中，实现功能更强大的函数，而高阶组件是将一个组件作为参数传入到另一个函数中，相比于vue，react更容易实现高阶组件，因为每一个react组件就是一个函数。
hoc可以用来作条件渲染、权限控制

9.讲一下对react fiber的理解

fiber是为了提高渲染性能和提升用户体验而提出来的
react和vue的diff机制不同，在vue中作响应式处理data数据的时候，同时做了依赖收集，所以当数据更新的时候，会精确的更新组件，而react不同，他在setState的时候必须同时更新当前组件及其子组件，并且在react16之前没有提出fiber的时候，他们是同步渲染的，这就会导致一直占用浏览器的资源知道这个动作完成，如果项目很大往往会造成卡顿的现象。因此react16提出了fiber的概念，他将一个任务分解成很多小的任务，并且任务有优先级，可以根据优先级的高低，将正在运行的任务执行完毕就停止，执行其他的任务，当执行完优先级高的任务之后，再执行优先级低的任务，这样就可以提高渲染性能，提升用户体验。

10.讲一下react.component和react.pureComponent的区别

在react更新组件的时候，会更新当前组件及其子组件，但是大部分时候子组件是没必要更新的，因此提出了pureComponent，但是pureComponent在比较引用对象时只是浅比较，只会比较变化前后是否指向同一片区域，而不会比较该区域的值。

11.如何理解react的hooks?hooks的使用限制有哪些？

hooks可以让函数组件具备类组件的能力，比如使用state和生命周期等，常见的hooks有useState、useEffect、useRef等
使用限制：只能在函数组件中使用：因为hooks就是为了让函数组件更灵活使用而诞生的
不能在条件、循环中使用：react内部是通过链表来顺序执行hooks,如果在条件或循环中使用hooks会破坏他的有序性导致程序混乱难以管理。

12.react性能优化方式

1.避免组件无效渲染：使用PureComponent、shouldComponentUpdate、React.memo
2.在列表渲染时，添加key属性，可以提高diff的效率
3.使用懒加载
4.使用服务端渲染，减少首页加载时间，有利于SEO
5.使用一些优化的hooks，比如useMemo:可以将一个值缓存起来，只有他的依赖改变的时候重新计算，useCallBack:he useMemo类似，只是缓存的是一个函数

13.react中的jsx转换为真实dom的过程

jsx会通过babel进行转译，最终转译为react.createElementd的形式，然后react.createElementd会根据参数的不同执行不同的逻辑

14.讲一下对setState理解（包括同步、异步、执行机制）

setSate在执行的时候是同步的，但是引发react的状态更新是异步的，如果是同步的化，每调用一次setSate就会触发react状态更新，再触发组件的重新渲染，如果是异步的话，就能包多次setState的值合并到一个对象中，根据对象的值一次性触发react状态更新和组件重新渲染，这样就能提高性能，提升用户体验。