React基础知识（2）——第一个组件

本节主要解释什么是组件，以及怎样写组件。这是 React 和 Ant Design 的使用基础，只有学会了这些内容，才能理解后面的知识。如果你对 React 已经有所了解，可以跳过这一节。

组件的概念 按照功能划分，一张网页可以由多个互相独立的功能单位组成，这种功能单位就叫做“组件”（component）。比如，典型的网页分成页头、内容、页尾三个部分，就可以写成三个组件：Header、Content、Footer。这些组件拼装在一起，就构成了一张页面。

组件内部还可以包含下一级的组件。比如，“文章”组件内部可以包含“表单”组件，“表单”组件内部又可以包含“按钮”组件。

组件的好处有很多，下面是其中几点。

有利于细化 UI 逻辑，不同的组件负责不同的功能点。 有利于代码复用，多个页面可以使用同样的组件。 有利于人员分工，不同的工程师负责不同的组件。 React 的核心概念就是组件。这个框架的主要功能，就是定义了一套编写和使用组件的规范。本节开头的那段代码，就是定义了一个最简单的组件。

export default () => { return

; } 上面代码采用 ES6 模块格式，默认输出一个箭头函数。这个函数执行后，返回了一段 JSX 代码（后文介绍），代表 hello world 区块。这就是最简单的 React 组件的写法。

组件定义方法 1、展示型组件：（一般仅用于数据展示，无复杂逻辑）

import React from 'react';
//展示型组件(也叫无状态(state)组件)
//展示型组件的数据全都由父组件通过props传递进来，属于无状态组件
const XXX = ({props}) => {
    return (
        <div >
            这是展示组件{props.xxx}
        </div>
    )
};

2、容器型组件：(一般一个页面对应一个容器组件，里面会引入其他的展示组件作为子组件，除了数据展示还有复杂的业务逻辑)

import React, { Component } from 'react';
export default class ContainerComponent extends React.Component {
    //定义业务逻辑
    ContainerComponent(props){
        super(props);
        this.state = {
            aaa:'aaa';
            ....
        }
    }
    render() {
        return (
            <div >
               容器型组件
            </div>
        )
    }
}