react组件

　　组件的简介
　　组件是React中的重要组成部分，可以说所有React应用都离不开组件。组件允许开发者将应用程序拆分为独立可复用的代码片段，并且每个代码片段都可以单独编写实现代码。
　　组件的定义
　　组件的定义有如下三种方式： React.createClass： React定义组件的传统方式，已逐步废弃。 ES6 Class：面向对象风格，但仍未改变JavaScript原型但本质。 JavaScript Function：定义组件最简单的方式，但默认无法进行状态管理。
　　1. React.createClass方式
　　React.createClass是定义组件的传统方式，也是早期React中唯一的实现方式。
　　示例： const Article = React.createClass({     render() {                      
This is Title
             
This is Content             This is Auther              } })
　　由于早期的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() {                    
This is Title
            
This is Content            This is Auther             } }
　　所有的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 (                     
This is Title
            
This is Content            This is Auther             ) }
　　JavaScript Function实现这类组件被称为函数组件，也可以叫做无状态组件。
　　组件可以分为＂无状态组件＂和＂有状态组件＂。实际上，ES6 Class构建的class组件被称为＂有状态组件＂,即允许使用State来管理组件的内部状态，而无状态组件则无法实现这样的状态管理。 最后公众号：  小何成长  ，佛系更文，都是自己曾经踩过的坑或者是学到的东西
　　有兴趣的小伙伴欢迎关注我哦，我是：何小玍。大家一起进步鸭