面试题-React

226 阅读6分钟

基础

1.什么是虚拟DOM?

虚拟DOM是真实DOM在内存中的表示,ul的表示形式保存在内存中,并且与实际的DOM同步,这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤,整个过程被称为调和

2.类组件和函数组件之间的区别是什么?

  • 类组件可以使用其他特性,如状态和生命周期钩子,并且他有this
  • 函数组件只能接收props渲染到页面,无状态组件,没有this,不能使用生命周期钩子
  • 函数组件性能要高于类组件,因为类组件使用要实例化,而函数组件直接执行取返回结果即可,为了提高性能,尽量使用函数组件

3.React中refs的作用是什么?有哪些应用场景?

Refs 提供了一种方式,用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用。Refs 是使用 React.createRef() 方法创建的,他通过 ref 属性附加到 React 元素上。

  • 处理焦点
  • 触发必要的动画
  • 集成第三方 DOM 库

4.什么是高阶组件?

如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。

2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。

常见的高阶函数有:Promise、setTimeout、arr.map()等等

5.React中什么是受控组件和非控组件?

受控组件:表单中输入类DOM的值,随着输入,能把输入的值维护到状态state中,需要用的时候再从状态中取出来。建议写受控组件,可以减少ref的使用

非控组件:表单中输入类DOM的值现用现取

需要使用setState()方法更新state,它对state对象进行更新,当state改变时,组件通过重新渲染来响应

6.类组件与函数组件有什么区别?

1.语法上的区别

函数式组件是一个纯函数,类组件是需要继承React.Component的

2.调用方式

函数式组件可以直接调用,返回一个新的React元素;类组件在调用时是需要创建一个实例的,然后通过调用实例里的render方法来返回一个React元素。

3.状态管理

函数式组件没有状态管理,类组件有状态管理。

4.使用场景

类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件,一般情况下能用函数式组件就不用类组件,提升效率。

生命周期

2.React的生命周期有那些状态?

  • Mounting(挂载):已插入真实 DOM
  • Updating(更新):正在被重新渲染
  • Unmounting(卸载):已移出真实 DOM

1.React的生命周期有哪些钩子?

Mounting 挂载阶段
  1. constructor:初始化属性
  2. componentWillMount:在组件即将被挂载到页面的时候执行
  3. render:页面state或props发生变化时执行
  4. componentDidMount`:组件挂载完成之后执行
Updation更新阶段
  1. shouldComponentUpdate:该函数会在组件更新之前,自动被执行。
  2. componentWillUpdate:该函数在组件更新之前,shouldComponentUpdate之后被执行,如果shouldComponentUpdate返回false,那么该函数就不会被执行。
  3. componentDidUpdate:该函数在组件更新之后执行,它是组件更新的最后一个环节。
Unmounting 卸载阶段
  1. componentWillUnmount:组件在卸载阶段时执行。

组件通信

1.父子组件的通信方式?

父=>子

父组件向子组件传递数据:通过传 props 的方式,向子组件进行传递数据

子=>父

子组件调用父组件的方法(传递参数):通过调用父组件的方法时,通过callback回调传递数据。this.props.父组件的方法(传递的数据)

2.跨级组件的通信方式?

3.非套关系组件的通信方式?

4.如何解决 props 层级过深的问题?

5.组件通信的方式有哪些?

路由

1.React-Router的路由有几种模式?

React路由有两种模式,分别是:

  1. hash模式,该模式会在路径前加入“#”号成为一个哈希值;
  2. history模式,该模式允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

Redux

1.对 Redux 的理解?

redux是一个专门用于做状态管理的JS库(不是react插件库)。

它可以用在react, angular, vue等项目中, 但基本与react配合使用

作用:集中管理应用程序的状态,实现多组件通信

2.Redux 的三大核心?

1、action:是动作的对象,包含2个属性

  type:标识属性, 值为字符串, 唯一, 必要属性
  data:数据属性, 值类型任意, 可选属性

2、reducer:用于初始化状态、加工状态。

  加工时,根据旧的state和action, 产生新的state的纯函数。

3、store:将state、action、reducer联系在一起的对象,它内部维护着:state、reducer

Hooks

1.常用的hooks有哪些?

2.为什么useState 要使用数组而不是对象?

如果 useState 返回的是数组,那么使用者可以对数组中的元素命名,代码看起来也比较干净

如果 useState 返回的是对象,在解构对象的时候必须要和 useState 内部实现返回的对象同名,想要使用多次的话,必须得设置别名才能使用返回值

3.React Hooks 解决了哪些问题?

Hooks 是react16.8新增特性,它可以使用一些state的新特性,简化逻辑复用,副作用统一数据。

Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上,那么当被钩到的数据或者事件发生变化时,产生这个目标结果的代码会重新执行,产生更新后的结果。

4.useEffect 与 useLavoutEffect 的区?

首先要说明的是,useLayoutEffect和useEffect很像,函数签名也是一样。唯一的不同点就是useEffect是异步执行,而useLayoutEffect是同步执行的。

虚拟Dom(暂时不用)

1.什么是虚拟DOM?

2.React diff 算法的原理是什么?

3.React中的Key作用是什么?

4.虚拟DOM的引入与直接操作原生DOM相比,哪一个效率更高,为什么?

5.React与Vue的diff算法有何不同?