组件之间是如何通信的、组件的props的特点

组件（进阶版）

主要内容为组件之间如何进行通信，父子组件，兄弟组件，跨组件通信等。

1、组件通信

我们都知道一个完整的页面功能，是由多个组件组合在一起完成的，但是我们知道组件之间并不可能是完全没有关联的，比如：我们通常看到的搜索框，上面是搜索框、下面会显示历史记录；事实上，它是由两部分组件共同完成的，这就需要组件之间有联系，所以这就是我们所说的组件通信。

但是我们都知道组件是一个封闭的资源，那我们如何让他们之间实现通信呢？我们如何才能让搜索框搜索完让他显示在历史记录的组件中呢？这就需要组件的props来实现了。

2、组件的props

1）作用：接收传递给组件的数据

2）传递方式：给组件标签添加属性

3）接收方式：

a）函数组件：props.标签（函数中要传递props参数）

b）类组件：this.props.标签

4）特点：

a）传递数据的类型没有限制、“”默认传递字符串、{}可以传递别的类型、甚至可以传递JSX、函数等

b）只读、不可修改值

c）类组件若写了构造函数constructor，则需把props参数传递过去super也需要传递props参数

3、props进阶

1）props的children属性

当组件标签中存在子节点时，就表示组件标签的子节点

childern属性和其他props一样，值既可以是文本也可以是组件、React元素、函数等

2）props校验
对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，若传入的数据格式不对，可能导致组件内部报错，而在这个时候组件使用者不知道错误原因究竟是什么。所以props校验的作用就显现出来了！

**props校验：**在创建组件时，就指定props的类型、格式等。

作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增强组件的健壮性。

常见类型：array、bool、func、number、object、string
React元素类型：element
必填项：isRequired
特定结构对象：shape({})

3）props默认值

在没传入props时生效，传入时以传入为准

4、组件通讯的三种方式

1）父组件传递数据给子组件

a）父组件提供要传递的数据（state）

b）给子组件标签添加属性，值为state中的数据

c）子组件通过props接收父组件中传递的数据

import React from 'react'
import ReactDOM from 'react-dom'

///父组件
class Hello extends React.Component {
   
  state = {
    Name: '小王' }
  render () {
   
    return (
      <div className='parent'>
        要传递给子组件的数据：<Child name={
   this.state.Name} />
      </div>
    )
  }
}
///子组件
function Child (props) {
   
  return (
    <div className='child'>
      <p> 子组件接收到的数据：{
   props.name} </p