ReactJS - 组件

上一页
下一页

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

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

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

React 组件使用三个概念来实现这些功能：

  • 属性 - 使组件能够接收输入。

  • 事件 - 使组件能够管理 DOM 事件和最终用户交互。

  • 状态 - 使组件保持状态。有状态组件会根据其状态更新其 UI。

React 中有两种类型的组件：

  • 函数组件

  • 类组件

函数组件

函数组件实际上定义为 JavaScript 函数。此 React 组件接受单个对象参数并返回一个 React 元素。请注意，React 中的元素不是组件，但组件由多个元素组成。以下是 React 中函数组件的语法：

function function_name(argument_name) {
   function_body;
}

类组件

类似地，类组件是由多个函数组成的基本类。React 的所有类组件都是React.Component类的子类，因此类组件必须始终扩展它。以下是基本语法：

class class_name extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

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

创建 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 组件（在我们的 expense-manager 应用中），ExpenseEntryItem 来展示一个支出条目。支出条目包括名称、金额、日期和类别。支出条目的对象表示如下：

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

在您喜欢的编辑器中打开expense-manager应用程序。

接下来，在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

输出

接下来，打开浏览器，在地址栏中输入https://:3000，然后按 Enter 键。

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 组件。

组件拆分

即使 JavaScript 被认为更容易执行，但在许多情况下，由于大量类或相对简单的项目的依赖关系，代码会变得复杂。对于更大的代码，浏览器中的加载时间会更长，从而降低其性能效率。这就是可以使用代码分割的地方。代码分割用于将组件或捆绑包分成较小的块以提高性能。

代码分割只会加载浏览器当前需要的组件。此过程称为延迟加载。这将大大提高应用程序的性能。必须注意的是，我们并不是试图减少代码量，而只是试图通过加载用户可能永远不需要的组件来减轻浏览器的负担。让我们来看一个示例代码。

示例

让我们首先查看一个示例应用程序的捆绑代码以执行任何操作。

// file name = app.js
import { sub } from './math.js';

console.log(sub(23, 14));
// file name = math.js
export function sub(a, b) {
  return a - b;
}

上面应用程序的捆绑包将如下所示：

function sub(a, b) {
  return a - b;
}
console.log(sub(23, 14));

现在，在您的应用程序中引入代码分割的最佳方法是使用动态导入()。

// Before code-splitting
import { sub } from './math';

console.log(add(23, 14));

// After code-splitting
import("./math").then(math => {
  console.log(math.sub(23, 14));
});

当使用此语法（在 Webpack 等捆绑包中）时，代码分割将自动开始。但是，如果您使用的是 Create React App，则代码分割已为您配置好，您可以立即开始使用它。

打印页面
上一页
下一页
广告
© . All rights reserved.