前端框架 on Liangweidong's blog

React Hooks 完全指南：15 个核心 Hook 一网打尽

Mon, 15 Apr 2024 00:00:00 +0800

为什么写这篇：React Hooks 2019-02 在 16.8 正式发布，5 年内彻底改变了 React 的写法。从 useState 到 React 19 的 useActionState，Hooks 已经从"新特性"变成"默认写法"。本文按"开箱即用频次"梳理 15 个核心 Hook，给出核心概念、最佳实践与常见坑。

适用读者：刚学 React Hooks 的同学；想系统梳理 18/19 新 Hook 的中级工程师；从 class 组件迁过来的老 React。

前置知识：理解 JSX、函数组件、props。

Hooks 设计哲学
useState：状态管理基石
useReducer：复杂状态的"action + reducer"模式
useEffect：副作用与清理
useLayoutEffect：DOM 更新同步完成后立即执行
useContext：跨组件共享数据
useRef：DOM 引用与持久化数据
useImperativeHandle：自定义 ref 暴露的接口
useMemo & useCallback：缓存计算结果与函数引用
useDebugValue：自定义 Hook 在 DevTools 中的标签
useId：跨服务端/客户端的唯一 ID
useTransition：标记非紧急任务
React 19 新 Hook 速览
自定义 Hook：组合已有 Hook 复用逻辑
Hooks 三大规则

1. Hooks 设计哲学

Hooks 解决的核心问题：让函数组件拥有 class 组件的能力（state、生命周期、context），同时让代码更简洁、更好复用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// ❌ class 组件：逻辑散在生命周期里
class UserList extends React.Component {
 state = { users: [] }
 componentDidMount() {
 fetch('/api/users').then(r => r.json()).then(users => this.setState({ users }))
 }
 render() {
 return <ul>{this.state.users.map(u => <li>{u.name}</li>)}</ul>
 }
}

