如何理解react prop
React Props 的基本概念
Props（Properties 的缩写）是 React 中用于父组件向子组件传递数据的机制。它们是只读的，子组件不能直接修改接收的 props。Props 可以是任意类型的数据，包括字符串、数字、对象、函数，甚至是其他 React 组件。
Props 的核心特性
- 单向数据流：数据从父组件流向子组件，确保数据变更的可预测性。
- 不可变性：子组件不能直接修改 props，必须通过父组件传递的回调函数间接更新数据。
- 动态传递：props 可以通过 JavaScript 表达式动态计算后传递。
使用 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：组件内部管理的可变数据，通过
useState或this.state维护。
高级用法
- 默认 Props：通过
defaultProps设置默认值。ChildComponent.defaultProps = { greeting: "Default Greeting" }; - PropTypes：使用
prop-types库进行类型检查（React 15.5+ 需单独安装）。import PropTypes from 'prop-types'; ChildComponent.propTypes = { greeting: PropTypes.string.isRequired };
常见场景
- 传递回调函数：父组件通过 props 将函数传递给子组件，子组件调用该函数通知父组件。
- 渲染子组件：通过
props.children访问组件标签内的内容（如<Child>Content</Child>）。
通过合理使用 props，可以构建清晰、可维护的组件层级关系。
