前言：

是个人根据自我的学习情况，总结过后的一些知识，自己写太麻烦了，就让ai润了下色，主要是面向加强基础理解的部分，针对面试被拷打理解的时候，所以不适合入门学习，但作为要点复习还算不错。

本文从基础开始逐步深入，聚焦 React 的核心定位、环境搭建（Create React App）、JSX 语法 这三个入门关键知识点，每个知识点均按 “概念→用法→代码示例→注意点” 的结构讲解，最后补充面试考点分析。

一、React 核心定位（为什么学 React？）

1. 概念

React 是由 Facebook（现 Meta）开发并维护的 声明式、组件化 前端 JavaScript 库，核心目标是 “高效构建用户界面（UI）”。

• 声明式：你只需描述 “UI 应该是什么样”（比如 “列表数据变了，UI 就显示新列表”），无需手动操作 DOM 实现 “怎么变”；
• 组件化：将复杂 UI 拆分为独立、可复用的 “组件”（如按钮、导航栏、商品卡片），降低开发复杂度，符合大厂 “高内聚、低耦合” 的代码规范。

2. 用法

React 不直接操作 DOM，而是通过 虚拟 DOM（Virtual DOM） 优化渲染：

1. 首次渲染时，React 将组件转化为虚拟 DOM（内存中的 JavaScript 对象）；
2. 当数据变化时，生成新的虚拟 DOM；
3. 通过 “Diff 算法” 对比新旧虚拟 DOM 的差异，只更新真实 DOM 中变化的部分，减少性能开销。

3. 代码示例（无实际输出，理解核心逻辑）

 

// 核心逻辑示意（无需手写，React 内部实现）
// 1. 首次渲染：虚拟 DOM -> 真实 DOM
const oldVirtualDOM = React.createElement('div', null, 'Hello React');
ReactDOM.createRoot(document.getElementById('root')).render(oldVirtualDOM);

// 2. 数据变化：生成新虚拟 DOM
const newVirtualDOM = React.createElement('div', null, 'Hello React! 数据更新了');

// 3. React 内部 Diff 对比，只更新文本内容，不重新创建 div 标签
ReactDOM.createRoot(document.getElementById('root')).render(newVirtualDOM);

4. 注意点

• React 是 “库” 不是 “框架”：它只负责 UI 层，需搭配路由（React Router）、状态管理（Redux）等库实现完整项目，而 Vue/Angular 是包含路由、状态管理的完整框架；
• 虚拟 DOM 是 “性能优化手段”，但并非所有场景都比直接操作 DOM 快（如单次大量 DOM 操作），需结合实际场景判断；
• React 18 后推荐使用 createRoot 替代旧版 ReactDOM.render，需注意版本差异。

二、React 环境搭建（Create React App）

1. 概念

Create React App（简称 CRA）是 React 官方提供的 零配置脚手架工具，能快速生成标准化的 React 项目结构，包含 Webpack 打包、Babel 转译、热更新等功能，无需手动配置构建工具（大厂实习中，小型项目或 Demo 常用 CRA 初始化）。

2. 用法

1. 确保安装 Node.js（推荐 v14+，大厂开发环境通常统一 Node 版本）；
2. 打开终端，执行命令创建项目；
3. 进入项目目录，启动开发服务器；
4. 访问 http://localhost:3000 查看默认页面。

3. 代码示例（终端命令）

# 1. 创建 React 项目（项目名：react-demo，可自定义）
npx create-react-app react-demo

# 2. 进入项目目录
cd react-demo

# 3. 启动开发服务器（热更新：修改代码后页面自动刷新）
npm start

# 4. 打包生产环境代码（部署时使用，输出到 build 文件夹）
npm run build

项目核心目录结构（大厂开发需熟悉的关键文件）：

 

react-demo/
├── public/          # 静态资源（如 index.html、图标）
│   └── index.html   # 入口 HTML，React 会将 UI 注入到 id="root" 的 div 中
├── src/             # 源码目录（核心开发区域）
│   ├── App.js       # 根组件（所有页面/组件的入口）
│   ├── index.js     # 入口 JS，将 App 组件渲染到 index.html 的 root 节点
│   └── App.css      # App 组件的样式文件
└── package.json     # 项目依赖、脚本配置（如 start/build 命令）

4. 注意点

• 避免全局安装 create-react-app：使用 npx 可直接调用最新版本，防止旧版本导致的兼容性问题；
• 开发中不要修改 public/index.html 中的 root 节点：React 依赖该节点注入 UI，修改可能导致渲染失败；
• 若需自定义 Webpack/Babel 配置，可执行 npm run eject 暴露配置文件（但不可逆，大厂中一般用 craco 等工具在不 eject 的情况下修改配置）。

三、JSX 语法（React 模板语法）

1. 概念

JSX（JavaScript XML）是 React 定义 UI 的 语法扩展，允许在 JavaScript 代码中直接写 HTML 风格的标签，本质是 React.createElement 函数的 “语法糖”（大厂代码中 99% 的 UI 都是用 JSX 编写，必须熟练掌握）。

2. 用法

• 在 JSX 中，HTML 标签直接写（如 <div>、<button>）；
• 若要嵌入 JavaScript 表达式（变量、函数调用、三元运算等），需用 {} 包裹；
• JSX 标签必须有一个 “根节点”（如 <div> 或 React 16+ 提供的 <> 空片段，避免多余 DOM 节点）；
• 标签属性名需用驼峰式（如 className 替代 HTML 的 class，onClick 替代 onclick）。

3. 代码示例（src/App.js 改造）

import React from 'react';
import './App.css';