// ✅ 函数组件 + Hook：逻辑聚拢、可复用
function UserList() {
 const [users, setUsers] = useState([])
 useEffect(() => {
 fetch('/api/users').then(r => r.json()).then(setUsers)
 }, [])
 return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

2. useState：状态管理基石

1

const [count, setCount] = useState(0)

2.1 初始值是函数（昂贵计算）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function HeavyComputationComponent() {
 const expensiveInitialValue = () => {
 let sum = 0
 for (let i = 0; i < 1_000_000_000; i++) sum += i
 return sum % 100
 }
 // 函数只在首次渲染执行一次
 const [value, setValue] = useState(expensiveInitialValue)
 return <div>{value}</div>
}

2.2 函数式更新

1
2
3
4


function handleClickMultipleUpdates() {
 setCount(prev => prev + 1)
 setCount(prev => prev + 1) // 最终 count = 2（不是 1）
}

Why：React 18 的 setState 是批处理 + 异步的。连续调 3 次 setCount(c => c+1) 拿到的是"3 次累加后的 count"。

2.3 对象/数组不可变更新

1
2
3
4
5
6
7


const [user, setUser] = useState({ name: '张三', age: 20 })

// ✅ 正确：展开旧对象 + 改一个属性
setUser(prev => ({ ...prev, age: prev.age + 1 }))

const [items, setItems] = useState(['苹果', '香蕉'])
setItems(prev => [...prev, '橙子'])

直接修改原对象不会触发重渲染——React 用引用比较判断要不要更新。

3. useReducer：复杂状态的"action + reducer"模式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const initialState = { count: 0, step: 1 }

function reducer(state, action) {
 switch (action.type) {
 case 'increment': return { ...state, count: state.count + state.step }
 case 'decrement': return { ...state, count: state.count - state.step }
 case 'setStep': return { ...state, step: action.payload }
 default: throw new Error('unknown action')
 }
}

function Counter() {
 const [state, dispatch] = useReducer(reducer, initialState)
 return (
 <>
 Count: {state.count}
 <button onClick={() => dispatch({ type: 'increment' })}>+</button>
 <button onClick={() => dispatch({ type: 'setStep', payload: 5 })}>step=5</button>
 </>
 )
}

vs useState：state 之间有联动、依赖前一个 state、有多种"动作"时用 useReducer 更清晰。

4. useEffect：副作用与清理

1
2
3
4
5
6
7
8
9


useEffect(() => {
 // 副作用逻辑
 console.log('组件已渲染或依赖项已更新')

 return () => {
 // 可选：清理函数
 console.log('清理')
 }
}, [dep1, dep2])

4.1 三个常见用法

依赖项	行为
不传	每次渲染后都执行（通常不要）
`[]`	只在挂载/卸载时执行（一次）
`[a, b]`	`a` 或 `b` 变化时执行

4.2 清理函数：避免内存泄漏

1
2
3
4


useEffect(() => {
 const timer = setInterval(() => console.log('tick'), 1000)
 return () => clearInterval(timer) // 卸载时清理
}, [])

常见需要清理的场景：定时器、事件监听、网络请求（AbortController）、WebSocket、订阅。

4.3 AbortController 取消请求

1
2
3
4
5
6
7
8


useEffect(() => {
 const controller = new AbortController()
 fetch('/api/data', { signal: controller.signal })
 .then(r => r.json())
 .then(setData)
 .catch(e => { if (e.name !== 'AbortError') console.error(e) })
 return () => controller.abort()
}, [])

5. useLayoutEffect：DOM 更新同步完成后立即执行

1
2
3
4
5


useLayoutEffect(() => {
 // 同步执行，浏览器还没绘制
 ref.current.style.opacity = '0'
 // 立即读取布局相关数据
}, [data])

vs useEffect：

useEffect 异步，浏览器已绘制完才跑

useLayoutEffect 同步，DOM 更新完、浏览器重绘前立即跑

适用场景：读 DOM 布局（offsetHeight、scrollTop）、强制同步重排避免视觉抖动。

陷阱：服务端渲染（SSR）会发警告。建议优先用 useEffect，只有当出现"渲染闪烁"时才换 useLayoutEffect。

6. useContext：跨组件共享数据

解决 “props 透传"问题——避免一层层 <A><B><C>...</C></B></A> 手动传 props。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// 1. 创建 Context
const ThemeContext = createContext({ theme: 'light', toggle: () => {} })

// 2. Provider 包裹
function App() {
 const [theme, setTheme] = useState('light')
 return (
 <ThemeContext.Provider value={{ theme, toggle: () => setTheme(t => t === 'light' ? 'dark' : 'light') }}>
 <Page />
 </ThemeContext.Provider>
 )
}

// 3. 子组件消费
function Button() {
 const { theme, toggle } = useContext(ThemeContext)
 return <button onClick={toggle}>{theme === 'light' ? '🌞' : '🌙'}</button>
}

坑：Context 的 value 每次渲染都是新对象，会让所有消费者重渲染。优化：用 useMemo 包装 value。

1
2


const value = useMemo(() => ({ theme, toggle }), [theme])
return <ThemeContext.Provider value={value}>...</ThemeContext.Provider>

7. useRef：DOM 引用与持久化数据

7.1 获取 DOM 引用

1
2
3
4
5
6
7
8
9


function TextInput() {
 const inputRef = useRef<HTMLInputElement>(null)

 useEffect(() => {
 inputRef.current?.focus() // 自动聚焦
 }, [])

 return <input ref={inputRef} />
}

7.2 持久化数据（不触发重渲染）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


function Timer() {
 const [count, setCount] = useState(0)
 const intervalRef = useRef<number | null>(null)

 const start = () => {
 intervalRef.current = window.setInterval(() => {
 setCount(c => c + 1)
 }, 1000)
 }

 const stop = () => {
 if (intervalRef.current) clearInterval(intervalRef.current)
 }

 return (
 <>
 <p>{count}s</p>
 <button onClick={start}>开始</button>
 <button onClick={stop}>停止</button>
 </>
 )
}

vs useState：改 ref.current 不触发 重渲染——适合"我需要存个值，但改了不更新 UI”。

8. useImperativeHandle：自定义 ref 暴露的接口

配合 forwardRef 使用，让父组件通过 ref 访问子组件的特定方法（隐藏内部实现）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


const FancyInput = forwardRef((props, ref) => {
 const inputRef = useRef<HTMLInputElement>(null)

 useImperativeHandle(ref, () => ({
 focus: () => inputRef.current?.focus(),
 clear: () => { if (inputRef.current) inputRef.current.value = '' }
 }))

 return <input ref={inputRef} {...props} />
})

// 父组件
function Parent() {
 const ref = useRef<{ focus: () => void; clear: () => void }>(null)
 return (
 <>
 <FancyInput ref={ref} />
 <button onClick={() => ref.current?.focus()}>聚焦</button>
 <button onClick={() => ref.current?.clear()}>清空</button>
 </>
 )
}

Why：子组件自己决定暴露什么 API，父组件不需要知道内部 DOM 结构。

9. useMemo & useCallback：缓存计算结果与函数引用

9.1 useMemo：缓存"计算结果"

1
2
3


const expensiveValue = useMemo(() => {
 return data.reduce((sum, item) => sum + item.price * item.qty, 0)
}, [data]) // data 变才重算

9.2 useCallback：缓存"函数引用"

1
2
3
4
5
6
7
8


const handleClick = useCallback((id: string) => {
 setItems(items => items.filter(i => i.id !== id))
}, []) // 函数永远不重创建

// 子组件配合 React.memo
const Child = memo(function Child({ onClick, value }) {
 return <button onClick={() => onClick(value)}>click</button>
})

三者联动：useMemo 计算 + useCallback 传函数 + React.memo 阻止子组件重渲染——三件套只在大列表/复杂组件才有用。

常见误区：每个函数都包 useCallback——会拖慢性能（依赖比较也是开销）。只在该函数被传给 memo 化的子组件时才用。

10. useDebugValue：自定义 Hook 在 DevTools 中的标签

1
2
3
4
5
6


function useFriendStatus(friendID) {
 const [isOnline, setIsOnline] = useState(null)
 // ... 副作用逻辑
 useDebugValue(isOnline ? 'Online' : 'Offline')
 return isOnline
}

React DevTools → Components 面板里这个 Hook 会显示 Online / Offline，方便调试。

仅在 DevTools 中显示，生产环境不占成本（React 会自动移除）。

11. useId：跨服务端/客户端的唯一 ID

解决 SSR 的水合（hydration）问题——服务端和客户端的 ID 必须一致，否则 React 警告。

1
2
3
4
5
6
7
8
9


function PasswordField() {
 const id = useId() // :r0:
 return (
 <>
 <label htmlFor={id}>Password</label>
 <input id={id} type="password" />
 </>
 )
}

vs 自增 ID：Math.random() / Date.now() 在 SSR 下会不一致。

12. useTransition：标记非紧急任务

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


function Search({ data }) {
 const [isPending, startTransition] = useTransition()
 const [filter, setFilter] = useState('')

 const handleChange = (e) => {
 // 紧急任务：更新输入框（必须立即响应）
 setFilter(e.target.value)

 // 非紧急任务：过滤大列表（可被打断）
 startTransition(() => {
 setFilteredData(data.filter(d => d.name.includes(e.target.value)))
 })
 }

 return (
 <>
 <input value={filter} onChange={handleChange} />
 {isPending && <Spinner />}
 <List items={filteredData} />
 </>
 )
}

效果：用户输入时，输入框立即响应；过滤计算在后台进行（“transitioning”），避免页面卡顿。

13. React 19 新 Hook 速览

13.1 useActionState（替代 useState 表单提交）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


async function saveAction(prevState, formData) {
 await fetch('/api/save', { method: 'POST', body: formData })
 return { ok: true }
}

function Form() {
 const [state, formAction, isPending] = useActionState(saveAction, { ok: false })
 return (
 <form action={formAction}>
 <input name="title" />
 <button disabled={isPending}>{isPending ? '保存中...' : '保存'}</button>
 {state.ok && <p>已保存</p>}
 </form>
 )
}

省掉手写 useState({ loading, error, data }) 三个状态——React 自动管。

13.2 useFormStatus（读父表单的提交状态）

1
2
3
4


function SubmitButton() {
 const { pending, data, method } = useFormStatus()
 return <button disabled={pending}>{pending ? '...' : '提交'}</button>
}

13.3 useOptimistic（乐观更新）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Like({ likes, isLiked }) {
 const [optimistic, setOptimistic] = useOptimistic(isLiked)
 return (
 <button onClick={async () => {
 setOptimistic(true) // UI 立即显示已赞
 await fetch('/api/like', { method: 'POST' })
 // 接口成功后由父组件更新真实状态
 }}>
 {optimistic ? '❤️' : '🤍'} {likes}
 </button>
 )
}

Why：用户点"赞"后接口还没返回时，按钮已经变成红色——体感流畅 5 倍。

14. 自定义 Hook：组合已有 Hook 复用逻辑

自定义 Hook = 一个以 use 开头的函数，内部调用其他 Hook。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// useLocalStorage.ts
function useLocalStorage<T>(key: string, initialValue: T) {
 const [value, setValue] = useState<T>(() => {
 const stored = localStorage.getItem(key)
 return stored ? JSON.parse(stored) : initialValue
 })

 useEffect(() => {
 localStorage.setItem(key, JSON.stringify(value))
 }, [key, value])

 return [value, setValue] as const
}

// 用法
function App() {
 const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light')
 return <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}</button>
}

