了解 React 组件和道具
了解 React 组件和道具
React 中的组件是独立的、可重用的 UI 片段。一个典型的网页可能由导航栏、内容区域和页脚组成。在 React 中，我们将这些区域创建为组件（它又可能包含其他组件！）。正如我们将看到的，它节省了代码重复，并提供了极大的灵活性。
考虑组件的另一种方式是 JavaScript 函数。它们不是接收参数，而是接收“道具”，然后返回 React 元素来构建我们在屏幕上看到的内容！
成分
事实上，在 React 中——一切都是组件！尽管标准 HTML 标记是组件，但它们是内置并默认添加的。
我们来看一个例子：
从“反应”导入反应
从 'react-dom' 导入 ReactDOM
ReactDOM.render(<h1>我是一个组件！</h1> ,
document.getElementById('myapp'))
这里我们使用了 JSX 来插入 <h1>我是一个组件！</h1> 进入一个 id 为的元素 我的应用 .我们的 h1 被认为是一个组件，由 反应.DOM ，事实上所有的 HTML 标签也是如此。您可以通过键入来检查它们 反应.DOM 进入您的浏览器控制台。
构建自定义组件
这很好，但是我们如何构建自己的组件呢？这是 React 超越的地方，它使我们能够通过组合我们自己的自定义组件来构建 UI。
我们可以通过 2 种方式定义组件，现在让我们来看看每种方式：
功能组件
函数组件实际上只是 JavaScript 函数：
功能问候（道具）{
返回<h1>你好，{props.username}！</h1> ;
}
使这个函数成为 React 组件的原因在于它接受“props”（或属性）作为带有数据的参数，然后返回一个 React 元素。
类组件
ES6 类也可以用来创建组件：
类问候扩展 React.Component {
使成为（） {
返回<h1>你好，{this.props.username}！</h1> ;
}
}
我们上面的两个代码示例都是等效的——并且是创建组件的完全有效的方法。
直到最近，在 React 世界中，类组件被更频繁地使用——因为类组件允许用它们自己的状态定义组件（我将在我的下一篇文章中写关于状态的文章！）。
然而，随着 React Hooks 的出现，功能组件现在比以前强大得多，我们可能会看到这种趋势转回。
钩子超出了本文的范围！所以让我们继续组件和道具。
渲染组件
我们可以渲染我们的元素，它们代表 DOM 标签：
常量元素 =<div /> ;
我们还可以使用用户定义的组件来渲染我们的元素：
常量元素 =<Greet username="Richard" /> ;
当一个元素包含一个用户定义的组件时，它会将 JSX 属性作为一个对象传递给该组件。在 React 中，这个对象就是我们所说的“道具”。
道具
所以“props”是我们的组件获取属性的方式。
让我们看看它的实际效果：
功能问候（道具）{
返回<h1>你好，{props.username}！</h1> ;
}
常量元素 =<Greet username="Richard" /> ;
ReactDOM.render(
元素，
document.getElementById('root')
);
此代码将呈现“你好，理查德！”在页面上。
这里发生了什么？
ReactDOM.render()被称为<Greet username="Richard" />元素。- React 调用
迎接组件与{名称：'理查德'}作为道具。 - 我们的
迎接组件返回一个<h1>你好，理查德！</h1>元素作为结果。 - React DOM 更新 DOM 以匹配
<h1>你好，理查德！</h1>.
笔记 : 组件名称总是以大写字母开头！为什么？ React 将以小写字母开头的组件视为 DOM 标签。
函数组件中的道具
应该注意的是，当使用具有多个子组件的组件时（见下文 h1 和 p )，每个子组件都从父组件获取其道具。
使用功能组件时， 道具 是所有被传递的，它们可以通过添加道具作为函数参数来使用：
常量 BlogPostInfo = 道具 => {
返回 （
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
)
}
类组件中的道具
在一个类组件中，props 是默认传递的。它们可以作为 这个.props 在组件实例中。
从“反应”导入反应，{组件}
类 BlogPostInfo 扩展组件 {
使成为（） {
返回 （
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
将 props 传递给子组件是在应用程序中传递值的好方法。组件要么保存数据（有状态），要么通过它们的 props 接收数据。
现在我们知道如何在我们的组件中使用 props。让我们来看看我们可能会遇到的一些更常见的任务：
道具默认值
如果在初始化组件时缺少任何值，我们将需要提供默认值。可以指定默认值，如下所示：
BlogPostInfo.propTypes = {
标题：PropTypes.string，
描述：PropTypes.string
}
BlogPostInfo.defaultProps = {
标题： ''，
描述： ''
}
传递道具
当我们初始化一个组件时，我们像这样传递我们的 props：
const desc = '我的博文描述' <BlogPostInfo title="我的博文标题" description={desc} />
如果我们正在使用字符串，我们可以将 prop 作为字符串传递（就像我们上面的 'title' 一样。否则，我们使用变量，就像我们将上面的描述设置为 描述 .
“儿童”道具
这 孩子们 prop 与规范略有不同。它包含传入的任何值 身体 组件，例如：
<BlogPostInfo title="我的博文标题" description="{desc}">
更多单词
</BlogPostInfo>
在这个例子中，里面 博客帖子信息 我们可以通过 this.props.children .
组件中的组件
组件可以在其输出中包含其他组件。
创建一个完全没问题 我的应用 组件，呈现 迎接 多次：
功能问候（道具）{
返回<h1>你好，{props.username}！</h1> ;
}
功能我的应用程序（）{
返回 （
<div>
<Greet name="Bruce" />
<Greet name="Bethany" />
<Greet name="Bilbo" />
</div>
);
}
ReactDOM.render(
<MyApp />,
document.getElementById('root')
);
道具是只读的！
无论您的组件是声明为函数还是类组件，它都不能修改自己的 props。请参见以下示例：
函数总和（a，b）{
返回 a + b;
}
这是一个“纯”函数，因为它不会尝试更改其输入，并且总是会为相同的输入返回相同的结果。
“不纯”函数是改变其自身输入的函数：
功能提取（帐户，金额）{
account.total -= 金额；
}
在 React 中，这是一个禁忌！就其 prop 而言，每个组件都必须像纯函数一样工作。
我的下一篇文章将讨论 React 中的“状态”。借助状态，我们的组件能够更改其输出以响应诸如用户操作或网络响应之类的触发器——而不会违反此规则。
总结 我们去！我们已经介绍了构建组件的基础知识，以及了解它们如何融入我们的 React 应用程序的整体结构。我们还看到了如何使用 props 为我们的组件提供属性，并且我们研究了在使用组件和 props 时可能会遇到的一些常见任务。
结论
如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！
让我们联系
最初发表于 https://dev.to 2022 年 9 月 7 日。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
