AICODING / DEMO
下载 Markdown 原文 ↗运行示例 ↗

什么是 React？

📖 概述

React 是 Facebook（现 Meta）于 2013 年开源的 JavaScript 库，用于构建用户界面，特别是单页应用。它专注于视图层，采用组件化开发模式，使用虚拟 DOM 提高渲染性能。React 已成为前端开发的主流框架之一。

🌟 核心特性

1. 组件化开发

  • 将 UI 拆分为独立、可复用的组件
  • 每个组件管理自己的状态和逻辑
  • 支持组件嵌套和组合

2. JSX 语法

  • 在 JavaScript 中写 HTML 语法
  • 编译后转换为 React.createElement()
  • 提供更直观的开发体验

3. 虚拟 DOM

  • 内存中维护一份 DOM 树副本
  • 数据变化时先更新虚拟 DOM
  • 通过 diff 算法高效更新真实 DOM

4. 单向数据流

  • 数据从父组件流向子组件
  • 通过 props 传递数据
  • 通过回调函数处理子组件事件

5. Hooks 特性

  • 在函数组件中使用状态
  • useState - 状态管理
  • useEffect - 副作用处理
  • useContext - 上下文

🏗️ 项目结构

my-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/     # 组件目录
│   ├── pages/         # 页面组件
│   ├── hooks/         # 自定义 Hooks
│   ├── App.js         # 根组件
│   ├── index.js       # 入口文件
│   └── index.css      # 全局样式
├── package.json
└── README.md

💻 基本语法

1. 函数组件

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

2. 类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

3. 使用 Hooks

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

4. 条件渲染

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>欢迎回来！</h1>
  }
  return <h1>请登录</h1>
}

5. 列表渲染

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

🎯 React Hooks

useState

const [state, setState] = useState(initialValue)

useEffect

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑
  }
}, [dependencies])

useContext

const value = useContext(MyContext)

自定义 Hook

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  const increment = () => setCount(count + 1)
  return { count, increment }
}

📦 核心生态

  • React Router：路由管理
  • Redux/Zustand：状态管理
  • React Query：服务器状态管理
  • Next.js：全栈 React 框架
  • Create React App：项目脚手架
  • Vite：新一代构建工具
  • React Native：跨平台移动开发

🚀 开发流程

1. 创建项目

# 使用 Create React App
npx create-react-app my-app
cd my-app
npm start

# 使用 Vite（推荐）
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

2. 构建项目

npm run build

3. 项目结构示例

App.js

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>React Demo</h1>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

export default App

✅ 优缺点

优点

  • ✅ 生态丰富，资料完善
  • ✅ 组件化开发，代码复用性强
  • ✅ 虚拟 DOM 提升性能
  • ✅ Hooks 让函数组件更强大
  • ✅ 支持 TypeScript
  • ✅ 活跃的社区支持

缺点

  • ❌ 学习曲线较陡峭（JSX、Hooks 等概念）
  • ❌ 需要配置大量工具（构建、测试等）
  • ❌ 更新速度快，文档有时跟不上
  • ❌ 过度灵活可能导致代码结构混乱

🎯 适用场景

  • 大型复杂单页应用
  • 需要丰富生态系统的项目
  • 对性能要求较高的应用
  • 需要 TypeScript 支持的项目
  • 团队有 React 开发经验

📚 学习资源

🔗 相关链接

本页目录 ↑