常见自定义 Hook：useFetch / useDebounce / useThrottle / usePagination / useModal / useWebSocket。

15. Hooks 三大规则

只能在函数组件顶层调用——不能在 if/for/嵌套函数里
只能在 React 函数中调用——函数组件、自定义 Hook；不能在普通 JS 函数里
useEffect 依赖项必须完整——配合 eslint-plugin-react-hooks 自动检查

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// ❌ 错误：条件调用 Hook
function Bad() {
 if (count > 0) {
 const [v, setV] = useState(0) // 报错：Hook 数量不固定
 }
}

// ✅ 正确：永远在顶层调用
function Good() {
 const [v, setV] = useState(0)
 if (count > 0) {
 // 用 v 即可
 }
}

Why：React 用"调用顺序"识别每个 Hook（第一次是 useState、第二次是 useEffect…）。条件调用会破坏顺序，state 会错位。

小结

React Hooks 核心 15 个：

Hook	用途	React 版本
`useState`	状态管理基石	16.8+
`useReducer`	复杂状态	16.8+
`useEffect`	副作用	16.8+
`useLayoutEffect`	DOM 同步副作用	16.8+
`useContext`	跨组件共享	16.8+
`useRef`	DOM 引用 + 持久化数据	16.8+
`useImperativeHandle`	配合 forwardRef 暴露 API	16.8+
`useMemo` / `useCallback`	性能优化	16.8+
`useDebugValue`	DevTools 标签	16.8+
`useId`	SSR 唯一 ID	18+
`useTransition`	标记非紧急任务	18+
`useActionState`	表单状态管理	19+
`useFormStatus`	读表单状态	19+
`useOptimistic`	乐观更新	19+
`useDeferredValue`	延迟更新值	18+

