React是用于构建用户界面的JavaScript库，核心是函数组件+Hooks实现状态驱动视图，需注意不可变更新、正确使用key、单向数据流及自定义Hook依赖完整性。
React 不是框架，而是一个用于构建用户界面的 JavaScript 库；它本身不处理路由、状态持久化或 HTTP 请求，这些需要额外选型。你用它写组件，不是“学完 React 就能做完整应用”，而是“用 React 写出可复用、可组合、响应数据变化的 UI 单元”。
React 组件怎么写：函数组件 + useState 是当前标准写法
过去类组件（class Component）已基本被弃用。现在默认用函数组件配合 Hooks。关键点不是“语法多炫”，而是理解“状态驱动视图”的闭环：
-
useState声明一个状态变量和更新函数，每次调用更新函数会触发组件重渲染 - JSX 不是字符串模板，是 JavaScript 的语法扩展，最终被编译为
React.createElement()调用 - 组件名必须大写（如
Button），否则 JSX 会把它当 HTML 原生标签处理
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
为什么 key 属性不能用 index？
当你用 map() 渲染列表时，React 要靠 key 区分每个子元素的身份。用数组索引（index）作 key 在以下情况会出错：
- 列表项顺序变动（如排序、拖拽）→ React 错误复用 DOM 节点，导致输入框失焦、动画错乱
- 列表项增删 → 状态错位（比如第 2 个 item 的
checked状态跑到第 3 个上）
正确做法：使用每项数据中稳定唯一的标识，如 user.id、post.slug。没有就生成（但别用 Date.now() 或 Math.random()，避免重复）。
组件通信：父传子用 props，子传父用回调函数
React 没有全局状态或双向绑定。父子之间传递数据靠显式约定：
- 父组件把数据和函数作为
props传给子组件（如<Input value={text} onChange={handleTextChange} />） - 子组件内部调用传入的函数（如
props.onChange(newVal)），由父组件决定如何响应 - 跨层级通信不要硬传 props，改用
useContext（适合主题、权限等低频变更场景）或状态管理库（如 Zustand、Jotai）
别在子组件里直接修改父组件的 state 变量 —— 这违反单向数据流，调试时你会找不到状态更新源头。
真实项目里最容易被忽略的点
初学者常卡在“组件渲染了但 UI 没变”，问题往往不在 React 本身，而在：
- 状态更新用了赋值（
obj.name = 'x'）而非不可变更新（{...obj, name: 'x'}），React 浅比较发现引用没变，跳过渲染 - 异步操作后更新状态，但组件已卸载（如请求返回时页面已跳走），导致
setState on unmounted component警告甚至内存泄漏 - 自定义 Hook 里忘了加依赖数组（
useEffect(..., [])），或数组漏写了某个变量，造成闭包捕获旧值
这些问题不会报错，但会让 UI 表现和预期不一致 —— 它们藏在“数据流是否真正贯通”这个细节里，而不是语法对不对。
