理解 React Props 的基本概念

Props（Properties 的缩写）是 React 中用于传递数据的一种机制，允许父组件向子组件传递信息。Props 是只读的，子组件不能直接修改接收到的 props，保证了数据流的单向性。

Props 的核心特性

• 单向数据流：数据从父组件流向子组件，避免子组件直接修改父组件状态。
• 动态传递：Props 可以是任意 JavaScript 值（字符串、数字、对象、函数等）。
• 默认值支持：通过 defaultProps 为未传递的 props 提供默认值。

使用 Props 的示例

以下是一个简单的父子组件传递 props 的代码示例：

// 父组件
function ParentComponent() {
  const message = "Hello from Parent";
  return <ChildComponent greeting={message} />;
}

// 子组件
function ChildComponent(props) {
  return <h1>{props.greeting}</h1>;
}

Props 与 State 的区别

• Props：外部传入，不可变，用于组件间通信。
• State：组件内部管理，可变，用于动态更新组件状态。

高级用法

• 传递函数：通过 props 将父组件的函数传递给子组件，实现子组件触发父组件逻辑。
• Children Prop：通过 props.children 传递组件嵌套内容。

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

// 使用

Title

```

类型检查与默认值

使用 PropTypes（React 15.5+ 需单独安装）或 TypeScript 进行类型检查：

import PropTypes from 'prop-types';

ChildComponent.propTypes = {
  greeting: PropTypes.string.isRequired,
};
ChildComponent.defaultProps = {
  greeting: "Default Greeting",
};

通过以上内容，可以系统理解 React props 的作用、用法及最佳实践。