当前位置：首页 > news >正文

说说对React的理解？有哪些特性？

news 2025/9/18 8:45:14

关键词：React、组件化、Hooks、虚拟 DOM、声明式编程、前端面试

一、前言

React 已经不再是“又一个前端框架”，而是现代前端开发的通用语言。从 Web 到 Native，从 PC 到 VR，React 的生态让“一次学习，随处编写”成为可能。本文将用 10 分钟带你重温 React 的 7 大核心概念，并给出可直接拷贝到项目中的代码片段，最后附送面试高分答案，助你一次搞定面试官。

二、React 是什么？

一句话定义：

React = 组件化 UI 库 + 声明式范式 + 单向数据流 + 虚拟 DOM 差异算法。

它只解决视图层问题，却通过强大的生态（Next.js、React Native、Remix、Expo 等）解决所有端问题。

三、7 大核心特征拆解

1. 组件化：把 UI 拆成乐高积木

// Button.jsx
export default function Button({ label, onClick, primary = false }) {return (<buttonclassName={primary ? 'btn-primary' : 'btn-default'}onClick={onClick}>{label}</button>);
}

使用：

import Button from './Button';<Button label="保存" primary onClick={() => alert('已保存')} />

收益：

复用率 ↑
单测成本 ↓
需求变更只改一处

2. 声明式：告诉 React“要什么”，而不是“怎么做”

function TodoList({ todos }) {return (<ul>{todos.map(t => (<li key={t.id} className={t.done ? 'done' : ''}>{t.text}</li>))}</ul>);
}

对比 jQuery 的命令式：if (done) $(li).addClass('done')…
声明式代码即**“状态即 UI”**，心智负担 -50%。

3. 虚拟 DOM：Diff → Patch → 真 DOM 最小更新

流程：

setState → 新 VDOM
Diff（O(n) heuristic）
批量更新真实 DOM（Batch Update）

性能口诀：“先内存，后 DOM”。

4. JSX：JavaScript + XML 的甜蜜糖衣

const user = { name: 'Kimi', avatar: '/kimi.png' };
const element = <img src={user.avatar} alt={user.name} />;

编译后：

React.createElement('img', { src: user.avatar, alt: user.name });

提示：

必须闭合标签
class → className
style 接受对象且驼峰命名

5. 单向数据流：数据只能“向下输液”

function Parent() {const [count, setCount] = useState(0);return <Child count={count} onInc={() => setCount(c => c + 1)} />;
}function Child({ count, onInc }) {// 无法直接改 count，只能回调return <button onClick={onInc}>{count}</button>;
}

好处：

数据流向唯一，调试神器
与 Redux/MobX/zustand 等理念天然契合

6. Hooks：让函数组件拥有“超能力”

常用三连：

Hook	作用域	经典场景
useState	组件级状态	计数器、开关、输入框
useEffect	副作用/生命周期	发请求、事件订阅、改 title
useRef	跨渲染周期保存数据	存定时器 ID、测量 DOM 节点

function Counter() {const [count, setCount] = useState(0);useEffect(() => {document.title = `点击了 ${count} 次`;}, [count]);return (<><p>{count}</p><button onClick={() => setCount(c => c + 1)}>+1</button></>);
}

规则：

只在最顶层调用，别放在循环或判断里
只在 React 函数或自定义 Hook 中调用

7. 跨平台：Learn Once, Write Everywhere

技术栈	目标平台	特点
React Native	iOS/Android	原生控件，热更新，共享 90% 代码
React 360	VR	基于 Three.js，沉浸式 3D
Electron + React	macOS/Win/Linux	一套代码打包桌面应用
Next.js	Web/SSR/Edge	服务端渲染、ISR、RSC 全都有

四、实战：Todo 小例子

npx create-next-app@latest react-todo --typescript --tailwind
cd react-todo

pages/index.tsx

import { useState } from 'react';type Todo = { id: number; text: string; done: boolean };export default function Home() {const [todos, setTodos] = useState<Todo[]>([]);const [text, setText] = useState('');const add = () => {if (!text.trim()) return;setTodos(prev => [...prev, { id: Date.now(), text, done: false }]);setText('');};const toggle = (id: number) =>setTodos(prev =>prev.map(t => (t.id === id ? { ...t, done: !t.done } : t)));return (<main className="max-w-xl mx-auto p-8"><h1 className="text-3xl font-bold mb-4">React Todo</h1><div className="flex gap-2 mb-4"><inputclassName="border px-2 flex-1"value={text}onChange={e => setText(e.target.value)}onKeyDown={e => e.key === 'Enter' && add()}/><button className="btn-primary" onClick={add}>Add</button></div><ul>{todos.map(t => (<likey={t.id}onClick={() => toggle(t.id)}className={`cursor-pointer ${t.done ? 'line-through' : ''}`}>{t.text}</li>))}</ul></main>);
}

运行：

npm run dev

打开 http://localhost:3000，一个支持回车添加、点击切换完成状态的 Todo 应用就上线了。

五、面试高分模板（背下来）

面试官：说说你对 React 的理解？
我：
React 是 Meta 开源的组件化 UI 库，核心思想是“状态驱动 UI”。它用声明式方式让我们只关心数据长什么样，DOM 操作交给框架；通过虚拟 DOM做差异更新，性能优秀；单向数据流让数据变化可预测，方便调试；Hooks让函数组件拥有状态与生命周期，代码更简洁；再加上JSX语法糖，可读性极高。
此外，React 的“Learn Once, Write Anywhere”让我能用同一套知识开发 Web（Next.js）、移动端（React Native）、甚至 VR（React 360），极大提升了研发效率。最近我们项目就用 React + TypeScript + Tailwind 做了组件库，复用率 70%，交付周期缩短 30%。