先搞懂React 是什么React 是 Meta原 Facebook开源的前端 UI 框架让你能用“组件”的方式构建用户界面。你可以把它理解为乐高积木——每个积木就是一个组件拼在一起就是你的网页。⚡ 核心结论一句话React 的核心思想是UI f(state)即页面是数据的函数视图数据变了页面自动跟着变。 支持的核心理念一览概念作用类比Component可复用的 UI 单元乐高积木块 主力JSX在 JS 里写类似 HTML 的标签混合写法Props父传给子的参数函数参数State组件自己的记忆变量但能触发重渲染Hook钩子函数“接入” React 特性插件接口一、你的第一个组件最简单的组件写法// 快捷方式直接传字符串快速实验用StringreplychatModel.chat(你好);换成 React 就是function MyButton() { return button我是一个按钮/button; }这个函数返回一段 JSX看起来像 HTML 的东西React 就会把它渲染到页面上。标准用法嵌套组件export default function MyApp() { return ( div h1欢迎来到我的应用/h1 MyButton / {/* 注意大写这是自定义组件 */} /div ); }关键规则自定义组件名必须以大写字母开头MyButtonHTML 原生标签用小写divexport default表示这是文件的主组件二、JSX 的规则3 条铁律JSX 长得像 HTML但有更严格的规则1. 只能返回一个根元素// ❌ 错误多个顶级标签 return ( h1Hello/h1 pWorld/p ); // ✅ 正确用一个 div 包裹 return ( div h1Hello/h1 pWorld/p /div ); // ✅ 或者用 Fragment .../不产生额外 DOM 节点 return ( h1Hello/h1 pWorld/p / );2. 标签必须闭合// ❌ HTML 中可以省略闭合 img srccat.jpg classavatar // ✅ JSX 必须自闭合 img srccat.jpg classNameavatar /3. 属性要用驼峰命名// ❌ HTML 写法 classavatar stroke-width2 // ✅ JSX 写法 classNameavatar strokeWidth2 例外aria-*和data-*属性保持原样不用改。三、Props —— 父子通信的桥梁传递 Props// 父组件像传 HTML 属性一样传 Avatar person{{ name: Klaus, imageId: abc }} size{100} /接收 Props// 子组件通过解构读取 function Avatar({ person, size }) { return ( img classNameavatar src{getImageUrl(person)} alt{person.name} width{size} height{size} / ); }Props 的关键特性特性说明单向流动只能从父 → 子不能反过来不可变性子组件不能修改 props默认值function Avatar({ size 100 }) {}展开语法Avatar {...props} /一键转发所有 propchildren嵌套的内容自动成为childrenprop// children 示例Card 不知道里面装了什么 Card Avatar / {/* 这变成了 Card 的 children prop */} /Card四、State —— 组件的记忆力为什么普通变量不够// ❌ 这样不行 function Gallery() { let index 0; // 每次重新渲染都归零 function handleClick() { index index 1; // 改了也不会触发重新渲染 } return button onClick{handleClick}Next/button; }两个问题局部变量无法在多次渲染间持久保存修改变量不会触发 React 重新渲染用 useState 解决import { useState } from react; function Gallery() { const [index, setIndex] useState(0); // 这才是 state function handleClick() { setIndex(index 1); // 调用 setter → 触发重新渲染 } return button onClick{handleClick}Next/button; }useState 的工作原理const [count, setCount] useState(0); │ │ │ │ │ └─ 初始值只在第一次生效 │ └─ setter 函数调它才触发更新 └─ state 变量读当前值流程首次渲染 →useState(0)返回[0, setCount]点击按钮 → 调用setCount(count 1)React 记住新值 → 重新执行组件函数第二次渲染 →useState(0)依然返回[1, setCount]不再是初始值了多条 state 怎么管const [index, setIndex] useState(0); // 数字 const [showMore, setShowMore] useState(false); // 布尔值 const [name, setName] useState(); // 字符串原则不相关的放不同变量经常一起变的合并成一个对象。五、事件处理基本写法function MyButton() { function handleClick() { alert(你点我了); } return ( button onClick{handleClick} 点我 /button ); }⚠️重点onClick{handleClick}后面没有小括号你传递的是函数本身不是调用结果。内联箭头函数input onChange{(e) setName(e.target.value)} /六、条件渲染三种常用姿势1. if…else最直观let content; if (isLoggedIn) { content AdminPanel /; } else { content LoginForm /; } return div{content}/div;2. 三元运算符在 JSX 内部用div {isLoggedIn ? AdminPanel / : LoginForm /} /div3. 短路求和 不需要 else 时div {isLoggedIn AdminPanel /} /div七、渲染列表map keyconst products [ { title: 卷心菜, id: 1 }, { title: 大蒜, id: 2 }, { title: 苹果, id: 3 }, ]; return ( ul {products.map(product ( li key{product.id}{product.title}/li ))} /ul );key 是什么key告诉 React 哪个元素对应哪个数据项必须是同级之间唯一的字符串或数字最佳来源数据库 ID不要用 index 当 key排序/增删时会出问题八、状态提升 —— 共享 state场景两个按钮要联动最初各自独立MyApp ├── MyButton (count0) ← 各记各的 └── MyButton (count0)解决方案把 state 提到共同父组件export default function MyApp() { const [count, setCount] useState(0); // state 在这里 function handleClick() { setCount(count 1); } return ( div MyButton count{count} onClick{handleClick} / MyButton count{count} onClick{handleClick} / /div ); } function MyButton({ count, onClick }) { // 通过 props 拿到 return ( button onClick{onClick}点了 {count} 次/button ); }数据流变成MyApp (拥有 state) ├──↓ count onClick ↓──→ MyButton └──↓ count onClick ↓──→ MyButton这就是“状态提升”—— 把 state 放到最近的公共祖先再通过 props 往下传。九、Hook 的基本规则以use开头的函数叫Hook它们是 React 的插件接口Hook作用useState添加 stateuseEffect同步外部系统下一篇讲useContext深层传递数据下一篇讲useReducer复杂 state 逻辑下一篇讲⚠️ Hook 的铁律只能在组件顶层调用—— 不能在 if/for/嵌套函数里用调用顺序必须稳定—— React 靠顺序来追踪每个 state只能从 React 函数调用—— 不能在普通 JS 函数里用 可以把 Hook 想象成在文件顶部 “import React 的特性”是声明式的不是命令式的。 面试高频追问Q1React 的组件是什么答组件是一个返回 JSX 的 JavaScript 函数。它可以小到像一个按钮大到整个页面。自定义组件名首字母必须大写。Q2Props 和 State 的区别是什么答Props 像是函数的参数由父组件传入子组件只读不可改State 像是组件自己的内存组件可以自己读写变化会触发重新渲染。Q3为什么列表渲染需要 key答key 帮助 React 识别哪些元素发生了变化、新增或删除了。没有 keyReact 只能通过位置来判断导致性能差且容易出错。Q4什么是状态提升答当多个组件需要同步数据时把 state 提升到它们的最近公共父组件中然后通过 props 向下传递。这是 React 单向数据流的体现。Q5useState 和普通的 let 变量有什么区别答普通变量在每次渲染时都会被重置而且修改它不会触发重新渲染useState 能在渲染之间持久保存值调用 setter 会让 React 重新执行组件函数并更新 DOM。 常见面试变体“React 中 props 有哪些特点”“如何理解 React 的单向数据流”“为什么不要在循环或条件中使用 Hook”“简述 React 组件的生命周期渲染过程”“什么情况下需要使用 useState”✅ 总结React 的快速入门核心要点组件是返回 JSX 的函数构成 UI 的基本单元 JSX是在 JS 中写标签的语言有三条铁律单根、闭合、驼峰Props是父传子的单向数据通道不可变State是组件的记忆通过useState管理变化触发重新渲染Hook是以use开头的特殊函数只能在组件顶层调用状态提升是实现组件间共享数据的核心模式列表渲染用map()keykey 要在同级唯一掌握这些基础后就可以进一步学习 Effect、Context、Reducer 等进阶功能了。