如何理解react prop
React Props 的基本概念
Props（Properties 的缩写）是 React 中用于从父组件向子组件传递数据的机制。它们是只读的，子组件不能直接修改接收到的 props。Props 可以是任何 JavaScript 值，包括字符串、数字、对象、数组、函数等。
Props 的传递方式
在父组件中，通过类似 HTML 属性的语法将数据传递给子组件。子组件通过函数参数（函数组件）或 this.props（类组件）访问这些数据。
// 父组件传递 props
function ParentComponent() {
return <ChildComponent name="Alice" age={25} />;
}
// 函数组件接收 props
function ChildComponent(props) {
return <div>{props.name} is {props.age} years old</div>;
}Props 的不可变性
React 的核心原则之一是 props 的不可变性。子组件不应直接修改接收到的 props，这有助于维护单向数据流和组件间的清晰关系。如果需要基于 props 变化，应该使用 state 或 context。
Props 的类型检查
使用 PropTypes 或 TypeScript 可以对 props 进行类型检查，确保组件接收正确类型的数据：
import PropTypes from 'prop-types';
function ChildComponent(props) {
// 组件实现
}
ChildComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
};Props 的默认值
可以为 props 设置默认值，当父组件未传递相应 prop 时使用：
function ChildComponent(props) {
return <div>{props.name || 'Guest'}</div>;
}
// 或使用 defaultProps
ChildComponent.defaultProps = {
name: 'Guest'
};Props 与 Children
特殊 prop children 允许组件接收嵌套内容，这使得组件可以像 HTML 元素一样包含其他内容：
function ParentComponent() {
return (
<ChildComponent>
<p>This will be passed as children</p>
</ChildComponent>
);
}
function ChildComponent(props) {
return <div>{props.children}</div>;
}Props 的高级用法
Props 可以传递函数，实现子组件向父组件的通信（回调模式）。也可以传递整个组件作为 prop（render props 模式），提供更大的灵活性。
// 回调函数示例
function ParentComponent() {
const handleClick = () => console.log('Clicked');
return <ChildComponent onClick={handleClick} />;
}
// render props 示例
function DataProvider({ render }) {
const data = fetchData();
return render(data);
}理解 props 是掌握 React 组件通信和数据流的关键。它们提供了一种清晰、可预测的方式来构建组件层次结构，同时保持组件的独立性和可重用性。
