react组件

组件的简介

组件是React中的重要组成部分，可以说所有React应用都离不开组件。组件允许开发者将应用程序拆分为独立可复用的代码片段，并且每个代码片段都可以单独编写实现代码。

\

组件的定义

组件的定义有如下三种方式：

• React.createClass： React定义组件的传统方式，已逐步废弃。
• ES6 Class：面向对象风格，但仍未改变JavaScript原型但本质。
• JavaScript Function：定义组件最简单的方式，但默认无法进行状态管理。

\

1. React.createClass方式

React.createClass是定义组件的传统方式，也是早期React中唯一的实现方式。

示例：

const Article = React.createClass({
    render() {
        <div>
            <h3>This is Title</h3>
            <p>This is Content</p>
            <span>This is Auther</span>
        </div>
    }
})
复制代码

由于早期的JavaScript中并没有类的概念，React在内部实现了一个createClass的方法。但ES6中对类的支持已经比较完善，而且ES6目前已经十分普及，所以React在之后的版本中便逐步废弃了createClass方法。因此，我们将重点介绍ES 6 Class和JavaScript Function这两种定义组件的方式。

2. ES6 Class方法

使用ES6 Class方式编写React组件时，需要定义一个新类（也就是组件本身）继承自React.Component，这类组件被称为class组件。代码如下：

class Article extends React.Component {
    render() {
       <div>
           <h3>This is Title</h3>
           <p>This is Content</p>
           <span>This is Auther</span>
       </div>
    }
}
复制代码

所有的React组件都需要实现render()方法，其返回DOM元素的虚拟DOM表示。需要注意的是，返回的DOM元素必须是单一的根节点。

ES6 Class是一个语法糖🍬，允许开发者使用面向对象的风格来编写对象，对熟悉C++和Java等传统面向对象语言的开发者很友好，在封装，继承等场景下对普通的JavaScript开发者也比以往更加友好。但是，ES6并没有改变JavaScript面向对象基于原型的本质。

传统的写法：

function Foo (x, y) {
    this.x = x
    this.y = y
}
Foo.prototype.toString = function() {
    console.log(this.x, this.y)
}
复制代码

ES6 Class写法：

class Foo {
   constructor(x, y)  {
      this.x = x
      this.y = y
   }
  toString() {
      console.log(this.x, this.y)
  }
}
复制代码

JavaScript Function方式

\

编写组件最简单的方式就是使用JavaScript Function：只需要声明一个函数并返回一段符合规范的JSX即可

代码如下：

function Article() {
    return (
        <div>
           <h3>This is Title</h3>
           <p>This is Content</p>
           <span>This is Auther</span>
       </div>
    )
}
复制代码

JavaScript Function实现这类组件被称为函数组件，也可以叫做无状态组件。

组件可以分为"无状态组件"和"有状态组件"。实际上，ES6 Class构建的class组件被称为"有状态组件",即允许使用State来管理组件的内部状态，而无状态组件则无法实现这样的状态管理。