前端面试：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 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。

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

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 是JavaScript 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有何不同？

13.什么是控制组件？

在 HTML 中，表单元素如<input>、<textarea>
和<select>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。

而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。

14.如何 React.createElement ？

问题：

const element = (
<h1 className="h=greeting">
    Hello, world!
    </h1>
)

上述代码如何使用 React.createElement 来实现:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

15.React 组件生命周期有哪些不同阶段？

在组件生命周期中有四个不同的阶段：

Initialization：在这个阶段，组件准备设置初始化状态和默认属性。
Mounting：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。
Updating：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。
Unmounting：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount生命周期方法。

除以上四个常用生命周期外，还有一个错误处理的阶段：

Error Handling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。

16.这段代码有什么问题吗？

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

答案：

没有什么问题。这种方式很少被使用，咱们可以将一个函数传递给setState，该函数接收上一个 state 的值和当前的props，并返回一个新的状态，如果咱们需要根据以前的状态重新设置状态，推荐使用这种方式。

17.如何有条件地向 React 组件添加属性？

对于某些属性，React 非常聪明，如果传递给它的值是虚值，可以省略该属性。例如：

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;
      return (

       <input type="text" disabled={disabled} reqyired={reqyired} />
      );
    }
});

渲染结果：

 <input type="text" reqyired>

另一种可能的方法是：

var condition = true;

var component = (
<p
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

18.react性能优化方案

重写shouldComponentUpdate来避免不必要的dom操作
使用production 版本的react.js
使用key来帮助React识别列表中所有子组件的最小变化

Redux

19.MVC框架的主要问题是什么？

解释一下 Flux
什么是Redux？
Redux遵循的三个原则是什么？
你对“单一事实来源”有什么理解？
列出 Redux 的组件。
数据如何通过 Redux 流动？
如何在 Redux 中定义 Action？
解释 Reducer 的作用。
Store 在 Redux 中的意义是什么？
Redux与Flux有何不同？
Redux 有哪些优点？

React 路由

31.什么是React 路由？
32.为什么React Router v4中使用 switch 关键字？
33.为什么需要 React 中的路由？
34.列出 React Router 的优点。

35.React Router与常规路由有何不同？