📌  相关文章
📜  [[ReactJS组件

📅  最后修改于: 2020-12-19 03:50:49             🧑  作者: Mango

反应组件

早期，开发人员编写了数千行代码来开发单个页面应用程序。这些应用程序遵循传统的DOM结构，因此在其中进行更改是一项非常具有挑战性的任务。如果发现任何错误，它将手动搜索整个应用程序并进行相应更新。引入了基于组件的方法来克服一个问题。在这种方法中，整个应用程序被划分为一个小的逻辑代码组，称为组件。

组件被视为React应用程序的核心构建块。它使构建UI的任务变得更加容易。每个组件都存在于同一空间中，但它们彼此独立工作，并将所有组件合并到一个父组件中，这将是应用程序的最终UI。

每个React组件都有自己的结构，方法和API。它们可以根据您的需要进行重用。为了更好地理解，请将整个用户界面视为一棵树。在此，根是起始组件，其他每个分支都成为分支，进一步分为子分支。

在ReactJS中，我们主要有两种类型的组件。他们是

  • 功能组件
  • 类组件

功能组件

在React中，函数组件是一种编写仅包含render方法且没有自己状态的组件的方法。它们只是JavaScript函数，可能会也可能不会接收数据作为参数。我们可以创建一个将props(properties)作为输入并返回应呈现内容的函数。下例显示了有效的功能组件。

function WelcomeMessage(props) {
  return 
Welcome to the , {props.name}
;
}

功能组件也称为无状态组件，因为它们不保存或管理状态。可以在以下示例中进行说明。

例

import React, { Component } from 'react';
class App extends React.Component {
   render() {
      return (
         

            
            
         

      );
   }
}
class First extends React.Component {
   render() {
      return (
         

            
JavaTpoint

         

      );
   }
}
class Second extends React.Component {
   render() {
      return (
         

            
www.javatpoint.com

            
This websites contains the great CS tutorial.

         

      );
   }
}
export default App;

输出：

类组件

类组件比功能组件更复杂。它需要您从React扩展。组件并创建一个渲染函数，该函数返回一个React元素。您可以将数据从一个类传递到其他类组件。您可以通过定义扩展Component并具有render函数的类来创建类。下面的示例显示了有效的类组件。

class MyComponent extends React.Component {
  render() {
    return (
      
This is main component.

    );
  }
}

类组件也称为有状态组件，因为它们可以保存或管理本地状态。可以在以下示例中进行说明。

例

在此示例中，我们将创建无序元素的列表，在该列表中，我们将为数据数组中的每个对象动态插入StudentName。在这里，我们使用的ES6箭头语法(=>)看上去比旧的JavaScript语法干净得多。它可以帮助我们用更少的代码行来创建元素。当我们需要创建包含很多项目的列表时，它特别有用。

import React, { Component } from 'react';
class App extends React.Component {
 constructor() {
      super();
      this.state = {
         data: 
         [
            {           
               "name":"Abhishek"           
            },
            {          
               "name":"Saharsh"           
            },
            {  
               "name":"Ajay"        
            }
         ]
      }
   }
   render() {
      return (
         

            
            
              
                {this.state.data.map((item) => )}         
            

         

      );
   }
}
class StudentName extends React.Component {
   render() {
      return (
         

            
Student Name Detail

         

      );
   }
}
class List extends React.Component {
   render() {
      return (
         
              
            
  • {this.props.data.name}
    •  
         

      );
   }
}
export default App;

输出：