我的 React 面试题集锦（第一部分）

+10 个来自我的保险库的 React 面试问题

第 1 部分
第 2 部分
第 3 部分

+10 个来自我的保险库的 React 面试问题

从最典型的问题开始，到一些让你意想不到的问题。
我们开始吧。目标是给出简短而精炼的答案

1.什么是 React？

React 是 Facebook 于 2011 年开发的前端 JavaScript 库。

• 它遵循基于组件的方法，有助于构建可重用的 UI 组件。
• 它用于开发复杂且交互式的 Web 和移动 UI。
• 尽管它于 2015 年才开源，但它拥有最大的支持社区之一。

2.React有哪些特点？

• 它使用虚拟 DOM 而不是真实 DOM。
• 它使用服务器端渲染。
• 它遵循单向数据流或数据绑定

3. React 与其他 JS 框架有何不同？

这里要注意的一个有趣的事实是，ReactJS 只是一个前端库而不是一个完整的框架，它处理 MVC（模型 - 视图 - 控制器）的视图组件。

此外，在 React 中，一切都是组件。想象一下，一栋乐高房子就像一个完整的应用程序。然后，将每个乐高积木比作一个组件，后者充当着构建块的角色。这些积木/组件集成在一起，构建出一个更大、更动态的应用程序。

4.你如何理解虚拟DOM？解释一下它是如何工作的。

虚拟 DOM 是一个轻量级的 JavaScript 对象，它原本只是真实 DOM 的副本。它是一个节点树，将元素、它们的属性和内容以对象及其属性的形式列出。React 的渲染函数会基于 React 组件创建一个节点树。然后，它会根据用户或系统执行的各种操作导致的数据模型发生变化来更新这棵树。

虚拟 DOM 的工作原理分为三个简单的步骤：

1. 每当任何底层数据发生变化时，整个 UI 都会以虚拟 DOM 表示重新渲染。
2. 然后计算先前的 DOM 表示和新的 DOM 表示之间的差异。
3. 一旦计算完成，真实的 DOM 将仅更新实际发生变化的内容。

5. React 中的事件是什么？

在 React 中，事件是对特定操作（如鼠标悬停、鼠标单击、键盘按下等）触发的反应。

处理这些事件与处理 DOM 元素中的事件类似。但也存在一些语法差异，例如：

• 事件的命名采用驼峰式命名法，而非仅仅使用小写字母。
• 事件作为函数而不是字符串传递。

事件参数包含一组特定于事件的属性。每种事件类型都有其自身的属性和行为，这些属性和行为只能通过其事件处理程序访问。

6.什么是 JSX？

JSX 是 React 使用的类似 XML/HTML 的语法，它扩展了 ECMAScript，使类似 XML/HTML 的文本可以与 JavaScript/React 代码共存。该语法旨在供预处理器（例如 Babel 之类的转译器）使用，将 JavaScript 文件中的类似 HTML 的文本转换为 JavaScript 引擎可以解析的标准 JavaScript 对象。

7.为什么浏览器无法读取JSX？

浏览器只能读取 JavaScript 对象，而 JSX 并非常规的 JavaScript 对象。因此，为了让浏览器能够读取 JSX，首先我们需要使用 Babel 等 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传递给浏览器。

8. React 的 ES6 语法与 ES5 相比有何不同？

语法从 ES5 到 ES6 在以下方面发生了变化：

• 需要与导入

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

// ES6
import React from 'react';

export vs exports

• 出口与出口

// ES5
module.exports = Component;

// ES6
export default Component;

• 组件和功能

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

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

• 道具

// 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>;
    }
}

• 状态

// 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>;
    }
}

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

React 组件的生命周期分为三个不同阶段：

• 初始渲染阶段：这是组件即将开始其生命旅程并进入 DOM 的阶段。
• 更新阶段：组件添加到 DOM 后，只有当 props 或 state 发生变化时，它才有可能更新并重新渲染。这种情况只发生在这个阶段。
• 卸载阶段：这是组件生命周期的最后阶段，在此阶段，组件被销毁并从 DOM 中移除。

10.详细解释 React 组件的生命周期方法

一些最重要的生命周期方法是：

• componentWillMount() – 在客户端和服务器端进行渲染之前执行。
• componentDidMount() – 仅在第一次渲染后在客户端执行。
• componentWillReceiveProps() – 从父类接收到 props 后立即调用，并且在调用另一个渲染之前。
• shouldComponentUpdate() – 根据特定条件返回 true 或 false 值。如果希望组件更新，则返回 true，否则返回 false。默认情况下，返回 false。
• componentWillUpdate() – 在 DOM 中进行渲染之前调用。
• componentDidUpdate() – 渲染完成后立即调用。
• componentWillUnmount() – 组件从 DOM 中卸载后调用。用于清理内存空间。

[更新 1] 感谢

蒂亚戈·罗梅罗跟随

巴西裔美国软件工程师兼狗爸爸，富有同理心、善良且富有创造力。同时，他也是一位清醒且纯素食者。

仅提及最近发生的变化：在 React 16.3.0 中，一些生命周期方法已被弃用：

• 组件将安装（）
• 组件将接收属性（）
• 组件将更新（）

它们现在仍然可以使用，但您需要在其前面加上UNSAFE_，例如UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps和UNSAFE_componentWillUpdate。

预计这些将在 React 17 上被删除。

我们采取了一些新方法来弥补这一点：

• getDerivedStateFromProps(props, state) - 在组件实例化后以及重新渲染前调用。它可以返回一个对象来更新 state，或者返回 null 来表示新的 props 不需要任何 state 更新。

• getSnapshotBeforeUpdate(prevProps, prevState) - 在发生变更之前调用（例如，在 DOM 更新之前）。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。（此生命周期并不常用，但在诸如在重新渲染期间手动保留滚动位置等情况下非常有用。）