下一步：学完 Hooks 之后，进阶性能优化（React.memo / 虚拟列表 / 代码分割）、状态管理（Redux Toolkit / Zustand / Jotai）、数据请求（React Query / SWR）、渲染模式（Suspense / Streaming SSR / Server Components）。

参考资料

Vue 2 入门：vue-cli 脚手架与项目初始化完整路径

Mon, 15 Oct 2018 00:00:00 +0800

为什么写这篇：2018 年是 Vue 2 的成熟期，vue-cli 3.0 正式发布（基于 Webpack 4 + 零配置）。Element UI 已经成为中后台标配，Vuex + Vue Router 也走过了"磨合期"。即使 Vue 3 已发布，理解 Vue 2 仍是企业级项目维护的"基本功"——大量老项目还在跑 Vue 2。

适用读者：完全没接触过 Vue 的同学；从 React / Angular 转过来的前端；想系统整理 Vue 2 知识的中级工程师。

前置知识：HTML / CSS / JavaScript 基础。

1. 环境准备：Node.js 与 vue-cli

1.1 Node.js

从 nodejs.org 下载 LTS 版本（写作时是 22.x，回看 2018 是 10.x）。安装后：

1
2


node -v
npm -v

npm 升级到最新（Node 自带的 npm 不一定最新）：
1
npm install -g npm

1.2 装 yarn（可选，但推荐）

1
2


npm install -g yarn
yarn -v

1.3 装 vue-cli

1
2
3
4
5


npm install -g @vue/cli
# 或
yarn global add @vue/cli

vue -V # @vue/cli 5.0.x

环境变量（Windows）：把 C:\Users\<user>\AppData\Local\Yarn\bin 加到 PATH。

1.4 升级 vue-cli

1
2
3


npm update -g @vue/cli
# 或
yarn global upgrade --latest @vue/cli

1.5 装 native 编译工具

一些 npm 包（node-sass、node-gyp）需要 C++ 编译器。Windows 上装 windows-build-tools：

1
2


npm install -g node-gyp
npm install --global --production windows-build-tools

清理缓存：

1

npm cache clean --force

2. vue create：手动选择项目特性

1

vue create vue-pro

vue create 会进入交互式选择：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? No
? Use Babel alongside TypeScript? Yes
? Use history mode for router? (Requires proper server setup for index fallback) Yes
? Pick a CSS pre-processor: Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

各项含义：

特性	用途	推荐
Babel	把 ES2015+ 转 ES5，老浏览器兼容	✅ 必选
TypeScript	JS 超集，类型检查	✅ 大型项目必选
PWA	渐进式 Web 应用（Service Worker、离线）	⭕ 按需
Router	vue-router 路由	✅ SPA 必选
Vuex	状态管理	✅ 中大型项目必选
CSS Pre-processors	SCSS / Less / Stylus	⭕ 按团队
Linter / Formatter	ESLint 代码规范	✅ 必选
Unit Testing	单元测试（Jest / Mocha）	⭕ 大型项目
E2E Testing	端到端测试（Cypress / Nightwatch）	⭕ 大型项目

