跳到主要内容

Props

在 React 中， Props（属性） 是父组件向子组件传递数据的主要机制。他们是只读的、不可变的，用于组件间的通信。

一、基本用法​

Props 作为自定义的 HTML 属性传递给组件：

// 子组件
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>年龄：{props.age}</p>
    </div>
  );
}

// 在父组件使用
<UserCard name={'Tom'} age={86} />;

二、默认值设置​

当父组件未传递 Prop 时，使用默认值：

// 类组件
class UserCard extends React.Component {
  static defaultProps = {
    age: 86, // 默认年龄
    isVerified: false,
  };
  render() {
    // 实现方法
  }
}
// 函数组件
function UserCard({ age = 86 }) {
  // 实现方法
}

三、展开运算符 （...props）​

批量传递多个 Props：

const userInfo = {
  name: 'Tom',
  age: 86,
  partner: 'Jerry',
};

// 直接展开对象的所有属性
<UserCard {...userInfo} />;

选择性传递 Props，尤其是当部分值需要单独处理：

const { name, ...otherProps } = useInfo;

<UserInfo name={name} {...otherProps} />;

四、特殊的 Props​

  • children：传递子元素
  • key：key 作为一个特殊的 prop，用于列表渲染时帮助 React 识别哪些改变了、添加了或删除了
  • 传递回调函数

五、注意事项​

  • Props 不可变：子组件不能直接修改 Props（单向数据流）
  • 避免过度嵌套：深沉传递 Props 时考虑使用 Context API
  • 使用类型校验：对于大型项目，使用 PropTypes 或 TypeScript
  • 命名清晰：使用有意义的 prop 名称
  • 结构常用 props：提高代码的可读性
  • 性能优化：避免在 Props 中传递新对象/函数导致子组件无效重渲染（用 useCallback 或 React.memo 优化）
  • 默认值优先级：defaultProps 仅在未传入 Props 或传入 undefined 时生效， null 会被视为有效值