开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

概念

React 组件使用 props 来相互传递数据。

使用

默认值

function Avatar({ person, size = 100 }) {
  // ...
}

默认值仅在缺少 size prop 或 size={undefined} 时生效。 但是如果你传递了 size={null} 或 size={0}，默认值将 不 被使用。

使用 JSX 展开语法传递 props

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

请克制地使用展开语法。 如果你在所有其他组件中都使用它，那就有问题了。 通常，它表示你应该拆分组件，并将子组件作为 JSX 传递。

注意

所有 React 组件都必须像纯函数一样确保它们的 props 不被更改

// 纯函数
function sum(a, b) {
  return a + b;
}
// 不是纯函数改变了入参
function withdraw(account, amount) {
  account.total -= amount;
}