您现在的位置是:首页 > 技术教程 正文

React面试题最全

admin 阅读: 2024-03-27
后台-插件-广告管理-内容页头部广告(手机)

1.什么是虚拟DOM?

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

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

类组件可以使用其他特性,如状态和生命周期钩子,并且他有this

函数组件只能接收props渲染到页面,无状态组件,没有this,不能使用生命周期钩子

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

3.react中refs是什么?

refs是提供一种访问在render方法中创建DOM节点或者React元素的方法,在典型的数据流中,props是父子组件交互的唯一方式,想要修改子组件,需要使用新的props重新渲染它,某些情况下,在典型的数据流外,强制修改子代,这个时候可以使用refs

我们可以在组件添加一个ref属性来使用,该属性是一个回调函数,接收作为其第一个参数的底层DOM元素或组件挂载实例

input元素有一个ref属性,他的值是一个函数,该函数接收输入的实际DOM元素,然后将其放在实例上,这样就可以在 handleSubmit 函数内部访问它

经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包与函数组件一起使用

4.在react中如何处理事件?

为了解决跨浏览器的兼容性问题,SyntheticEvent 实例将被传递给你的事件处理函数,SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器,它还拥有和浏览器原生事件相同的接口,包括 stopPropagation() 和 preventDefault()。

比较有趣的是,React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处,也意味着 React 在更新 DOM 时不需要跟踪事件监听器。

5.state和props区别是什么?

相同点:都是普通的js对象,他们包含着影响渲染输出的信息

不同点:state是组件自己管理数据,控制自己的状态,可变

props是外部传入的数据参数,不可变

没有state的叫做无状态组件,有state的叫有状态组件

多用props,少用state

6.如何创建refs?

通过React.createRef()创建的,并通过ref属性附加到react元素,在构造组件中,

通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。

7.什么是高阶组件?

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上,这是一个模式,是从 React 的组合特性中衍生出来的,称其为纯组件,因为它们可以接受任何动态提供的子组件,但不会修改或复制输入组件中的任何行为

HOC 可以用于以下许多用例

  • 代码重用、逻辑和引导抽象
  • 渲染劫持
  • state 抽象和操作
  • props 处理

8.在构造函数调用super并将props作为参数传入的作用是啥?

 在调用 super() 方法之前,子类构造函数无法使用this引用,ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。

props 的行为只有在构造函数中是不同的,在构造函数之外也是一样的

9.什么是受控组件?

在 HTML 中,表单元素如