编程中 ReactJs 组件的类型

ReactJs 中的组件是什么？

组件基本上是指 React 的基本单元和构建块。 为了更容易理解，就像世界上任何事物都是由原子组成的一样，组件只是 ReactJS 的组成部分。 使用 ReactJS 开发的任何应用程序或网站都将由称为组件的不同单元组成。

在上图中，您可以在网站的 UI 上找到几个组件。 菜单栏是一个组件，而左侧的特色列是另一个组件。 cookie 框也是一个组件，提供所有信息的主体又只是另一个。 因此，整个 UI 由不同的组件组成，以使网站对我们有用。 因此，网站的 UI 可以被视为父组件。

编程中 ReactJs 组件的类型

1. 功能组件

只需编写 Javascript 函数即可创建功能组件。 具体来说，函数式组件是那些接受 Props 并返回 JSX 的函数。 功能组件可能会也可能不会以参数的形式接收数据。 此外，功能组件没有生命周期方法或状态，但是可以通过简单地实现 React Hooks 来添加它们。 功能组件总是易于调试、阅读和测试。

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

在上面的代码图中，它是一个简单的组件，带有常量变量“Hello Emizen”。 常量变量被分配给返回 JSX 的箭头函数。 功能组件不需要是箭头函数，也可以使用常规 JavaScript 函数简单地声明。 同时，Props 也可以传入函数中，用于渲染 JSX 代码中的数据。

2.类组件

Class 组件是所有类型中使用最多的组件。 原因是类组件具有执行功能组件的每个功能的能力，同时还具有一些附加功能。 它还可以有效地利用 React 的主要功能、道具、状态和生命周期方法。 但是，类组件与功能组件相比相对更复杂。 数据可以很容易地从一个类组件传递到另一个类组件。

 // 类组件示例import React from 'react';class HelloWorld extends React.Component {
   使成为（） {
      返回 （
         <div>
            <p>你好艾米森！</p>
         </div>
      )
   }
}导出默认的HelloEmizen；

在上面的例子中可以观察到，类组件在类Hello Emizen之后使用了extends React.Component React.Component 。 然后，它还需要render()方法返回 JSX 代码。 在类组件中，可以声明一个状态，将其设置为 JavaScript 对象，并使用props处于初始阶段并在生命周期方法中更改状态。 它将需要 React Hooks 通过功能组件执行这些操作。

3.纯组件

纯组件是人们可以编写的最简单、最快速的组件。 由于纯组件不会修改或依赖其范围之外的不同变量的状态，因此它们可以轻松替换简单的功能组件。 仅返回渲染函数的组件最适合纯组件。 Pure 组件的最大用例是提供优化。

React.Component和React.PureComponent最大的区别在于纯组件在状态变化上表现出浅层的比较。 纯组件自动管理shouldComponentUpdate() 。

React 组件主要在以下情况下重新渲染：

• setState()被调用
• forceUpdate()被调用
• props值已更新

4. 高阶组件

也称为 HOC 的高阶组件不太像 React 组件，而更像是一种模式，这是 React 组合特性的结果。 HOC 的主要用例是与其他组件共享逻辑。

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

上面的代码图像有一个简单的组件来描述更高级别的组件。 这里的关键代码是this.props.myArray.map((element) => (<MyComponent />) 。此函数返回组件。组件的数量仅取决于数组中称为 HOC 的元素的数量. 该函数从 state 中获取一个数组，从而通过将每个元素转换为 React 组件来映射数组中的每个元素。

以下是高阶组件的简单概要：

1. 从 props 或 state 中获取数据
2. 映射数组并返回每个元素的 Reach 组件。

如何渲染 ReactJs 组件？

可以按照以下步骤来渲染 ReactJS 组件：

• 首先，创建一个扩展React.Component的同名 ES6 类。
• 添加了一个名为render()的空方法。
• 函数的主体被移动到render()方法中。
• 用render()正文中的this.props替换props 。
• 最后，删除剩余的空函数声明。

反应嵌套组件

React 最好的事情之一是组件可以相互嵌套。 此功能有助于显着创建复杂的用户界面。 在这里，子组件嵌套在父组件内。 组件相互嵌套称为内部嵌套和外部嵌套。

• 导出：当一个特定的模块或文件被导出并在另一个模块中使用时，它被称为导出。
• 导入：当特定模块或文件被导入并在现有模块中使用时，称为导入。

React 组件生命周期

React Web 应用程序基本上是不同组件的集合，这些组件是独立的，并且基于与它们的交互而运行。 这些组件中的每一个都有自己的生命周期。 生命周期是指在组件存在的不同阶段重新调用的一系列方法。

任何 React 组件基本上都有以下三个阶段：

1. 安装

组件初始化完成后，组件会被挂载到 DOM 上并呈现在网页上。 在这里，React 仅遵循预定义函数的命名约定的默认过程。 包含“Will”的函数代表某个特定阶段之前。 同样，包含“Did”的函数表示阶段完成后。 组件的安装阶段包括以下两个功能：

• componentWillMount() 函数：在组件挂载到 DOM 之前调用此函数。
• componentDidMount() 函数：与上一个相反，该函数在组件挂载到 DOM 后调用。

2.更新

更新基本上是更新组件的状态和道具的阶段，然后是用户的事件或命令，例如按键，单击鼠标等。它有助于活动网页根据需要运行和他们的用户的命令。

3. 卸载

它是组件生命周期的完成阶段。 在这个阶段，组件从 DOM 中卸载。 以下函数是此函数的唯一成员：

componentWillUnmount() 函数：在组件完全从 DOM 中卸载之前调用该函数。 它发生在组件从页面中删除之前，因此这意味着生命周期的结束。

我们希望这篇文章能让您对 React 组件的类型以及如何使用它们有一个基本的了解。 Emizentech 是一家领先的应用程序开发公司，开发网络、本地和混合移动应用程序。 因此，如果您需要专业的 ReactJs 开发人员，请与我们联系。