Sources

S1 — Your First Component

URL: https://react.dev/learn/your-first-component

• 权威: 官方文档
• 支撑: React 组件是可复用 UI 单元,组件可嵌套,组件名需要大写。
• 关键事实: React 组件是返回 markup 的 JavaScript 函数,大写组件名可让 React 区分自定义组件和 HTML 标签。

S2 — Writing Markup with JSX

URL: https://react.dev/learn/writing-markup-with-jsx

• 权威: 官方文档
• 支撑: JSX 的基本规则:单一根节点、闭合标签、属性命名和 JavaScript 表达式。
• 关键事实: JSX 比 HTML 更严格,多个相邻节点需包在父节点或 Fragment 中,标签必须闭合。

S3 — Passing Props to a Component

URL: https://react.dev/learn/passing-props-to-a-component

• 权威: 官方文档
• 支撑: props 是父组件传给子组件的信息,包括普通 props 和 children。
• 关键事实: React 组件使用 props 互相通信,props 作为组件的输入读取。

S4 — State: A Component's Memory

URL: https://react.dev/learn/state-a-components-memory

• 权威: 官方文档
• 支撑: state 的用途、useState 的返回值、setter 触发重新渲染。
• 关键事实: 当组件需要记住交互产生的信息时使用 state,调用 state setter 会触发 React 重新渲染。

S5 — Responding to Events

URL: https://react.dev/learn/responding-to-events

• 权威: 官方文档
• 支撑: React 事件处理函数的写法和传递方式。
• 关键事实: 事件处理函数是你定义并传给 JSX 事件属性的函数,通常在用户交互时运行。

S6 — Conditional Rendering

URL: https://react.dev/learn/conditional-rendering

• 权威: 官方文档
• 支撑: 根据条件返回不同 JSX 或包含/排除某段 JSX。
• 关键事实: React 组件可以用 JavaScript 条件语法控制返回的 UI。

S7 — Rendering Lists

URL: https://react.dev/learn/rendering-lists

• 权威: 官方文档
• 支撑: 用数组渲染列表、为列表项提供稳定 key。
• 关键事实: 渲染数组项时每个元素需要 key,以帮助 React 识别每个项的身份。

S8 — Synchronizing with Effects

URL: https://react.dev/learn/synchronizing-with-effects

• 权威: 官方文档
• 支撑: effect 的定位、依赖数组、cleanup 和外部系统同步。
• 关键事实: Effects 用来把组件与外部系统同步,而不是处理所有渲染内计算。

S9 — <input> React DOM Component

URL: https://react.dev/reference/react-dom/components/input

• 权威: 官方文档
• 支撑: 受控输入框、value、onChange、表单输入 state 同步。
• 关键事实: 传入 value 的输入框通常需要 onChange 同步更新 state,形成受控输入。

S10 — Array.prototype.map()

URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

• 权威: 官方文档
• 支撑: map() 作为 JavaScript 数组方法,用于把一组数据转换成另一组值。
• 关键事实: map() 对调用数组的每个元素调用回调函数,并返回一个新数组。