React js教程：React 中的组件（3）-慕源网

本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接

介绍

在上一篇文章中，我们介绍了创建 React 应用程序的基础知识。现在，转向什么是组件，我们将了解组件可以在 React 中的何处以及如何使用。

组件

在 React 中，组件被称为隔离的一段代码，可以在一个或另一个模块中重用。React 应用程序包含一个根组件，其中包含其他子组件；例如 – 在单个页面中，应用程序被细分为 3 个部分 – 页眉、主要内容和页脚。因此，有一个具有 3 个子组件的 App 组件 – Header Component、MainContent Component 和 Footer 组件。

React.js 中有两种类型的组件

无状态功能组件
有状态的类组件

无状态功能组件

这种类型的组件包括简单的 JavaScript 函数。这些组件包括不可变的属性，即属性的值不能改变。我们需要使用 Hooks（将在下一篇文章中讨论）来实现使用 JS 更改属性的功能。功能组件主要用于 UI。

例子

function Demo(props) {  
   return <h1> Hello, {props.Name} </h1>;  
}

演示

打开 App.js 并删除除 div 之外的其他 HTML 代码。现在，添加一个名为 Components 的新文件夹并添加一个名为 additional.js 的文件。

创建一个名为addition.js 的新文件。

添加无状态功能组件代码。

请注意，在 Addition.js 中，最后一行导出必须的默认添加。只有通过这一行，才能在父组件中使用。

现在，再次在 App.js 中，从“./Components/Addition”导入 Addition。导入后，我们可以使用导入的组件作为标签<Addition></Addition>。

现在在终端中，运行命令 npm start。

这将运行 React 应用程序，在浏览器中，结果将显示如下。

因此，通过这种方式，我们可以调用功能组件。

换句话说，我们可以将加法函数写成箭头函数，如下面的 snap 所示。

输出将保持不变，

我们可以为附加组件添加尽可能多的标签。它将显示在浏览器中。

有状态的类组件

Class 组件是 ES6 类，它扩展了 React 库中的 Component 类。类组件必须包含返回 HTML 的渲染方法。

class Demo extends React.Component{  
   render(){  
   return <h1> Hello, {props.Name} </h1>;  
   }  
}

演示

对于类组件，在组件文件夹中创建另一个名为 sum.js 的 JS 文件。

现在，从 React 库中导入 React 和组件。之后，声明类扩展组件。

现在，将导出的 sum 类导入 App.js。

保存文件它会自动编译并在浏览器中更新结果，

很重要的一点

您可以在不导出/导入类/功能组件的情况下使用它。
导入的类/函数必须大写；否则会报错。
返回 JSX 的类/功能组件，即）Javascript XML。

无状态功能和有状态类组件之间的区别

无状态功能组件	有状态的类组件
这些是一个简单的javascript函数	这些类扩展了 React 库中的 Component 类
无状态函数使用 Hooks 更改 View 中的属性值	有状态类使用 State 和 setState 来改变属性值
无状态不使用“this”关键字	有状态组件提供复杂的 UI 数据

概括

在本文中，我们回顾了组件及其在 React 应用程序中的重要性。组件正在构建一个 React js 块，可以重用和嵌套在其他组件中。它们在 React 应用程序中扮演着非常重要的角色。React 提供了 2 种类型的组件，Stateless Functional 和 Stateless Class Component。

本系列的下一个 >> Reactjs JSX、props 和 Hooks