React 前端框架>前端框架简介

React 是一个高效、灵活且开源的 JavaScript 库，用于构建用户界面 (UI)。
它专注于 视图层，通常与其他工具结合使用来开发复杂的前端应用。

---

为什么选择 React？

• 轻量灵活：仅负责视图层，适配多种框架或工具链。
• 组件化：UI 被拆分为独立模块，代码更可维护。
• 高效更新：基于虚拟 DOM 技术，最小化页面重绘。
• 生态成熟：拥有丰富的工具链和社区支持。

---

核心概念速览

1. JSX —— 简化 UI 声明

JSX 是 React 独有的语法扩展，允许你在 JavaScript 中直接书写 HTML 元素。

const greeting = <h1>欢迎使用 React！</h1>;

2. 组件 —— 构建模块化 UI

React 的每一部分 UI 都是一个组件。组件可以是函数或类：

• 函数组件

function Welcome() {return <h2>欢迎！</h2>;
}

• 类组件

class Welcome extends React.Component {render() {return <h2>欢迎！</h2>;}
}

3. Props 和 State

• Props: 外部传入，组件不可修改。
• State: 内部管理，随事件动态更新。

4. React Hooks

使用 Hooks，函数组件也能管理状态和副作用。

import React, { useState } from "react";function Counter() {const [count, setCount] = useState(0);return (<div><button onClick={() => setCount(count + 1)}>点击 {count}</button></div>);
}

---

实现一个基础应用：计数器

1. 创建入口文件 index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));

2. 创建主组件 App.js

import React, { useState } from "react";function App() {const [count, setCount] = useState(0);return (<div><h1>计数器</h1><p>当前值：{count}</p><button onClick={() => setCount(count + 1)}>增加</button><button onClick={() => setCount(count - 1)}>减少</button></div>);
}export default App;

3. 启动项目
   确保安装了 create-react-app 工具，然后运行：

npx create-react-app my-counter
cd my-counter
npm start

浏览器会自动打开 http://localhost:3000，展示你的 React 计数器应用。

---

文件结构和组织

以下是 React 项目推荐的文件组织：

src/
├── components/    # 存放可复用组件
├── App.js         # 主功能组件
├── index.js       # 入口文件
├── styles/        # 样式文件
└── utils/         # 工具函数

---

高级特性概述

• Context: 用于在组件树中共享数据（如主题、语言）。
• React Router: 为单页应用提供路由功能。
• Redux / Zustand: 适合管理复杂的全局状态。
• React Server Components: 用于服务器端渲染，提升首屏性能。

---

常见问题与优化

1. 性能优化

• 使用 React.memo 防止不必要的组件重新渲染。
• 拆分组件，按需加载模块 (Code Splitting)。

2. 调试工具

安装 Chrome 插件 React Developer Tools，方便调试组件结构和状态。

---

资源推荐

• React 官方文档
• React 中文文档
• Create React App 指南