组件与 Props

React 应用由组件树组成。Props 是父组件传入子组件的只读参数；子组件通过回调 props 向父组件上报事件。见 JSX、Hooks。

Props 与单向数据流

tsx

type ButtonProps = {
  label: string;
  disabled?: boolean;
  onPress: () => void;
};

function Button({ label, disabled = false, onPress }: ButtonProps) {
  return (
    <button type="button" disabled={disabled} onClick={onPress}>
      {label}
    </button>
  );
}

不要修改 props；需要“子改父数据”时由父组件持有 state，通过 onPress 等回调更新。
展开传递：<Profile {...user} /> 等价于逐个属性绑定。

受控与非受控组件

类型	说明
受控	表单值由 React state 驱动，如 `value={text} onChange={e => setText(e.target.value)}`
非受控	值存在 DOM 中，用 `ref` 读取，如 `<input ref={inputRef} defaultValue="..." />`

复杂表单可配合 React Hook Form 等库。

组合模式

`children`

tsx

function Card({ children }: { children: React.ReactNode }) {
  return <section className="card">{children}</section>;
}

<Card>
  <h2>标题</h2>
  <p>内容</p>
</Card>;

插槽式 props

tsx

function Layout({
  header,
  footer,
  children,
}: {
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <>
      {header}
      <main>{children}</main>
      {footer}
    </>
  );
}

复合组件（Compound Components）

父组件通过 Context 向子组件共享隐式状态（如 Tabs、Select），避免 props 层层传递。实现时常配合 Context。

提升状态（Lifting State Up）

多个兄弟组件共享状态时，将 state 提升到最近共同父组件，再通过 props 下发。

与 Vue 对照（简表）

	React	Vue
传参	`props` 只读	`props` 单向
双向绑定	受控 + `onChange` 或库	`v-model`
默认插槽	`children`	默认插槽
作用域插槽	render props / 函数 children	`v-slot`

参考文献

以下链接在编写时均可正常访问：

资料	说明
React：组件	首组件
React：Props	传递 props
React：受控组件	受控 input