React 组件常用 Props 接收外部数据，用 State 保存组件内部会变化的数据。先把两者分开理解，页面状态会更容易追踪。

Props 由使用者传入

TSX
type ProfileCardProps = {
  name: string
  description: string
}

function ProfileCard({ name, description }: ProfileCardProps) {
  return <section><h2>{name}</h2><p>{description}</p></section>
}

父组件可以通过属性传入不同内容。子组件读取 Props 来展示信息，不应该直接修改传进来的值。

State 保存交互状态

像展开/收起、输入框内容这样的变化，可以放在 state 里。更新 state 后，React 会重新渲染相关界面。

TSX
const [expanded, setExpanded] = useState(false)

怎么选择

如果值由父组件决定，用 Props；如果值由当前组件的交互维护，用 State。状态需要被多个组件共享时，可以再考虑把它提升到共同的父组件。