<img src="https://www.geeksforgeeks.org/" alt="技术社区" />

• 课程
• 教程
• 面试准备

• 算法与数据结构
• 练习题
• C语言
• C++
• Java
• Python
• JavaScript
• 数据科学
• 机器学习
• 在线课程
• Linux
• DevOps

欢迎来到我们关于 React.js 的深度探索环节！无论你是刚入门的前端新手，还是希望巩固基础知识的开发者，这篇文章都将非常适合你。我们将通过一系列精心挑选的测验问题（Set-1），带你深入理解 React.js 的核心机制。在文章中，我们不仅要选出正确的答案，更要探究“为什么”——为什么这个命令是正确的？为什么 React 这样设计？让我们像在实际生产环境中一样，严谨地审视每一个知识点。

React.js 测验 | Set-1

最后更新：讨论评论

#### 准备工作

在开始挑战之前，建议你准备好开发环境。虽然这些题目你可以凭记忆回答，但如果你能跟随我们的讲解，在本地编辑器中敲击代码，收获会更大。你将学习到关于项目构建、组件生命周期、状态管理以及 JSX 转译等关键领域的最佳实践。

问题 1：项目启动的基石

以下哪个命令用于创建 react-js-app ？

• npx create-react-app appname
• npm install create-react-app
• npx install create-react-app -g
• install – l create-react-app

正确答案：npx create-react-app appname
深度解析：

在现代前端开发中，npx 是一个非常强大的工具。我们不需要先全局安装 INLINECODE6ae25cd0 然后再运行它，INLINECODE02124f82 允许我们直接使用 npm 包中的可执行命令。这不仅能避免全局安装带来的版本冲突，还能确保我们每次运行的都是最新版本的脚手架工具。

当我们运行 npx create-react-app appname 时，实际上发生了以下过程：

• INLINECODE6bfcd709 查找 INLINECODE40045317 包。
• 如果本地缓存中没有，它会临时下载该包。
• 执行安装脚本，配置 Webpack、Babel、ESLint 等复杂配置，为你生成一个开箱即用的项目结构。

实战建议：

虽然 INLINECODEd2117c94 (CRA) 是官方推荐的标准工具，但在现代企业级开发中，你也可能会接触到 Vite。Vite 利用浏览器原生 ES 模块，启动速度比 CRA 快得多。如果你觉得 CRA 生成的项目结构太重，不妨试试 INLINECODEeb490ddc，体验会完全不同。

问题 2：面向对象与组件继承

在 React.js 中，以下哪一个关键字用于创建一个类以实现继承？

• Create
• Extends
• Inherits
• Delete

正确答案：Extends
深度解析：

React 的类组件是基于 ES6 标准的 Class 语法构建的。在 JavaScript 中，继承机制的核心就是 extends 关键字。我们通常会这样编写一个类组件：

// 引入 React 核心库
import React, { Component } from ‘react‘;

// 使用 extends 继承 React.Component 基类
class MyComponent extends Component {
  render() {
    return (
      

        
目录
1 你好, React!
2 标题
3 标题
3.1 {props.text}
4 Hello, {props.name}
你好, React!
      
    );
  }
}

export default MyComponent;

为什么这很重要？

通过 INLINECODE42708ac2，我们的组件获得了 React 生态系统内置的强大功能，比如 INLINECODE38fa987d 方法和生命周期钩子（componentDidMount 等）。如果没有继承，我们就无法使用 React 提供的状态管理机制。

趋势观察：

尽管类组件是 React 的基础，但目前社区更推崇函数式组件 配合 Hooks。函数式组件更简洁、更容易测试，也避免了 INLINECODE701b8eaa 指向带来的困扰。不过，理解 INLINECODE8abc603f 和 extends 依然是你阅读老项目源码的必备技能。

问题 3：开发服务器端口

应用程序运行的默认端口号是多少？

• 3000
• 8080
• 5000
• 3030

正确答案：3000
深度解析：

当你运行 INLINECODE095d06d6 启动开发服务器时，React 会默认尝试在 INLINECODEba68ebb5 端口运行。这是因为 Webpack Dev Server（CRA 内部使用的开发服务器）的默认配置就是 3000。如果 3000 端口被占用（比如你同时运行了两个项目），它会自动尝试 3001，以此类推。

