Web开发 04-EW帮帮网

1 React 库

React 是由 Meta（原 Facebook）开发并维护的一个用于构建用户界面的 JavaScript 库。

它采用组件化的开发模式，将复杂的 UI 拆分成多个独立、可复用的小部件（即组件），从而提高代码的可维护性和可扩展性。

React 的核心概念

组件（Components）
React 应用的基本构建块，分为类组件和函数组件：

jsx

// 类组件示例
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 函数组件示例（现代 React 推荐写法）
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Props（属性）
是父组件向子组件传递数据的方式，是只读的（不可修改）：

jsx
```
// 父组件中使用子组件并传递 props
<Welcome name="Alice" />
```

State（状态）
组件内部的动态数据，用于处理交互逻辑和数据变化：

jsx

// 类组件中的 state
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Count: {this.state.count}
      </button>
    );
  }
}

// 函数组件中的 state（使用 useState Hook）
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

React 的特点

声明式语法：通过 JSX 描述 UI 结构，直观易懂。
单向数据流：数据流动方向清晰，便于调试和维护。
虚拟 DOM：通过比对差异高效更新真实 DOM，提升性能。
生态丰富：配套工具（如 React Router、Redux）完善。

与其他框架的对比

库 vs 框架：React 是库（专注视图层），而 Angular、Vue 是完整框架。
灵活性：React 更灵活但需要自行整合生态工具。

2 JSX是什么？

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，用于在 React 中简洁地描述 UI 结构。它看起来像 XML/HTML，但本质上仍然是 JavaScript，最终会被编译为普通的 JavaScript 代码。

核心特点

语法糖
JSX 是 React.createElement() 的语法糖，使代码更易读、易写：

jsx

// JSX 写法
const element = <h1 className="title">Hello, world!</h1>;

// 编译后的 JavaScript
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello, world!'
);

嵌入表达式
可以在 JSX 中使用 {} 嵌入任意 JavaScript 表达式：

jsx
```
const name = "Alice";
const element = <h1>Hello, {name.toUpperCase()}!</h1>;
```

属性使用
可以使用引号（字符串值）或花括号（表达式）传递属性：

jsx

// 字符串属性
const element = <img src="profile.jpg" alt="Profile" />;

// 表达式属性
const width = 200;
const element = <img src="profile.jpg" style={{ width }} />;

返回多个元素
必须用一个根元素包裹（或使用 Fragment）：

jsx

// 正确：使用根元素
const element = (
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
);

// 正确：使用 Fragment（空标签）
const element = (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

与 HTML 的差异

属性名不同
JSX 使用驼峰命名法（如 className 代替 class，onClick 代替 onclick）：

jsx
```
<div className="container" onClick={handleClick} />
```
表达式 vs 字符串
JSX 属性值可以直接是 JavaScript 表达式，而不需要拼接字符串：

jsx
```
// 直接嵌入表达式
<MyComponent disabled={isDisabled} />
```

必须闭合标签
所有标签必须显式闭合：

jsx

// 正确
<input type="text" />

// 错误（未闭合）
<input type="text">

编译过程

JSX 需要通过 Babel 等工具编译为 JavaScript：

开发环境中编写 JSX
构建工具（如 Webpack）将 JSX 编译为 React.createElement()
浏览器执行编译后的 JavaScript

优势

直观描述 UI：代码结构与最终 DOM 结构高度一致
类型安全：在 TypeScript 中可进行类型检查
静态分析：便于工具优化和错误检查

3 为什么要学习React ？

学习前端 Web 开发时接触 React，主要有以下几方面原因，来帮你理解为啥课程会引入它：

一、行业应用广泛

React 是前端三大框架（React、Vue、Angular ）之一，在国内外众多大厂（如 Meta、阿里、字节等）的项目里广泛应用，掌握它能让你未来求职、参与实际项目时，有更多适配岗位和业务的能力，是前端工程师必备技能储备。

二、组件化开发思想

它以组件化方式构建 UI，把复杂页面拆成一个个独立、可复用的组件（比如页面头部、按钮、评论区等都能做组件）。这种开发模式让代码结构清晰、便于维护和协作，能帮你培养 “拆分复杂需求、模块化开发” 的思维，不管之后用不用 React，组件化思想在前端开发中都很重要。

三、与前沿技术生态关联

React 生态丰富，围绕它有 React Router（处理路由）、Redux（管理状态）、Next.js（服务端渲染等场景）等工具和框架。学习 React 能让你逐步接触到更完整的前端技术栈，为深入学习前端工程化、全栈开发等进阶内容打基础。

四、理解数据驱动视图

React 基于 “数据驱动视图” 理念，通过 props 和 state 管理数据，数据变化时自动更新 UI 。这和传统手动操作 DOM 方式不同，能让你体会更高效、更现代的前端开发模式，理解如何让数据和界面联动，提升开发效率和页面性能。

简单说，学 React 不只是学一个库，更是接触行业常用技术、培养核心开发思想、融入前端生态的重要一步，对提升前端开发能力和职业竞争力很有帮助呀，坚持学下去会有很多收获哒～要是学习中碰到具体 React 语法、逻辑的疑问，也可以接着聊聊呀。

Web开发 04