第二大脑

主题

2026-08-24
466
1.8m

概念卡片：React 组件化与 JSX ​

一句话机制：React 用 JSX（JavaScript 语法扩展，编译成 React.createElement）描述 UI，把界面拆成可复用的组件；组件通过 props 单向传数据，父改子靠传 props、子改父靠回调，非父子通信靠状态提升 / Context。

关键代码示例 ​

JSX 基础（表达式 + 列表）：

jsx
function UserList({ users }) {
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}  {/* 表达式用 {}，列表必须 key */}
    </ul>
  )
}

父子通信（props 只读 + 回调）：

jsx
// 父 → 子：props 传数据；子 → 父：传回调函数
function Parent() {
  const [msg, setMsg] = useState('')
  return <Child value={msg} onChange={setMsg} />
}
function Child({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />
}

组件通信方式 ​

场景方式
父 → 子props（只读）
子 → 父父传回调函数，子调用
非父子状态提升 / Context / 状态管理库

不变量（必须成立的约束） ​

  • props 是只读的：子组件不能修改 props，改状态只能改自己的 state。
  • 组件名必须大写开头：JSX 靠首字母大小写区分「组件」和「原生 HTML 标签」。
  • JSX 表达式用 {} 包裹，且 JSX 必须返回单一根元素（或用 <></> Fragment）。
  • 列表渲染必须加 key：key 唯一且稳定（别用随机数、别用 index 做性能优化）。

踩坑案例 ​

  • 现象：列表项 map 渲染时控制台告警「Each child should have a unique key」。 原因：缺 key，React 无法复用 DOM。解决：用稳定的业务 id 作 key。

常见误解 ​

  • 直接 this.props.xxx = ... 改 props → props 只读，应改自己的 state。
  • 用 index 当 key → 列表中间插入/删除时 Diff 错乱、性能劣化。

关联 ​

最近更新