React 前端框架简介
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>
);
}
实现一个基础应用：计数器
- 创建入口文件
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
- 创建主组件
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;
- 启动项目
确保安装了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 指南