自定义端口：

在实际开发中，我们经常需要同时运行前端和后端（例如 Node.js 的 Express 通常运行在 3000 或 5000）。为了避免冲突，你可以修改端口。

方法一：通过环境变量

在项目根目录创建 .env 文件：

PORT=4000

方法二：直接修改启动脚本

修改 package.json：

"scripts": {
  "start": "PORT=4000 react-scripts start"
}

(注意：在 Windows CMD 下可能需要使用 cross-env 库来兼容设置环境变量)

问题 4：组件的返回值之谜

以下哪一项是 React 组件的有效返回类型？（注：React组件通常返回JSX/Null/Array等，此处根据选项推测为特定计数问题）

• 2
• 5
• 1
• 3

正确答案：1
深度解析：

这是一道考察 JSX 结构规则的题目。在 React 中，组件的 INLINECODEdfa39719 方法（或函数组件本身）必须返回单个根元素。虽然 React 现在支持返回数组（INLINECODE8d086b31）或 Fragment（...），但严格来说，一个完整的 UI 块通常被包裹在一个父容器中。

如果是问“一个 JSX 元素必须包含多少个根元素”这种基础概念题，答案通常是 1。

例如，下面的代码是无效的（在老版本 React 中）：

// ❌ 错误示例：Adjacent JSX elements must be wrapped in an enclosing tag
return (
  
标题
  
段落
);

我们需要使用 INLINECODEfc8dc9af 或 INLINECODE84385c1c 来包裹它们：

// ✅ 正确示例：单一根元素
return (
  

    
标题
    
段落
  
);

为什么要这样做？

这实际上是因为 React 会将 JSX 编译成 React.createElement(type, props, children) 的函数调用。如果返回多个元素，函数就没有唯一的“父节点”可以挂载。

问题 5：数据流动的脉络

以下哪一种是在 React.js 中处理数据的方式？

• State & Props
• Services & Components
• State & Services
• State & Component

正确答案：State & Props
深度解析：

React 的核心哲学是“数据驱动视图”。我们主要通过两种方式来处理和管理数据：

• State（状态）： 组件内部的记忆。

State 是私有的、完全由组件自身控制的数据。当 State 改变时，React 会自动重新渲染组件。

• Props（属性）： 组件之间的传递。

Props 是父组件向子组件传递数据的方式。Props 是只读的，子组件绝不能修改传入的 props。

让我们看一个结合两者的代码示例：

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 定义 State
    this.state = {
      message: "来自父组件的问候"
    };
  }

  render() {
    // 通过 Props 将 State 传递给子组件
    return (
      

        
      
    );
  }
}

// 子组件
function ChildComponent(props) {
  // 接收 Props 并渲染
  return 
{props.text}
;
}

最佳实践：

保持组件的“纯度”。如果一个组件不需要修改数据，尽量让它接收 Props 并渲染 UI，而不是在它内部定义 State。这会让你的应用更容易调试和维护。

问题 6：API 的核心方法

对于 React.js 中的 API 而言，以下哪项是必须的？

• SetinitialComponent
• renderComponent
• render
• All of the above

正确答案：render
深度解析：

在 React 类组件的世界里，INLINECODE8868872b 方法是绝对必须的。它是组件的“大脑”，负责决定 UI 看起来是什么样子。React 会调用 INLINECODE83dcdd58 来生成虚拟 DOM，然后与真实 DOM 进行对比。

INLINECODE3b29fc32 必须是纯函数，这意味着它不能修改 State（使用 INLINECODE12758583），必须返回相同的输出，给定相同的输入。

其他选项如 INLINECODE4386b368 和 INLINECODE729b910e 并不是 React 的标准 API。我们通常在 constructor 中初始化状态，而不是通过专门的 API。

问题 7：Babel 的角色

关于 Babel，以下哪项描述是正确的？

• Compiler（编译器）
• Transpilar（转译器）
• Both of the above
• None of the above

正确答案：Both of the above
深度解析：

这是一个非常理论化但重要的概念。

