📜  [[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;

输出: