ReactJS组件-yiteyi-C++库

A. 组成部分 是React的核心构建块之一。换句话说，我们可以说，您将在React中开发的每个应用程序都将由称为组件的部分组成。组件使构建UI的任务变得更加容易。你可以看到一个UI被分解成多个单独的部分，称为组件，并独立处理它们，然后将它们合并到一个父组件中，这将是你的最终UI。你可以在下图中看到，我们已经将Geeksforgeks主页的UI分解为各个组件。

null

图片[1]-ReactJS组件-yiteyi-C++库

谷歌顶部的自定义搜索可以被视为一个单独的组件，导航栏可以被视为一个单独的组件，边栏是一个单独的组件，文章或帖子列表也是一个单独的组件，我们可以合并所有这些单独的组件，形成一个父组件，它将成为主页的最终用户界面。 React中的组件基本上返回一段JSX代码，告诉屏幕上应该呈现什么。在React中，我们主要有两种类型的组件：

功能组件 ：功能组件只是javascript函数。我们可以通过编写javascript函数在React中创建一个功能组件。这些函数可能接收数据作为参数，也可能不接收数据作为参数，我们将在本教程后面讨论。下面的示例显示了React中的有效功能组件：
```
const Democomponent=()=>
{
    return <h1>Welcome Message!</h1>;
}
```
类组件 ：类组件比功能组件稍微复杂一些。功能组件不知道程序中的其他组件，而类组件可以相互协作。我们可以将数据从一个类组件传递到其他类组件。我们可以使用JavaScript ES6类在React中创建基于类的组件。下面的示例显示了React中有效的基于类的组件：

class Democomponent extends React.Component
{
    render(){
          return <h1>Welcome Message!</h1>;
    }
}

我们在上面两个例子中创建的组件是等效的，我们还说明了功能组件和类组件之间的基本区别。在后续教程中，我们将了解更多基于类的组件的属性。现在，请记住，只有当我们确定我们的组件不需要与任何其他组件交互或工作时，我们才会使用功能组件。也就是说，这些组件不需要来自其他组件的数据，但是我们可以在单个功能组件下组合多个功能组件。我们也可以为此目的使用基于类的组件，但不建议使用基于类的组件，因为无需使用这些组件将使您的应用程序更加高效。在这篇文章中，我们将主要编写功能组件，使事情更容易理解。我们将在本教程后面详细讨论基于类的组件。

渲染组件

在我们上一篇关于在React中渲染元素我们已经看到了如何使用ReactDOM呈现用DOM标记初始化的元素。render（）方法。React还能够呈现用户定义的组件。要在React中呈现组件，我们可以使用用户定义的组件初始化元素，并将该元素作为第一个参数传递给ReactDOM。render（）或直接将组件作为第一个参数传递给ReactDOM。render（）方法。下面的语法显示了如何将组件初始化为元素：

const elementName = <ComponentName />;

在上述语法中 组件名称 是用户定义组件的名称。笔记：组件名称应始终以大写字母开头。这样做是为了区分组件标记和html标记。下面的示例显示了一个名为Welcome to screen的组件：

打开你的 指数js 文件，并进行以下更改：

src指数。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
                                      
                           // This is a functional component                         
                           const Welcome=()=>                         
                           {                         
                                                     return                                        <h1>Hello World!</h1>                         
                           }                         
                                      
                           ReactDOM.render(                         
                                                     <Welcome />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

输出：

图片[2]-ReactJS组件-yiteyi-C++库

让我们逐步看看上面的例子中发生了什么：

我们称之为反应域。render（）作为第一个参数。
React然后调用组件Welcome，返回

Hello World

；结果呢。
然后，ReactDOM有效地更新DOM以与返回的元素匹配，并将该元素呈现给id为“root”的DOM元素。

有关组件打开的详细信息组件集2 参考 : https://reactjs.org/docs/components-and-props.html

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章