// 定义组件（函数组件，后续会详细讲）
function App() {
  // 1. 定义 JavaScript 变量
  const name = 'React 学习者';
  const isShowGreeting = true;
  const user = { age: 22 };

  // 2. 定义函数（可在 JSX 中调用）
  const getWelcomeMsg = () => {
    return `欢迎 ${name}，你的年龄是 ${user.age}`;
  };

  return (
    // 根节点：用 <> 空片段避免多余 div
    <>
      {/* JSX 注释：必须写在 {} 中 */}
      <h1 style={{ color: 'blue', fontSize: '24px' }}>
        {getWelcomeMsg()} {/* 嵌入函数调用 */}
      </h1>
      {/* 嵌入三元运算：控制元素显示/隐藏 */}
      {isShowGreeting ? <p>这是 JSX 语法示例</p> : null}
      {/* 驼峰式属性：className 替代 class，onClick 替代 onclick */}
      <button className="btn" onClick={() => alert('按钮被点击')}>
        点击我
      </button>
    </>
  );
}

export default App;

输出结果（浏览器页面）：

• 蓝色、24px 大小的标题：“欢迎 React 学习者，你的年龄是 22”；
• 下方显示段落：“这是 JSX 语法示例”；
• 一个按钮，点击后弹出 “按钮被点击” 的提示框。

4. 注意点

• JSX 中不能直接写 if/for 语句（需用三元运算、map 等表达式替代）；
• 标签必须闭合：单标签如 <img> 需写为 <img />（否则报错）；
• 样式传递：内联样式需用 style={{ key: value }}（双层大括号，外层是 JS 表达式，内层是样式对象），且值需是字符串（如 fontSize: '24px' 不能写 24）；
• 防止 XSS 攻击：React 会自动转义 JSX 中的内容，若需插入原始 HTML，需用 dangerouslySetInnerHTML={{ __html: 内容 }}（慎用，可能有安全风险，大厂中需确认内容安全后使用）。

四、实习面试考点分析

1. 问答题

考点 1：React 中虚拟 DOM 的原理是什么？为什么要用虚拟 DOM？

答案：

• 原理：虚拟 DOM 是内存中的 JavaScript 对象，对应真实 DOM 的结构；React 首次渲染时将组件转化为虚拟 DOM，数据变化时生成新虚拟 DOM，通过 Diff 算法对比新旧虚拟 DOM 的差异，最终只更新真实 DOM 中变化的部分。
• 原因：
  1. 减少真实 DOM 操作：真实 DOM 操作性能开销大，虚拟 DOM 只更新差异部分，提升渲染效率；
  2. 跨平台能力：虚拟 DOM 不依赖具体平台，可通过 React Native 等框架将虚拟 DOM 转化为原生组件（如 iOS/Android 控件），实现 “一次编写，多端运行”；
  3. 简化开发：开发者无需手动操作 DOM，只需关注数据和 UI 映射关系，降低开发复杂度。

考点 2：JSX 和 HTML 的区别是什么？（高频题）

答案：

1. 属性名差异：JSX 用驼峰式命名（如 className、onClick），HTML 用短横线命名（如 class、onclick）；
2. 注释语法：JSX 注释需写在 {/* 注释内容 */} 中，HTML 注释是 <!-- 注释内容 -->；
3. 表达式嵌入：JSX 可通过 {} 嵌入 JavaScript 表达式，HTML 无法直接嵌入 JS；
4. 标签闭合：JSX 要求所有标签必须闭合（如 <img />），HTML 中部分标签可省略闭合（如 <img>）；
5. 样式处理：JSX 内联样式需用 style={{ key: value }}，HTML 用 style="key: value;"；
6. 关键字冲突：JSX 避免使用 JavaScript 关键字（如 class 是 JS 关键字，故用 className 替代）。

2. 代码题

考点：用 JSX 实现一个 “条件渲染 + 列表渲染” 的组件（字节实习常考基础题）

题目：给定数组 const users = [{ id: 1, name: '张三', isActive: true }, { id: 2, name: '李四', isActive: false }]，要求：

1. 渲染一个标题 “用户列表”；
2. 遍历 users 数组，渲染每个用户的姓名；
3. 若用户 isActive 为 true，姓名显示为绿色；否则为灰色；
4. 点击用户姓名，弹出该用户的 id。

答案代码：

 

import React from 'react';

function UserList() {
  const users = [
    { id: 1, name: '张三', isActive: true },
    { id: 2, name: '李四', isActive: false }
  ];

  return (
    <div>
      <h2>用户列表</h2>
      {/* 列表渲染：用 map 遍历数组，必须加 key（唯一标识，提升 Diff 效率） */}
      <ul>
        {users.map((user) => (
          <li 
            key={user.id}  {/* key 必须唯一，优先用 id，不用 index（避免数组排序后 Diff 错误） */}
            style={{ color: user.isActive ? 'green' : 'gray' }}  {/* 条件样式 */}
            onClick={() => alert(`用户 ID：${user.id}`)}  {/* 点击事件，传递用户 id */}
          >
            {user.name}  {/* 渲染用户名 */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

代码分析（面试官关注的点）：

• 列表渲染：用 map 遍历数组（不能用 for 循环），且必须添加 key 属性（key 是 React 识别列表项的唯一标识，避免渲染错误，大厂中若遗漏 key 会被指出不规范）；
• 条件渲染：通过三元运算控制 style.color，逻辑清晰（也可抽成函数，如 getColor(user.isActive)，代码更易维护）；
• 事件绑定：onClick 中用箭头函数传递 user.id（若直接写 onClick={alert(user.id)}，会在组件渲染时立即执行，而非点击时执行，这是常见错误，面试官会重点考察）。