Element 和 Component 和有什么不一样？

React Element：它是 React 应用程序中的基本构建块，它是虚拟 DOM 节点的对象表示。 React Element 包含类型和属性。它的道具中可能包含其他元素。 React Element 没有任何方法，使其比组件更轻巧且渲染速度更快。

先决条件：

• ReactJS的知识

句法：

const ele1 =
;

这里 ele1 是我们给出的组件的名称。

让我们借助一个例子来理解。

创建反应应用程序：

步骤1：创建react项目文件夹，打开终端，如果你已经全局安装了create-react-app，输入命令npm create-react-app文件夹名称。

npm create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。

cd project

项目结构：它将如下所示。

示例：在src文件夹的index.js文件中，我们创建一个元素，命名为 ele1。这就是我们创建元素的方式，但要渲染它，我们需要将它放入容器 div 中，如果我们查看public文件夹中的 index.html 文件，我们会看到有一个 id =“root”的 div，我们使用这个 div 作为容器 div，所以为了渲染它，我们将编写如下

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele1 =
Welcome
;
  
// Simple javaScript to get the div with id ="root"
ReactDOM.render(ele1,document.getElementById("root"));

运行应用程序的步骤：移动到工作目录中的终端，然后运行命令

npm start

输出：

输出

但是上面提到的方式不是合适的，移动到合适的创建元素的方式，所以我们继续写不使用JSX，我们将使用React.createElement()，它会占用三个参数：- type用于创建元素的元素、属性和子元素。

句法：

React.createElement( )

在 index.js 中，我们创建了一个带有 h1 参数的元素，将其属性保持为 null，对于子元素，我们传递了一个字符串“Hey Geek”。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
// Without JSX
const ele1 = React.createElement("h1",null,"Hey Geek");
ReactDOM.render(ele1,document.getElementById("root"));

输出：

输出

React Component：它是独立且可重用的。它返回元素的虚拟 DOM。在创建组件时可能会或可能不会传递任何参数。一个组件可以进一步描述为功能组件和类组件。

注意：始终以大写字母开头的组件名称，反应将小写的组件名称视为 HTML 标记，因此它不会显示该组件。

句法：

function name (){
   return 

}

这就是我们创建功能组件的方式。

示例：让我们通过创建一个组件来更好地理解，让我们将组件命名为Welcome，我们在其中传递用户

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
function Welcome(user){
return 

  
Welcome {user.name}

}
const ele = 
ReactDOM.render(ele,document.getElementById("root"));

输出：

Element和Component的区别如下：

Element	Component
An element is always gets returned by a component.	A component can be functional or a class that optionally takes input and returns an element.
The element does not have any methods.	Each component has its life cycle methods.
A React element is an object representation of a DOM node.	A component encapsulates a DOM tree.
Elements are immutable i,e once created cannot be changed.	The state in a component is mutable.
An element can be created using React.createElement( ) with type property.	A component can be declared in different ways like it can be an element class with render() method or can be defined as a function.
We cannot use React Hooks with elements as elements are immutable.	React hooks can be used with both functional and class components
Elements are light, stateless and hence it is faster.	It is comparatively slower than elements.