背景
React 组件相互传参时，除了用state，还会经常看到一个Props对象，关于它的面纱及两者区别，将在文本进行实践及分析。
分析
React 中的 props 是用于从父组件向子组件传递数据的一种机制。props 是一个包含了传递给组件的属性的对象。通过使用 props，可以使组件之间实现数据的传递和通信。
- 传递数据： 父组件通过在子组件上使用属性的方式将数据传递给子组件。这样，子组件就能够访问和使用这些数据。
// 父组件
<ChildComponent name="John" age={
25} />
// 子组件
const ChildComponent = (props) => {
console.log(props.name); // 输出: John
console.log(props.age); // 输出: 25
// ...
};
不可变性（Immutability）：props 是只读的，子组件不能直接修改传递给它们的 props。这有助于维护数据的单一来源，并且有助于追踪数据的变化。
默认值（Default Values）： 可以为 props 指定默认值，以确保在未提供特定属性时组件仍能正常工作。
// 在子组件中指定默认值
const ChildComponent = (props) => {
const {
name = 'Guest', age = 0 } = props;
// ...
};
- 类型检查（Type Checking）： 使用 PropTypes 库等工具可以对 props 进行类型检查，以确保组件得到正确类型的数据。
import PropTypes from 'prop-types';
const ChildComponent = (props) => {
// ...
};
ChildComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};
- 解构赋值（Destructuring）： 通过解构赋值，可以更方便地从 props 中提取需要的属性。
const ChildComponent = ({
name, age }) => {
// 使用解构赋值从 props 中提取属性
// ...
};
- 传递函数： 除了传递数据外，还可以通过 props 将函数传递给子组件，以实现父子组件之间的交互。
// 父组件
const ParentComponent = () => {
const handleClick = () => {
// 处理点击事件的逻辑
};
return <ChildComponent onClick={
handleClick} />;
};
// 子组件
const ChildComponent = ({
onClick }) => {
return <button onClick={
onClick}>Click me</button>;
};
和state区别
props（属性）和state（状态）虽然它们可用于处理组件间的数据传递和组件内部的状态管理，但**props是只读的，**子组件不能直接修改传递给它们的 props，而state 是可变的，可以通过调用 setState 方法来更新组件的状态。
