首页 › React › React 基础

什么是 React

React 是一个用于构建用户界面的 JavaScript 库，由 Meta（Facebook）开发和维护。它采用组件化和声明式的编程模型。

声明式 vs 命令式

// 命令式（jQuery）：告诉浏览器"怎么做"
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'container';
document.body.appendChild(div);

// 声明式（React）：告诉 React "要什么"
function App() {
  return <div className="container">Hello</div>;
}

虚拟 DOM

React 通过虚拟 DOM 的对比（Diff）算法，仅更新真正变化的 DOM 节点，避免全量重绘。

创建项目

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

# 使用 Create React App（较慢，新项目不推荐）
npx create-react-app my-app --template typescript

项目结构

my-app/
├── index.html                  # HTML 入口
├── src/
│   ├── main.tsx                # 应用入口
│   ├── App.tsx                 # 根组件
│   ├── App.css
│   └── vite-env.d.ts
├── vite.config.ts
├── tsconfig.json
├── package.json

第一个组件

// src/main.tsx
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />
)

// src/App.tsx
function App() {
  const name = "React"

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>当前时间：{new Date().toLocaleString()}</p>
    </div>
  )
}

export default App

React 18 新特性

• 并发渲染（Concurrent）：React 可中断渲染，优先处理高优先级更新。
• Automatic Batching：多个 setState 自动批量合并。
• Suspense：支持服务端渲染的数据获取。
• useId：生成唯一 ID，服务端渲染友好。

小结

• React 是声明式 UI 库，核心思想：组件化 + 虚拟 DOM。
• Vite 初始化：npm create vite@latest my-app -- --template react-ts。
• createRoot + .render() 挂载 React 应用。
• React 18 并发模式让 UI 响应更流畅。

下一节：JSX 与组件

贡献者: 布欧-Lewyon