跑完后 cd 进去：

1
2


cd vue-pro
yarn serve # 或 npm run serve

可视化配置：vue ui 打开 http://localhost:8000，可以用 GUI 装插件、跑构建。

3. 项目目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


vue-pro/
├── public/ # 不参与 webpack 构建的静态资源
│ ├── favicon.ico
│ └── index.html # HTML 模板
├── src/
│ ├── assets/ # 会被 webpack 处理的静态资源
│ ├── components/ # 公共组件
│ │ └── HelloWorld.vue
│ ├── views/ # 路由页面组件
│ ├── router/ # vue-router 配置
│ │ └── index.ts
│ ├── store/ # Vuex 状态
│ │ └── index.ts
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── shims-vue.d.ts # 让 TS 识别 .vue 文件
├── tests/ # 单元测试
├── .browserslistrc # 浏览器兼容目标
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── tsconfig.json
└── vue.config.js # 可选，手写时配置 Webpack

4. 装 Element UI / less / ESLint

4.1 Element UI（Vue 2 时代中后台标配）

1
2


vue add element
# 自动选按需引入、主题色

4.2 less / less-loader

1
2
3


yarn add less less-loader --dev
# 或
npm install less less-loader --save-dev

使用：

1
2
3
4
5


<style scoped lang="less">
.read-the-docs {
 color: #888;
}
</style>

4.3 ESLint

1
2
3
4
5
6


yarn add --dev eslint
# 或
npm install --save-dev eslint

# 初始化
eslint --init

卸载：

1

yarn remove eslint

5. Vue 核心：声明式渲染

1
2
3


<div id="app">
 {{ message }}
</div>

1
2
3
4
5
6


var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

核心思想：用 {{ }}（Mustache 语法）把 data 里的变量渲染到 HTML。data 一变，DOM 自动更新——这是 Vue（和 React、Angular）“响应式"的本质。

6. 指令速查表

指令	简写	作用	示例
`v-bind:href`	`:href`	绑定 HTML 属性	`<a :href="url">`
`v-if`		条件渲染（销毁/重建 DOM）	`<p v-if="ok">YES</p>`
`v-else-if` / `v-else`		配合 `v-if`
`v-show`		条件渲染（仅切换 `display`）	`<p v-show="ok">`
`v-for`		列表循环	`<li v-for="(item, i) in arr" :key="i">`
`v-on:click`	`@click`	事件绑定	`<button @click="fn">`
`v-model`		表单双向绑定	`<input v-model="name">`
`v-once`		只渲染一次	`<span v-once>{{ msg }}</span>`
`v-html`		输出真正的 HTML	`<div v-html="rawHtml">`
`v-slot`	`#`	插槽（具名插槽）	`<Comp #header>`

v-if vs v-show：

v-if 真假切换时会销毁/重建 DOM 节点——切换开销大

v-show 仅切 display: none —— 初次渲染开销大，切换开销小

频繁切换用 v-show，条件很少变用 v-if

v-for 必带 :key：
1
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
key 帮助 Vue 高效复用 DOM。永远不要用 index 当 key（除非列表完全静态）。

6.1 模板表达式

1
2
3
4
5
6
7
8


{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!-- ❌ 不行：不能写语句 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}

7. 自定义组件

1
2
3
4
5
6


// 全局注册
Vue.component('todo-item', {
 template: '<li>这是个待办项</li>'
})

var app = new Vue({ /* ... */ })

1

<todo-item></todo-item>

现代写法：用 .vue 单文件组件（包含 template / script / style 三段），更清晰。

8. 生命周期

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


beforeCreate ─┐
 │ 初始化 events & lifecycle
created ─┤ 注入（provide / inject）
 │
beforeMount ─┤ 模板编译
mounted ─┘ DOM 已挂载 ✅
 │
beforeUpdate ─┐ 数据变化 → 重新渲染前
updated ─┤ 重新渲染后
 │
activated ─┐ <keep-alive> 专属
deactivated ─┘
 │
beforeDestroy ─┐ 组件销毁前
destroyed ─┘ 组件销毁后

最常用的两个：

created：组件创建完，data 已初始化，DOM 还没渲染。常用于发请求拿初始数据
mounted：DOM 已挂载完成。可以操作 DOM、初始化第三方库

9. 计算属性 vs 方法 vs 侦听器

9.1 计算属性（computed）

1
2
3
4
5
6
7
8
9


var vm = new Vue({
 el: '#example',
 data: { message: 'Hello' },
 computed: {
 reversedMessage: function () {
 return this.message.split('').reverse().join('')
 }
 }
})

