ReactJS - 组件

React 组件是 React 应用程序的构建块。让我们在本章中学习如何创建一个新的 React 组件以及 React 组件的特性。

React 组件代表网页中的一小部分用户界面。React 组件的主要工作是渲染其用户界面并在其内部状态发生更改时更新它。除了渲染 UI 之外，它还管理属于其用户界面的事件。总而言之，React 组件提供了以下功能。

用户界面的初始呈现。
事件的管理和处理。
每当内部状态发生变化时更新用户界面。

React 组件使用三个概念来完成这些功能 -

属性- 使组件能够接收输入。
事件- 使组件能够管理 DOM 事件和最终用户交互。
状态- 使组件保持有状态。有状态组件根据其状态更新其 UI。

让我们在接下来的章节中一一学习所有概念。

创建一个 React 组件

React 库有两种组件类型。类型根据其创建方式进行分类。

函数组件 - 使用纯 JavaScript 函数。
ES6 类组件 - 使用 ES6 类。

函数和类组件之间的核心区别是 -

功能组件本质上非常少。它唯一的要求是返回一个React 元素。

function Hello() { 
   return '<div>Hello</div>' 
}

使用 ES6 类组件可以完成相同的功能，只需很少的额外编码。

class ExpenseEntryItem extends React.Component {         
   render() { 
      return ( 
         <div>Hello</div> 
      ); 
   }
}

类组件支持开箱即用的状态管理，而函数组件不支持状态管理。但是，React为功能组件提供了一个钩子useState()来维护其状态。
类组件有一个生命周期，并通过专用的回调 API 访问每个生命周期事件。函数组件没有生命周期。同样，React 为函数组件提供了一个钩子useEffect()来访问组件的不同阶段。

创建类组件

让我们创建一个新的 React 组件（在我们的费用管理器应用程序中）ExpenseEntryItem 来展示费用条目项目。费用录入项目由名称、金额、日期和类别组成。费用条目的对象表示是 -

{ 
   'name': 'Mango juice', 
   'amount': 30.00, 
   'spend_date': '2020-10-10' 
   'category': 'Food', 
}

在您最喜欢的编辑器中打开费用管理器应用程序。

接下来，在src/components文件夹下创建一个文件ExpenseEntryItem.css来设置组件的样式。

接下来，通过扩展React.Component在src/components文件夹下创建一个文件ExpenseEntryItem.js。

import React from 'react'; 
import './ExpenseEntryItem.css'; 
class ExpenseEntryItem extends React.Component { 
}

接下来，在ExpenseEntryItem类中创建一个render方法。

class ExpenseEntryItem extends React.Component { 
   render() { 
   } 
}

接下来，使用 JSX 创建用户界面并从render方法返回它。

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}

接下来，将组件指定为默认导出类。

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

现在，我们成功创建了第一个 React 组件。让我们在index.js中使用新创建的组件。

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem'

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItem />
   </React.StrictMode>,
   document.getElementById('root')
);

例子

使用 CDN 在网页中可以完成相同的功能，如下所示 -

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>React application :: ExpenseEntryItem component</title>
   </head>
   <body>
      <div id="react-app"></div>
       
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
         class ExpenseEntryItem extends React.Component {
            render() {
               return (
                  <div>
                     <div><b>Item:</b> <em>Mango Juice</em></div>
                     <div><b>Amount:</b> <em>30.00</em></div>
                     <div><b>Spend Date:</b> <em>2020-10-10</em></div>
                     <div><b>Category:</b> <em>Food</em></div>
                  </div>
               );
            }
         }
         ReactDOM.render(
            <ExpenseEntryItem />,
            document.getElementById('react-app') );
      </script>
   </body>
</html>

接下来，使用 npm 命令为应用程序提供服务。

npm start

输出

接下来，打开浏览器并在地址栏中输入http://localhost:3000并按回车键。

Item: Mango Juice
Amount: 30.00
Spend Date: 2020-10-10
Category: Food

创建功能组件

React 组件也可以使用纯 JavaScript 函数创建，但功能有限。基于函数的 React 组件不支持状态管理和其他高级功能。它可用于快速创建简单的组件。

上面的ExpenseEntryItem可以在函数中重写，如下所示 -

function ExpenseEntryItem() {
   return (
      <div>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

在这里，我们只包含了渲染功能，这足以创建一个简单的 React 组件。