React是什么？

React 是什么？

React 是一个用于 构建用户界面（UI） 的 前端 JavaScript 库，它由 Facebook（Meta） 开发，并用于构建 单页应用（SPA） 和 组件化 UI。

---

为什么用 React？

1. 组件化开发

React 允许你将页面拆分成 多个可复用的组件：

function Button() {
  return <button>点击我</button>;
}

组件可以组合：

function App() {
  return (
    <div>
      <h1>欢迎使用 React</h1>
      <Button />
    </div>
  );
}

---

2. JSX 语法（像写 HTML 一样）

React 使用 JSX（JavaScript XML） 来写 UI：

const element = <h1>Hello, React!</h1>;

JSX 不是 HTML，它最终会被编译成 JavaScript。

---

3. 虚拟 DOM（Virtual DOM）

React 使用 Virtual DOM 来优化渲染：

1. 先创建 Virtual DOM，然后对比变化
2. 只更新变化的部分，避免全局重新渲染
3. 更快、更高效

---

4. 响应式数据绑定（State & Props）

State（状态）用于组件的动态数据：

import { useState } from "react";

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

Props（属性）用于组件之间传递数据：

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Welcome name="Alice" />;
}

---

React 的核心概念

1. 组件（Component）

组件是 React 的基本单位，分为：

• 函数组件（推荐）
• 类组件（React 16.8 之后用 Hooks 替代）

函数组件示例：

function Greeting() {
  return <h1>Hello, React!</h1>;
}

---

2. 事件处理

React 事件和 HTML 不一样，需要用 {}：

function Button() {
  const handleClick = () => alert("按钮被点击了！");
  return <button onClick={handleClick}>点击我</button>;
}

---

3. 条件渲染

使用 if 或 三元运算符：

function UserStatus({ isLoggedIn }) {
  return isLoggedIn ? <h1>欢迎回来</h1> : <h1>请登录</h1>;
}

---

4. 列表渲染

使用 .map() 遍历数组：

const users = ["Alice", "Bob", "Charlie"];
function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

---

5. Hooks（React 16.8+ 新特性）

React Hooks 让你在 函数组件 中使用状态：

import { useState } from "react";

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

---

React 项目结构

一个标准的 React 项目结构：

my-app/
├── src/
│   ├── components/   # 组件
│   │   ├── Button.tsx
│   │   ├── Header.tsx
│   ├── App.tsx       # 主要组件
│   ├── index.tsx     # 入口文件
├── public/
│   ├── index.html    # HTML 文件
├── package.json      # 依赖
├── tsconfig.json     # TypeScript 配置

---

React 的优点

组件化开发 —— 代码复用更高
JSX 语法 —— 更易读、更直观
虚拟 DOM —— 更新更快、更高效
响应式 UI —— 状态驱动视图

---

结论

• React 是一个用于构建 UI 的 JavaScript 库
• 采用组件化开发，提高代码复用性
• JSX 让 UI 代码更直观
• 使用 Hooks 让函数组件支持状态
• 使用虚拟 DOM 提高渲染性能

React 适用于单页应用（SPA），并且是前端开发的主流框架之一！