特性：基于依赖缓存——message 不变就返回上次的计算结果，多次访问不重复算。

9.2 方法（methods）

1
2
3
4
5


methods: {
 reversedMessage: function () {
 return this.message.split('').reverse().join('')
 }
}

特性：每次调用都重算。不缓存。

9.3 侦听器（watch）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 },
 watch: {
 firstName: function (val) {
 this.fullName = val + ' ' + this.lastName
 },
 lastName: function (val) {
 this.fullName = this.firstName + ' ' + val
 }
 }
})

特性：监听某个 data 变化后触发副作用（如发请求）。用 computed 能搞定的别用 watch。

9.4 选型原则

场景	选
模板里需要派生数据	`computed`
事件回调 / 交互	`methods`
data 变化要发请求 / 调 API	`watch`

10. 组件模块系统

1
2
3
4
5
6
7


import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
 components: { ComponentA, ComponentC },
 // ...
}

现代项目用 import { ref, computed } from 'vue'（Composition API，Vue 3）或 import { mapState, mapGetters } from 'vuex'（Vuex 4）组织逻辑。

11. Vue.config.js 配置

从 Vue CLI 3.0 开始，Webpack 的配置文件从 webpack.config.js 变成了 vue.config.js，需要手工创建。

最小配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// vue.config.js
module.exports = {
 publicPath: './', // 部署到子目录时配
 outputDir: 'dist',
 productionSourceMap: false,
 devServer: {
 port: 8080,
 open: true
 }
}

完整配置（参考 Vue CLI 文档）涉及几十项，本文不展开。

小结

Vue 2 入门核心要点：

环境：Node LTS + @vue/cli 全局
项目初始化：vue create + 手动选 Babel/TS/Router/Vuex/Linter
核心概念：声明式渲染 + 指令 + 组件
数据流：data → computed（派生）→ methods（动作）→ watch（副作用）
生命周期：created（发请求）、mounted（操作 DOM）
配置：vue.config.js（Webpack 5 升级后建议用 Vite 6+ 替代）

下一步：学 Vue 3 的 Composition API、<script setup>、Pinia（替代 Vuex）、Vite 7。Vue 2 已于 2023-12-31 EOL，新项目都应直接上 Vue 3。

参考资料

React 入门与 JSX 语法详解

Sat, 15 Oct 2016 00:00:00 +0800

为什么写这篇：2016 年 React 已经发布 4 年（v15.3 同期），Redux 单向数据流成为社区共识。理解 JSX 是理解 React 一切后续特性的基础——Hooks、Suspense、Server Components 全都建立在"JSX 描述 UI、React 把它变成真实 DOM"上。

适用读者：完全没接触过 React 的同学；从 Vue 迁过来的前端；想系统整理 React 基础的初中级工程师。

前置知识：HTML / CSS / JavaScript ES6+。

1. React 起源：组件化的胜利

在 React 出现之前，前端开发的"关注点分离"是按文件类型：

1
2
3


- index.html （结构）
- style.css （样式）
- app.js （行为）

这种模式在简单页面下很清晰。但随着应用变复杂：

同一个按钮的样式散落在多个 CSS 文件
一个交互逻辑跨多个 JS 文件
改一个页面要切 3 个文件

React 团队认为：渲染逻辑和 UI 的其他逻辑（事件处理、状态变化、数据展示）是紧密耦合的。强行把它们按文件分开，反而让代码散落、难以维护。

于是 React 提出"关注点分离的新方式"——按组件分：

1
2
3
4
5
6
7
8
9


src/
├── components/
│ ├── Button/
│ │ ├── Button.jsx # 这按钮的模板、样式、行为全在一起
│ │ ├── Button.module.css
│ │ └── Button.test.js
│ └── UserCard/
└── pages/
 └── Home/

每个组件是一个松耦合、可复用的单元——内部结构、样式、行为都聚拢在一起，组件之间通过 props 通信。

2. JSX 起源：UI 与逻辑的"反向"组合

JSX 是 React 团队把"组件化"哲学落到代码上的工具。JSX = JavaScript + XML 语法。

1

const element = <h1>Hello, world!</h1>

这行代码既不是字符串也不是 HTML——是JavaScript 表达式，最终会被 Babel/SWC 编译成 React.createElement('h1', null, 'Hello, world!')。

Why JSX：让你用写 HTML 的方式写 UI，但保留 JavaScript 全部能力（变量、函数、逻辑判断）。

3. JSX 5 大语法特性

3.1 在 JSX 中嵌入 JavaScript 表达式

用 {} 嵌入任何 JavaScript 表达式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const name = 'React 爱好者'
const element = <h1>Hello, {name}!</h1>

