Props是用来存储数据的，这些数据可以被React组件的孩子们访问。
它们是可重复使用概念的一部分。Props代替了类的属性，允许你在整个组件层次结构中创建一致的接口。
在这篇文章中，我们将学习React中的props。我们将看看它们是什么以及它们如何工作。然后我们将看看道具与状态的比较。
我们将讨论的内容:
- 什么是道具？
- 如何声明一个道具
- 如何使用
defaultProps - Props与React中的状态
所以，让我们开始吧
什么是React中的props？
Props简单地代表了属性。它们是使组件可重复使用的东西。因为它们执行一个重要的功能--它们将数据从一个组件传递到另一个组件。
Props充当了组件通信的渠道。Props从父代传递到子代，帮助你的子代访问进入父代树中的属性。
现在，想象一下我们有一个产品形式的组件，由产品的名称、描述和价格组成。我们所要做的就是写一次组件，并通过改变我们通过道具传递的数据来多次重复使用它，从而将其渲染成所需的输出。
值得注意的是:
- 我们在函数式组件和基于类的组件中都使用props。
- 我们从上到下传递props。我们也可以把它称为从祖先到后代，或者从父母到子女。
- Props是只读的。这意味着一旦一个组件收到一堆道具，我们就不能改变它，但我们只能使用和消费它，不能修改向下传递给组件的属性。如果我们想修改，我们就必须在React中引入我们称之为状态的东西。
如何在React中使用道具
我们将使用我之前关于将一个产品作为一个组件并多次重复使用的解释来演示如何使用props。
我们首先要看的是如何在不进行结构化的情况下使用props。然后我们将看看如何使用带有析构的props。
作为一个初学者，知道如何在没有析构的情况下使用道具是非常重要的，这样你就可以掌握道具的工作原理。
如何使用没有结构化的道具
为了开始，让我们创建一个功能组件:
import React from "react";
function MyProducts() {
return (
<div>
</div>
);
}
export default MyProducts;
然后我们要初始化我们的props。所以我们的功能组件会是这样的:
import React from "react";
function MyProducts(props) {
return (
<div>
<h1>{props.name}</h1>
<p>{props.description}</p>
<p>{props.price}</p>
</div>
);
}
export default MyProducts;
所以基本上，我们把props 作为参数传入我们的函数中。props 被作为参数传给我们的功能组件。然后，我们试图通过编写以下内容来访问它：props.name ，props.price ，和props.description 。
现在我们已经完成了，我们可以回到我们的App.js 来渲染我们的产品，并向这三个props传递一些数据。道具是像HTML属性一样传递的。我们的App.js 将看起来像这样:
import "./App.css";
import MyProducts from "./MyProducts";
function App() {
return (
<div className="App">
<MyProducts
name="temitope"
description="the product has fantastic features"
price={1000}
/>
</div>
);
}
export default App;
这就是我们的结果:
所以这里是使用道具的逻辑。我们首先要初始化它，然后我们需要访问道具，以及它持有什么样的属性。然后，我们的渲染组件消耗这些属性，并将数据传递给它们。
道具是很方便的!为什么呢？因为我们可以让一个组件以各种方式重用。为了证实这一点，我们将复制我们渲染出来的MyProducts ，粘贴上另一行，但这次是传入一些其他数据:
import "./App.css";
import MyProducts from "./Myproducts";
function App() {
return (
<div className="App">
<MyProducts
name="temitope"
description="the product is has fantastic features"
price={1000}
/>
<MyProducts
name="iphone"
description="awesome camera features!"
price={5000}
/>
</div>
);
}
export default App;
所以你可以看到我们只是在用不同的属性重复使用同一个组件。现在让我们来看看如何用析构法传递道具。
如何用结构化的方式使用道具
解构是一个JavaScript功能，它允许你从一个数组或对象中提取部分数据。让我们看一个简单的例子，看看它是如何工作的。
比方说，我们有一个todos数组，想获得数组中的前两个元素。以前的方法是这样做的:
const todo = ["bath","sleep","eat"];
// old way
const firstTodo = todo[0];//bath
const secondTodo = todo[1];//sleep
console.log(firstTodo);
console.log(secondTodo);
解构提供了一个更简单的方法来做到这一点:
const todo = ["bath","sleep","eat"];
// destructuring
const [firstTodo, secondTodo] = todo;// bath, sleep
console.log(firstTodo);
console.log(secondTodo);
在React中，结构化允许我们把我们的道具拆开或解包，这让我们可以访问我们的道具，并以更可读的格式使用它们。
我们可以在上一节的代码中使用析构，如下所示:
import React from "react";
function MyProducts({ name, description, price }) {
return (
<div>
<h1>{name}</h1>
<p>{description}</p>
<p>{price}</p>
</div>
);
}
export default MyProducts;
这个方法和上一个方法的区别在于，我们是把道具拉开，解构它们，然后再渲染它们。如果我们检查我们的结果，我们会发现它仍然是完整的。
由于道具可以从上到下传递，我们可以创建另一个子组件，在这个组件中我们可以向下传递父的属性。让我们看看是怎么做的。
创建另一个名为AdditionalDescription 的文件，并在其函数中以名称和描述的形式传入一些props:
import React from "react";
function AdditionalDescription({ name, description }) {
return (
<div>
</div>
);
}
export default AdditionalDescription;
然后，我们将有两个段落标签显示名称和描述。这将使这个组件看起来像这样:
import React from "react";
function AdditionalDescription([name, description]) {
return (
<div>
<p>{name}</p>
<p>{description}</p>
</div>
)
}
export default AdditionalDescription;
现在让我们渲染一下我们的AdditionalDescription ，并向它传递一些道具:
<AdditionalDescription name={name} description={description} />
你会看到，它正在接受父类的道具。
如何设置道具的默认值
defaultProps 是一个React组件属性，允许我们为道具参数设置默认值。当我们没有传入任何道具数据时，它通常会派上用场。
让我们继续，创建一个默认的道具:
import React from "react";
function MyProducts({ name, description, price }) {
return (
<div>
<h1>{name}</h1>
<p>{description}</p>
<p>{price}</p>
</div>
);
}
Myproducts.defaultProps = {
name: "temitope",
description: "i like this feature",
price: 500,
};
export default MyProducts;
我们在代码接近尾声的时候为我们的道具声明了默认值，就在我们导出组件的时候。
为了声明默认道具，我们使用了组件的名称，后面是一个点，然后是defaultProps ，这在你创建React应用时就包含了。
有了这个，我们就不会有一个空的道具，因为现在无论我们在哪里导入这个组件，这些值都将是初始值。但当我们向它传递数据时，默认值就会被覆盖。
React中的道具与状态
状态是React中管理数据的另一种方式。那么状态与道具有什么不同呢？首先要注意的是，道具是read-only ，是不可变的，而状态是异步变化的，是可变的。
一个状态可以随着时间的推移而改变，这种改变可以作为对用户行为或系统事件的响应而发生。状态只能在组件内部被访问或修改。
另一方面，道具允许将数据从一个组件传递到另一个组件。下面的表格显示了它们的区别:
状态 | 道具 | 状态 |
1 | 道具是只读的 | 状态异步变化 |
2 | 它们是不可变的 | 它们是可变的 |
3 | 它们允许你将数据从一个组件传递给另一个组件 | 它们持有关于组件的信息 |
4 | 它们可以向下传递并被子组件访问 | 它们不能被子组件访问 |
5 | 道具基本上用于组件之间的通信 | 状态是用来渲染动态变化的 |
6 | 道具使组件可重复使用 | 状态不能使组件可重用 |
总结
这篇文章谈到了作为一个初学者你需要知道的关于道具的一切。你了解了它们是什么以及如何使用它们。
我们还看了一下道具与状态的区别，举了一些例子，这些例子会很有用，所以你可以完全理解什么是道具。
如果你觉得这篇文章有帮助，请分享这篇文章。谢谢你的阅读!
