React组件之间的通信方式总结（上）

先来几个术语：

本文重点：

• 组件有两个特性
  • 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爆了"
)
1
2
3
4
5
6
7
8

还是老老实实地用h1、div这种标准的HTML标签元素去生成React元素。但是这样的话，我们的JS就会变得巨大无比，全部都是新建的React元素，有可能到时候我们连对象名都不晓得怎么起了，也许就变成let div1;let div2这样的。哈哈哈开个玩笑。但是分离是肯定要分离的。这个时候就有了名为Component的概念。他可以做些什么呢？简单的说就是创建一个个独立的，可复用的小组件。话不多说，我们来瞅瞅来自官方的写法：

写法一：函数型创建组件，大家可以看到我就直接定义一个名为App的方法，每次执行App()的时候就会返回一个新的React元素。而这个方法我们可以称之为组件Component。有些已经上手React的朋友，可能傻了了，这是什么操作，我的高大上class呢？extend呢？很遗憾地告诉你，这也是组件，因为他符合官方定义：1、传入了一个“props” ，2、返回了一个React元素。满足上述两个条件就是Component！

function App(props) {
   
  return <span>{
   props.name}！A爆了</span>     
}
1
2
3
4
5

这个是最简易的Component了，在我看来Component本身是对React.createElement的一种封装，他的render方法就相当于React.createElement的功能。高大上的组件功能来啦：

import React, {
    Component } from 'react';
class App extends Component {
   
  render() {
   
    return <span>{
   this.props.name}！A爆了</span>     
  }
}
export default App;
1
2
3
4
5
6
7
8
9
10
11

这个class版本的组件和上方纯方法的组件，从React的角度上来说，并无不同，但是！毕竟我class的方式还继承了React.Component，不多点小功能都说不过去对吧？所以说我们这么想继承了React.Component的组件的初始功能要比纯方法return的要多。所以每个React的Component我们都可以当作React元素直接使用。

好了，我们来研究研究Component这个类的方法吧。

首先是一个神奇的constructor函数，这个函数在类中，可以说是用于初始化的函数。如果省去不写，也不会出错，因为我们的组件都是React.Component的子类，所以都继承了React.Component的constructor方法。如果我们在子类Component中定义了constructor相当于是覆盖了父类的方法，这样React.Component的构造函数就失效了。简单地来说就是很多默认的赋值都失效了。你是获取不到props的。因此官方为了提醒大家不要忘记super一下，也就是继承父类的constructor，因此会报"this hasn't been initialised - super() hasn't been called"这个错误。意思就是你先继承一下。也就是说super是执行了父类的constructor的方法。所以！！！重点来了——我们写super的时候不能忘记传入props。不传入props，程序就无法获取定义的组件属性了。

constructor(props) {
   
    super(props);//相当于React.Component.call(this,props)
}
1
2
3
4

官方也给大家划重点了：

Class components should always call the base constructor with props.（类组建在执行基本constructor的时候，必须和props一起。）

对于我们没有写construc