14. 深入理解React中的Props：全面指南

React的核心是基于组件的架构，而掌握组件之间如何通信是学习React的基础之一。在这种通信系统的核心就是props（属性的简称）。在这篇深入探讨中，我们将探索关于React中props的所有知识，从基本用法到确保应用程序保持可预测性和可维护性的重要规则。

什么是Props？

Props是React中从父组件向子组件传递数据的方式。可以将它们想象成传递给常规JavaScript函数的参数或实参。就像你可以通过传递不同的参数来自定义函数的行为一样，你也可以通过传递不同的props来自定义组件的外观和行为。

如组件树图所示，数据从上到下流动。App组件可能会将props传递给Header、Menu和Footer组件。然后，Menu组件可能会将额外的props传递给多个Pizza组件和一个Order组件。

Props的目的

Props在React应用中服务于几个重要目的：

数据通信：使父组件能够将数据传递给子组件。
组件配置：Props允许你配置和自定义子组件的外观和行为方式。
组件复用：通过props，你可以创建多功能组件，根据接收到的props显示不同的内容或表现出不同的行为。

让我们看一个简单Button组件的实际例子：

<Menu>
  <Button bgcolor="blue" text="New" />
  <Button bgcolor="green" text="Edit" />
  <Button bgcolor="red" text="Delete" />
</Menu>

在这个例子中，Menu组件渲染了三个Button组件，每个组件都有不同的props。父组件(Menu)通过传递不同的bgcolor和text props值来控制每个Button的外观。

什么可以作为Props传递？

Props非常灵活。你可以传递：

单一值（字符串、数字、布尔值）
数组
对象
函数
其他React组件

这种灵活性允许复杂的组件设计和强大的模式。以下是一个展示各种数据类型作为props传递的例子：

function CourseRating() {
  const [rating, setRating] = useState(0);
  
  return (
    <Rating
      text="Course rating"
      currentRating={rating}
      numOptions={3}
      options={["Terrible", "Okay", "Amazing"]}
      allRatings={{ num: 2390, avg: 4.8 }}
      setRating={setRating}
      component={Star}
    />
  );
}

这个组件传递了字符串、数字、数组、对象、函数，甚至另一个组件作为props！

Props与State：理解React的数据模型

要真正理解props，我们需要将它们放在React数据模型的更大上下文中。React基于两种主要类型的数据渲染组件：

Props：从父组件传递的数据（外部数据）
State：可以随时间变化的内部组件数据

关键区别在于谁”拥有”并可以修改数据：

Props来自父组件，接收组件不能修改
State由组件本身拥有，可以通过该组件的逻辑更新

不可变规则：Props是只读的！

React的几个严格规则之一是props是不可变的（只读的）。组件绝不能修改它接收到的props。

// 不要这样做！
function Component(props) {
  // 这违反了React的规则
  props.x = 25;
  
  return <h1>Number {props.x}</h1>;
}

如果你需要修改来自props的数据，你应该：

使用state来跟踪该数据的修改版本
请求父组件更改数据（我们稍后将探讨这种模式）

为什么Props是不可变的？

props的不可变性不仅仅是一个任意规则。它服务于几个重要目的：

防止副作用：修改props会影响父组件，在当前函数范围之外创建”副作用”。
纯函数：React组件应该在其props和state方面表现得像纯函数。纯函数不修改其输入，并且对相同的输入始终返回相同的输出。
优化：React可以通过比较props来优化渲染，当props不会意外变化时，这种比较更加可预测。
可预测的数据流：当流是单向的时，更容易理解数据来自何处以及如何变化。

总结⬇️

单向数据流

React采用单向数据流范式。数据以一个方向流动：从父组件向下到子组件。

这种方法有显著的优势：

可预测性：应用程序变得更加可预测和易于理解，因为数据有明确的来源和方向。
调试：当出现bug时，更容易追踪问题数据的起源。
性能：单向数据绑定通常比双向绑定（在Angular等框架中使用）更高效。

总结

Props是React应用中通信的支柱。通过从父组件向子组件传递数据，props使你能够从简单、可重用的组件构建复杂的UI。

记住这些要点：

Props从父组件流向子组件，创建单向数据流
Props可以是任何JavaScript值：原始值、对象、数组、函数，甚至其他组件
Props是只读的，接收组件不应该修改它们