function formatName(user) {
 return user.firstName + ' ' + user.lastName
}

const user = { firstName: 'Harper', lastName: 'Perez' }
const greetingElement = (
 <h1>Hello, {formatName(user)}!</h1>
)

const sum = <div>{2 + 2}</div> // 4

只能放表达式，不能放语句：

1
2


{ var a = 1 } // ❌
{ if (ok) { ... } } // ❌

3.2 JSX 本身也是表达式

JSX 可以赋值给变量、作为函数参数、作为返回值：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


function getGreeting(user) {
 if (user) {
 return <h1>Hello, {user.name}!</h1>
 }
 return <h1>Hello, Stranger.</h1>
}

const welcomeMessage = getGreeting({ name: 'Alice' })

// 数组 + map 渲染列表
const items = ['Apple', 'Banana', 'Orange']
const listItems = (
 <ul>
 {items.map((item, index) => (
 <li key={index}>{item}</li>
 ))}
 </ul>
)

3.3 JSX 中的属性

JSX 属性用驼峰命名（camelCase），不是 HTML 那种小写连字符：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// HTML: class / tabindex / onclick
// JSX : className / tabIndex / onClick

const element = (
 <a href="https://react.dev" target="_blank" className="my-link">
 React 官网
 </a>
)

const image = (
 <img
 src="avatar.jpg"
 alt="User Avatar"
 style={{ width: '100px', height: '100px' }}
 />
)

Why camelCase：JSX 最终编译成 JavaScript 对象，而 JavaScript 变量名不能用连字符。

HTML 属性	JSX 属性
`class`	`className`
`tabindex`	`tabIndex`
`for`	`htmlFor`
`readonly`	`readOnly`
`onclick`	`onClick`
`onchange`	`onChange`

3.4 JSX 子元素与 Fragment

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 多个元素必须包一个父元素
const container = (
 <div>
 <h1>标题</h1>
 <p>这是一段文字。</p>
 <img src="example.jpg" alt="示例图片" />
 </div>
)

// 用 Fragment 不增加 DOM 节点
const frag = (
 <>
 <p>第一段</p>
 <p>第二段</p>
 </>
)

Why Fragment：返回多个根节点时不污染 DOM 结构。<>...</> 是 <Fragment>...</Fragment> 的语法糖。

3.5 JSX 防注入攻击

1
2
3


const userInput = '<script>alert("hacked")</script>'
const safeElement = <div>{userInput}</div>
// 渲染为：<div>&lt;script&gt;alert("hacked")&lt;/script&gt;</div>

Why 安全：React 在渲染前会自动转义所有嵌入值——< 变 <，> 变 >，所有用户输入都安全。

4. 函数组件与 props

4.1 传统函数组件

1
2
3


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

4.2 ES6 箭头函数

1
2
3


const Greeting = (props) => {
 return <p>Greetings, {props.name}!</p>
}

4.3 解构 props（推荐）

1
2
3
4
5
6
7
8


const UserInfo = ({ name, age }) => {
 return (
 <div>
 <p>Name: {name}</p>
 <p>Age: {age}</p>
 </div>
 )
}

4.4 接口定义 props（TypeScript，最推荐）

1
2
3
4
5
6
7


interface UserGreetProps {
 readonly isLog: boolean
}

function UserGreet({ isLog }: UserGreetProps) {
 return <h1>{isLog ? 'Logged in' : 'Logged out'}</h1>
}

4.5 必知：React 组件函数只能接一个 props 对象

1
2
3
4
5


// ❌ 错误——React 会传整个 props 对象，不是单个布尔值
function UserGreet(isLog: boolean) { }

// ✅ 正确
function UserGreet(props: { isLog: boolean }) { }

5. 特殊 prop：children

children 是组件内部的"插槽"——父组件传入的所有 JSX 都通过 children 拿到。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// components/Layout.tsx
import React from 'react'

interface LayoutProps {
 readonly title: string
 readonly children?: React.ReactNode
}

function Layout({ title, children }: LayoutProps) {
 return (
 <div style={{ border: '10px solid #eee', padding: '20px' }}>
 <h1>{title}</h1>
 <div>{children}</div>
 </div>
 )
}

export default Layout

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// App.tsx
import Layout from './components/Layout'

function App() {
 return (
 <Layout title="用户管理系统">
 <p>这是应用的主要内容。</p>
 <button>点击我</button>
 </Layout>
 )
}

实际效果：title 是 prop，children 是 prop 的特殊形式——React 把 <p>...</p><button>...</button> 整个打包成 children 数组传给 Layout。

