React组件Component用法解析 – ReactJS实战教程

上一章ReactJS实战教程请查看：React JavaScript扩展JSX用法详解

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

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

每个React组件都有自己的结构、方法和api。它们可以根据你的需要进行重用。为了更好地理解，可以将整个UI看作一棵树。在这里，根是起始组件，其他每个部分都成为分支，这些分支又进一步划分为子分支。

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

• 功能组件
• 类组件

功能组件

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

function WelcomeMessage(props) {  
  return <h1>Welcome to the , {props.name}</h1>;  
}  

功能组件也称为无状态组件，因为它们不保存或管理状态。它可以在下面的例子中解释。

例子

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {  
      return (  
         <div>  
            <First/>  
            <Second/>  
         </div>  
      );  
   }  
}  
class First extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>SRCMINI</h1>  
         </div>  
      );  
   }  
}  
class Second extends React.Component {  
   render() {  
      return (  
         <div>  
            <h2>www.srcmini02.com</h2>  
            <p>这个网站包含了很好的CS教程.</p>  
         </div>  
      );  
   }  
}  
export default App;  

类组件

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

class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>这是主要的组件.</div>  
    );  
  }  
}  

类组件也称为有状态组件，因为它们可以保存或管理本地状态，它可以在下面的例子中解释。

例子

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

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();  
      this.state = {  
         data:   
         [  
            {             
               "name":"AAA"             
            },  
            {            
               "name":"BBB"             
            },  
            {    
               "name":"CC"          
            }  
         ]  
      }  
   }  
   render() {  
      return (  
         <div>  
            <StudentName/>  
            <ul>            
                {this.state.data.map((item) => <List data = {item} />)}           
            </ul>  
         </div>  
      );  
   }  
}  
class StudentName extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Messages Detail</h1>  
         </div>  
      );  
   }  
}  
class List extends React.Component {  
   render() {  
      return (  
         <ul>            
            <li>{this.props.data.name}</li>   
         </ul>  
      );  
   }  
}  
export default App;