先来几个术语：
| 官方 | 我的说法 | 对应代码 |
|---|---|---|
| React element | React元素 | let element=<span>A爆了</span> |
| Component | 组件 | class App extends React.Component {} |
| 无 | App为父元素，App1为子元素 | <App><App1></App1></App> |
本文重点：
- 组件有两个特性
- 1、传入了一个“props”
- 2、返回了一个React元素
- 组件的构造函数
- 如果需要重新定义
constructor，必须super一下，才能激活this，也就是可以用来自React.component方法
- 如果需要重新定义
- 组件的
props- 是可读的，也就是不能在组件中修改prop的属性
- JSX中传入对象的props，可以通过{...object}的方式
- 父子元素之间的通信（初级版本）
- 父=>子，通过父元素的
render既可改变子元素的内容。 - 子=>夫，通过父元素传入子元素中的
props上挂载的方法，让子元素触发父元素中的方法，从而进行通信。
- 父=>子，通过父元素的
Component
上回说到JSX的用法，这回要开讲react组件之间的一个沟通。那么什么是组件？我知道英文是Component，但这对我而言就是一个单词，毫无意义。要了解Component之间是如何进行友好交流的，那就要先了解Component是个什么鬼。
上回说到的JSX，我们可以这么创建对象：
let element=<h1 className="aaa">A爆了</h1> //等同于 let element=React.createElement( "h1", {className:"aaa"}, "A爆了" )还是老老实实地用h1、div这种标准的HTML标签元素去生成React元素。但是这样的话，我们的JS就会变得巨大无比，全部都是新建的React元素，有可能到时候我们连对象名都不晓得怎么起了，也许就变成let div1;let div2这样的。哈哈哈开个玩笑。但是分离是肯定要分离的。这个时候就有了名为Component的概念。他可以做些什么呢？简单的说就是创建一个个独立的，可复用的小组件。话不多说，我们来瞅瞅来自官方的写法：
写法一：函数型创建组件，大家可以看到我就直接定义一个名为App的方法，每次执行App()的时候就会返回一个新的React元素。而这个方法我们可以称之为组件Component。有些已经上手React的朋友，可能傻了了，这是什么操作，我的高大上class呢？extend呢？很遗憾地告诉你，这也是组件，因为他符合官方定义：1、传入了一个“props” ，2、返回了一个React元素。满足上述两个条件就是Component！
