Web开发 04
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 语法、逻辑的疑问，也可以接着聊聊呀 。