组件与 props
React 组件本质是「返回 JSX 的函数」：接收 props、返回界面描述。props 是组件的唯一数据入口，和 Vue 一样遵循单向数据流——父传子只读，子组件绝不能修改 props，想改变什么就调用父组件传下来的回调函数。
函数参数直接解构是最常见的写法：function Card({ title, children })。特殊的 children prop 代表组件标签中间包裹的内容，这让组件能像 <Card>...内容...</Card> 一样组合嵌套，是布局类组件（弹窗、面板、布局）的基础。
事件也通过 props 传递：子组件触发变化时调用 props.onChange(新值)，真正修改数据的地方在父组件。记住口诀：数据向下流，事件向上抛——React 和 Vue 在这一点上完全一致。
本节要点组件 = 返回 JSX 的函数；props 只读、是唯一数据入口；children 代表标签中间的内容；修改数据的动作通过回调 props 交还父组件。
代码
// 组件就是返回 JSX 的函数
function Card({ title, children, onAction }) {
return (
<div className="card"> {/* React 用 className */}
<h3>{title}</h3>
<div>{children}</div> {/* children：标签中间的内容 */}
<button onClick={() => onAction(title)}>
操作
</button>
</div>
);
}
// 父组件：数据向下，事件向上
function App() {
const handleAction = (name) => {
console.log('子组件请求操作：' + name);
};
return (
<Card title="今日提醒" onAction={handleAction}>
<p>记得复习昨天学的内容</p> {/* 这就是 children */}
</Card>
);
}
// 注意：props 是只读的
// function Bad({ title }) { title = '改掉'; } ✗ 禁止
