前端面试:React必知必会的35个面试题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了 React 面试中最常见的面试问题,这是一份理想的指南,让你为 React 相关的面试做好充分的准备工作。

React面试题:

React面试题总结内容主要包括基础知识,React 组件,React Redux,React 路由。【点击这里领取面试题资料】

基础知识、React组件


1.什么是虚拟DOM?

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

2.什么是React?
  • React 是 Facebook 在 2011 年开发的前端 JavaScript 库。
  • 它遵循基于组件的方法,有助于构建可重用的UI组件。
  • 它用于开发复杂和交互式的 Web 和移动 UI。
  • 尽管它仅在 2015 年开源,但有一个很大的支持社区。
3.类组件和函数组件之间的区别是啥?
  • 类组件可以使用其他特性,如状态 state 和生命周期钩子。
  • 当组件只是接收 props 渲染到页面时,就是无状态组件,就属于函数组件,也被称为哑组件或展示组件。

函数组件和类组件当然是有区别的,而且函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。

前端面试:React必知必会的35个面试题_第1张图片

4.在 React 中如何处理事件

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

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

5.如何创建 refs

Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。

class MyComponent extends React.Component {
     
  constructor(props) {
     
    super(props);
    this.myRef = React.createRef();
  }
  render() {
     
 	return <p ref={
     this.myRef}  />;
  }
}

或者这样用:

class UserForm extends Component {
     
  handleSubmit = () => {
     
    console.log("Input Value is: ", this.input.value)
  }
  render () {
     
    return (
    <form onSubmit={
     this.handleSubmit}>
    <input
          type='text'
          ref={
     (input) => this.input = input} /> // Access DOM input in handle submit
      <button type='submit'>Submit</button>
      </form>
    )
  }
}
6.什么是高阶组件?

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

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用于以下许多用例

  • 代码重用、逻辑和引导抽象
  • 渲染劫持
  • state 抽象和操作
  • props 处理
7.列出React的一些主要优点。

React的一些主要优点是:

  • 它提高了应用的性能
  • 可以方便地在客户端和服务器端使用
  • 由于 JSX,代码的可读性很好
  • React 很容易与 Meteor,Angular 等其他框架集成
  • 使用React,编写UI测试用例变得非常容易
8.React有哪些限制?

React的限制如下:

  • React 只是一个库,而不是一个完整的框架
  • 它的库非常庞大,需要时间来理解
  • 新手程序员可能很难理解
  • 编码变得复杂,因为它使用内联模板和 JSX
9.什么是JSX?

JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。下面是JSX的一个例子:

render(){
     
 return(
 <div>
 <h1> Hello World from Edureka!!</h1>
 </div>
 );
}
10.为什么浏览器无法读取JSX?

浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX,首先,需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器。

11.与 ES5 相比,React 的 ES6 语法有何不同?

以下语法是 ES5 与 ES6 中的区别:

1)require 与 import

// ES5
var React = require('react');

// ES6
import React from 'react';

2)export 与 exports

// ES5
module.exports = Component;

// ES6
export default Component;

3)component 和 function

// ES5
var MyComponent = React.createClass({
     
 render: function() {
     
 return
 <h3>Hello Edureka!</h3>;
 }
});

// ES6
class MyComponent extends React.Component {
     
 render() {
     
 return
 <h3>Hello Edureka!</h3>;
 }
}

4)props

// ES5
var App = React.createClass({
     
 propTypes: {
      name: React.PropTypes.string },
 render: function() {
     
 return
 <h3>Hello, {
     this.props.name}!</h3>;
 }
});// ES6
class App extends React.Component {
     
 render() {
     
 return
 <h3>Hello, {
     this.props.name}!</h3>;
 }
}

5)state

// ES5
var App = React.createClass({
     
 getInitialState: function() {
     
 return {
      name: 'world' };
 },
 render: function() {
     
 return
 <h3>Hello, {
     this.state.name}!</h3>;
 }
});// ES6
class App extends React.Component {
     
 constructor() {
     
 super();
 this.state = {
      name: 'world' };
 }
 render() {
     
 return
 <h3>Hello, {
     this.state.name}!</h3>;
 }
}
12.React与Angular有何不同?

前端面试:React必知必会的35个面试题_第2张图片

13.什么是控制组件?

在 HTML 中,表单元素如