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

上一章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.srcmini.com< /h2> < p>这个网站包含了很好的CS教程.< /p> < /div> ); } } export default App;

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

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

类组件也称为有状态组件，因为它们可以保存或管理本地状态，它可以在下面的例子中解释。
例子
【React组件Component用法解析 – ReactJS实战教程】在本例中，我们创建了无序元素的列表，我们将为数据数组中的每个对象动态插入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 = http://www.srcmini.com/{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;