前端面试基础面试题——5

1.react 和 vue 的区别是什么？

2.虚拟DOM的原理？优点与缺点？

3.类组件和函数组件之间的区别是？

4.state 和 props 区别是什么？

5.React 中 refs 是做什么的？

6.什么是高阶组件？

7.讲讲什么是 JSX ？  

8.为什么不能直接更新 state 呢 ?

9.当调用setState时，React render 是如何工作的？

10.Vuex解决了什么问题？

---

 

1.react 和 vue 的区别是什么？

1、vue是响应式的数据双向绑定系统，而react是单向数据流，没有双向绑定。

2、vue的语法较为简单，适用于小型项目创建，而react更适用于Web端和原生App的开发，侧重于大型应用。

2.虚拟DOM的原理？优点与缺点？

原理：

1.虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象

2.状态变更时，记录新树和旧树的差异

3.最后把差异更新到真正的dom中

优点:

1.保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
2.跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

缺点:

无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化

3.类组件和函数组件之间的区别是？

类组件：可以使用其他特性，如状态 state 和生命周期钩子

函数组件：当组件只是接收 props 渲染到页面时，就是无状态组件，也被称为哑组件或展示组件。

区别：
1.类组件有 this，函数组件没有
2.类组件有生命周期，函数组件没有
3.类组件有状态 state，函数组件没有

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

4.state 和 props 区别是什么？

props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即
1.state 是组件自己管理数据，控制自己的状态，可变；
2.props 是外部传入的数据参数，不可变；
3.没有state的叫做无状态组件（函数组件），有state的叫做有状态组件；
4.多用 props，少用 state，也就是多写无状态组件（因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。）。

5.React 中 refs 是做什么的？

Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。
咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。

6.什么是高阶组件？

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。高阶组件不是组件，是增强函数，可以输入一个元组件，返回出一个新的增强组件

HOC 可以用于:
1.代码重用、逻辑和引导抽象
2.渲染劫持
3.state 抽象和操作
4.props 处理

7.讲讲什么是 JSX ？  

JSX是javascript的语法扩展。它就像一个拥有javascript全部功能的模板语言。它生成React元素，这些元素将在DOM中呈现。React建议在组件使用JSX。在JSX中，我们结合了javascript和HTML，并生成了可以在DOM中呈现的react元素。

JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS

8.为什么不能直接更新 state 呢 ?

如果试图直接更新 state ，则不会重新渲染组件。

需要使用setState()方法来更新 state。它调度对组件state对象的更新。当state改变时，组件通过重新渲染来响应

9.当调用setState时，React render 是如何工作的？

将"render"分为两个步骤：

1.虚拟 DOM 渲染:

当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。

2.原生 DOM 渲染:

React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。

10.Vuex解决了什么问题？

 解决两个问题

多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。