📜  ReactJS 组件完整参考

📅  最后修改于: 2022-05-13 01:56:49.479000             🧑  作者: Mango

ReactJS 组件完整参考

组件是自由和可重用的代码片段。它们的用途与 JavaScript 函数相似。但是,工作隔离并通过渲染函数返回 HTML。

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

React 中的组件基本上返回一段 JSX 代码,它告诉应该在屏幕上呈现什么。在 React 中,我们主要有两种类型的组件:

  • 功能组件:功能组件只是 JavaScript 函数。我们可以通过编写 JavaScript函数来为 React 创建一个函数式组件。这些函数可能会或可能不会接收数据作为参数,我们将在本教程后面讨论。下面的示例显示了 React 中的一个有效功能组件:
Javascript
function Democomponent()
  
{
  
   return 

Welcome Message!

;    }


Javascript
class Democomponent extends React.Component
  
{
  
   render(){
  
         return 

Welcome Message!

;       }    }



  • 类组件:类组件比功能组件稍微复杂一些。功能组件不知道程序中的其他组件,而类组件可以相互协作。我们可以将数据从一个类组件传递到其他类组件。我们可以使用 JavaScript ES6 类在 React 中创建基于类的组件。

下面的例子展示了 React 中一个有效的基于类的组件:

Javascript

class Democomponent extends React.Component
  
{
  
   render(){
  
         return 

Welcome Message!

;       }    }

完整参考:

  • 反应JS |成分
  • 反应JS |组件 – 第 2 组
  • ReactJS 纯组件
  • 反应JS |功能组件
  • 反应JS |组件的生命周期
  • React 中函数式组件和类组件的区别
  • 展示组件与容器组件