前端面试：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