• Compiler（编译器）： 广义上，任何将源代码转换为目标代码的工具都是编译器。
• Transpiler（转译器）： 特指“源代码到源代码”的转换（Source-to-source），即从一种高级语言转换为另一种高级语言。

Babel 主要做的事情是将现代的 JavaScript（ES6+, JSX）转换成浏览器能够理解的旧版 JavaScript（ES5）。所以它既是编译器也是转译器。通常我们在 React 社区中习惯称之为 Transpiler 或 Compiler 都是可以接受的，因为它没有产生底层的机器码或汇编语言，只是进行了语言级别的转换。

问题 8：组件间的桥梁

在 React.js 中，我们可以如何将数据从一个组件传递到另一个组件？

• SetState
• Render with arguments
• Props
• PropTypes

正确答案：Props
深度解析：

正如我们在问题 5 中讨论的，Props（Properties） 是 React 数据流动的单向管道。

• SetState 用于更新内部状态，不用于跨组件传输。
• PropTypes 是一种类型检查机制（类似于 TypeScript 的接口），用于验证传入的 Props 是否符合预期，而不是传输数据的手段。
• Render with arguments 并不是 React 的标准术语。

代码示例：单向数据流

function Welcome(props) {
  return 
Hello, {props.name}
;
}

function App() {
  return (
    

      {/* 数据通过 name prop 从 App 流向 Welcome */}
      
      
    
  );
}

问题 9：更新状态的正确姿势

关于在 React.js 中改变状态，以下哪个函数是正确的？

• this.State{}
• this.setState
• this.setChangeState
• All of the above

正确答案：this.setState
深度解析：

这是一个经典的易错点。在 React 的类组件中，绝对不要直接修改 State，例如 this.state.count = 1 是错误的。这虽然改变了数据，但不会触发 UI 的重新渲染。

你必须使用 INLINECODE28a8691b 方法。它不仅会更新 INLINECODEaceddb97，还会通知 React：“嘿，数据变了，请重新调用 render() 绘制页面”。

代码示例：异步更新

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    // ✅ 正确：使用 setState
    // 注意：setState 是异步的
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
       this.increment()}>
        Count: {this.state.count}
      
    );
  }
}

问题 10：引用父类

关于在 React.js 中引用父类，以下哪个方法是正确的？

• self()
• inherits()
• this()
• super()

正确答案：super()
深度解析：

super() 是 JavaScript ES6 类中的关键字，用于引用父类的构造函数。

在 React 组件的 INLINECODE6eda6ad4 中，第一行通常必须是 INLINECODEf0d60c27。

为什么？

如果不调用 INLINECODEa664ec6a，你在构造函数中就无法通过 INLINECODE4643e9b7 访问到 INLINECODEb2c4f711。因为父类（React.Component）负责初始化 INLINECODEf3233ec3，如果跳过这一步，this 在被赋值之前就是未定义的。

代码示例：

constructor(props) {
  // 必须调用 super，否则 this.props 将在构造函数中不可用
  super(props); 
  console.log(this.props); // ✅ 可以访问
  
  this.state = {};
}

总结

完成这组测验后，我们对 React.js 的基础架构有了更清晰的认识。从脚手架工具的选择，到组件内部的生命周期和状态管理，每一环都紧密相扣。

关键要点回顾：

• 使用 npx 快速启动项目。
• 类组件通过 extends 继承自 React.Component。
• State 是私有的，Props 是只读的，数据在组件间通过 Props 向下流动。
• 组件必须返回单一根元素（或使用 Fragment）。
• 使用 INLINECODE8f03698b 方法输出 UI，使用 INLINECODE4a9e7569 更新 UI，永远不要直接修改 State。
• super(props) 是连接子类与父类逻辑的桥梁。
• Babel 负责将 JSX 翻译成浏览器可执行的代码。

下一步建议：

在掌握了这些基础后，建议你深入研究 React Hooks（如 INLINECODEdd7d3444, INLINECODEd4595ceb），它们极大地简化了代码逻辑，并解决了类组件中难以共享逻辑的问题。此外，尝试构建一个包含父子组件通信的小应用，将今天的理论付诸实践吧！

标签： Web技术
共有 15 个问题需要完成。
参与正在进行的讨论