6. 条件渲染：&& 与三元运算符

6.1 && 短路运算

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


function Mailbox(props) {
 const unreadMessages = props.unreadMessages
 return (
 <div>
 <h1>Hello!</h1>
 {unreadMessages.length > 0 &&
 <h2>您有 {unreadMessages.length} 条未读消息。</h2>
 }
 </div>
 )
}

原理：A && B 当 A 为 true 时返回 B；当 A 为 false 时返回 A（React 忽略 false / null / undefined）。

6.2 三元运算符

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function Greeting(props) {
 return (
 <div>
 {props.isLoggedIn
 ? <h1>欢迎回来！</h1>
 : <h1>请先登录。</h1>
 }
 </div>
 )
}

vs if/else：三元表达式可以在 JSX 中内联。if/else 必须提到 JSX 之外。

6.3 阻止组件渲染

1
2
3
4
5
6


function WarningBanner(props) {
 if (!props.warn) {
 return null // 渲染空——不显示任何东西
 }
 return <div className="warning">警告！</div>
}

return null 不会卸载组件——生命周期（包括 Hooks）仍会调用。

7. 列表渲染与 key 的正确用法

7.1 基础列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function NumberList(props) {
 const numbers = props.numbers
 const listItems = numbers.map((number) => (
 <li key={number.toString()}>{number}</li>
 ))
 return <ul>{listItems}</ul>
}

const numbers = [1, 2, 3, 4, 5]
<NumberList numbers={numbers} />

7.2 key 的作用

key 是 React 用于识别列表中每个元素的特殊字符串属性。当列表项顺序变化或增删时，key 帮助 React 高效更新 DOM——避免不必要的重新创建。

7.3 key 的选择

1
2
3
4
5
6


// ✅ 用数据里的稳定唯一 ID
const todos = [{ id: 't1', text: '吃饭' }, { id: 't2', text: '睡觉' }]
todos.map(t => <li key={t.id}>{t.text}</li>)

// ❌ 避免用 index（除非列表完全静态，永不变化）
todos.map((t, i) => <li key={i}>{t.text}</li>)

Why 避免 index 当 key：当你在列表头部插入一条新数据，所有 index 都会 +1，React 误以为"所有项都变了"——性能暴跌，还可能引发输入框焦点错位、动画异常等 bug。

8. JSX 工具链：VSCode 插件与转换器

8.1 VSCode 必装插件

插件	用途
ES7+ React/Redux/React-Native snippets	`rfc` / `rcc` / `useState` 等代码片段
ESLint	代码规范
Prettier	自动格式化
Auto Rename Tag	改开始标签自动改结束标签
Codeium（或 GitHub Copilot）	AI 补全

常用代码片段前缀：

前缀	展开为
`rfc`	function 组件
`rcc`	class 组件
`useState`	`const [val, setVal] = useState(0)`
`useEffect`	`useEffect(() => {}, [])`
`imr`	`import React from 'react'`

8.2 浏览器插件

React Developer Tools（Chrome / Firefox 扩展）—— 装上后 DevTools 多两个 Tab：Components（看组件树和 props）和 Profiler（看组件渲染性能）。

8.3 HTML ↔ JSX 转换器

transform.tools/html-to-jsx——把 HTML 片段粘进去，自动转 JSX（自动加 className、闭合自闭合标签等）。

8.4 入门教程

VSCode 官方 React 教程——30 分钟跑通第一个 React 应用。

9. 实用资源

9.1 文档

React 官方中文文档：zh-hans.react.dev
React 官方英文文档：react.dev

9.2 学习路径

JSX + 函数组件（本文）
状态管理：useState / useReducer
副作用：useEffect / useLayoutEffect
组件通信：Props / Context / 状态管理库
性能优化：memo / useMemo / useCallback
高级特性：Suspense / ErrorBoundary / Server Components

小结

React 入门核心：

设计哲学：UI 与逻辑聚拢在"组件"里，组件之间通过 props 通信
JSX：HTML-like 语法 + JS 能力，编译成 React.createElement 调用
JSX 5 大特性：表达式嵌入、属性 camelCase、Fragment、children、auto-escape
函数组件 + props：现代 React 的"最小单位"
条件渲染：&& 短路、三元表达式、return null
列表渲染 + key：永远用稳定 ID 当 key，绝不用 index

下一步：学 Hooks（useState / useEffect / useContext / useReducer）——这是 React 16.8+ 引入的"函数式组件能力扩展"，是现代 React 一切的基础。读懂 Hooks 后，再学状态管理（Redux / Zustand）、路由（React Router）、数据请求（React Query / SWR）就水到渠成。