React

→ 返回 JavaScript框架

Meta 开源的声明式 UI 库，基于组件和单向数据流。核心理念：UI = f(state)，状态驱动视图更新。

---

核心概念

JSX

const el = <h1 className="title">Hello, {name}</h1>
// 编译为
const el = React.createElement("h1", { className: "title" }, "Hello, ", name)

组件

// 函数组件（现代推荐）
function Card({ title, children }) {
  return <div className="card"><h2>{title}</h2>{children}</div>
}

Props & State

• Props：父 → 子的只读数据，单向流动
• State：组件内部可变数据，变更触发重新渲染

---

Hooks

Hook	用途
useState	局部状态
useEffect	副作用（数据请求、订阅）
useContext	消费 Context
useRef	DOM 引用 / 持久化值（不触发渲染）
useMemo	缓存计算结果
useCallback	缓存函数引用
useReducer	复杂状态逻辑

function Counter() {
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    document.title = `count: ${count}`
    return () => { document.title = "app" } // cleanup
  }, [count])
 
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

自定义 Hook

function useFetch(url) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch(url).then(r => r.json()).then(d => {
      setData(d)
      setLoading(false)
    })
  }, [url])
 
  return { data, loading }
}

---

状态管理

方案	适用场景
useState / useReducer	组件局部状态
Context API	跨层级轻量共享（主题、语言）
Zustand	轻量全局状态，推荐
Jotai	原子化状态，细粒度订阅
Redux Toolkit	大型项目，复杂状态图

// Zustand
import { create } from "zustand"
 
const useStore = create(set => ({
  count: 0,
  inc: () => set(s => ({ count: s.count + 1 })),
}))

---

组件模式

受控 vs 非受控

// 受控：value 由 state 管理
<input value={text} onChange={e => setText(e.target.value)} />
 
// 非受控：通过 ref 读取 DOM 值
const ref = useRef()
<input ref={ref} defaultValue="初始值" />

复合组件

// 父组件持有状态，子组件通过 Context 消费
<Tabs defaultValue="a">
  <Tabs.List>
    <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="a">内容 A</Tabs.Content>
</Tabs>

---

性能优化

// memo：避免父组件渲染时不必要的子组件重渲染
const Child = React.memo(({ value }) => <div>{value}</div>)
 
// lazy + Suspense：路由级代码分割
const Page = React.lazy(() => import("./Page"))
<Suspense fallback={<Spinner />}><Page /></Suspense>

Virtual DOM diffing：React 通过比较虚拟 DOM 树找出最小 DOM 操作集，批量更新真实 DOM。

---

生态

分类	工具
构建	Vite（推荐）、CRA（已弃用）
全栈框架	Next.js（SSR/SSG）、Remix
路由	React Router v6、TanStack Router
数据请求	TanStack Query、SWR
表单	React Hook Form
UI 组件库	shadcn/ui、Ant Design、MUI
测试	Vitest + Testing Library

---

React vs Vue

维度	React	Vue
范式	库（只管 UI）	渐进式框架
模板	JSX（JS 中写 HTML）	单文件组件（.vue）
响应式	不可变 state + 手动触发	自动追踪依赖
学习曲线	较陡（需理解 Hooks 规则）	相对平缓
生态	更大，React Native	Nuxt.js

→ Preact（React 的轻量替代） → Vue