ReactJS – 组件 – 代码cn 代码吧

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

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

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

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

Properties – 使组件能够接收输入。
Events事件– 使组件能够管理 DOM 事件和最终用户交互。
State – 使组件保持有状态。有状态组件根据其状态更新其 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()来维护其状态。
类组件有一个生命周期，通过专用回调接口访问每个生命周期事件。功能组件没有生命周期。同样，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 组件就足够了。

创建一个React组件

创建类组件

例子

输出

创建函数组件

推荐阅读：