组件通信

组件为什么需要通信呢？这是因为组件是独立且封闭的单元，默认情况下，组件只能使用自己的数据，但是多个组件之间不可避免的要共享某些数据，为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。

父传子

React 中的数据只能从“辈分高”的组件传到“辈分低”的组件，所以 React 中数据只能是单向数据流，是自顶而下的。

• 父组件将数据传给子组件通过 Props 实现，使用子组件的时候通过属性绑定数据，在组件内部通过 props 获取即可。
• 父组件传递数据给子组件，父组件更新数据子组件自动接收更新后的数据，子组件是不能修改数据的。

props

可以传递的数据类型

• 字符串
• 数字
• 布尔
• 数组
• 对象
• 函数
• JSX （插槽）

类型检查

由于 props 都是别的组件传递的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错，为了避免这种情况可以通过 prop-types 插件在创建组件的时候进行类型检查。

• 安装 yarn add prop-types

常见的校验规则

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

函数组件

import propTypes from 'prop-types'
function Father() {return ();
}
function Son(props) {return 
{props.name}
}
Son.propTypes = {name: propTypes.number
}

• 类组件

function Father() {return ();
}class Son extends React.Component {static propTypes = {name: propTypes.string}render() {return 
{this.props.name}
}
}

默认值

给组件的 props 设置默认值，在未传入props的时候生效。有两种方式

• 函数组件

function Father() {return ();
}function Son(props) {return 
{props.name}
}
Son.defaultProps = {// props属性：校验规则name: '孤城浪人'
}

新版react推荐使用参数默认值来实现

// 分页组件
function Father() {return ();
}
function Son({ name = '孤城浪人' }) {return 
{name}
}

• 类组件

function Father() {return ();
}class Son extends React.Component {static defaultProps = {name: '孤城浪人'}render() {return 
{this.props.name}
}
}

函数组件

函数组件接收一个参数就是 props，当然作为形参可以任意命名，但是一般参数名就是 props。

类组件

类组件会自动将 props 绑定在当前组件实例上。

子传父

上面说过子组件不能直接修改父组件传来的 props，并且父组件中数据改变后子组件自动接收更新后的数据，利用这两个特性 React 提供了一种机制间接的修改。父组件传给子组件一个函数，该函数能够修改父组件的数据，当子组件需要修改数据时，就调用该函数，让父组件帮自己改，最后自动接收修改后的数据。

步骤：

1. 父组件提供回调函数，通过 props 传递给子组件
2. 子组件调用 props 中的回调函数，函数可传参
3. 父组件函数的参数就是子组件传递的数据

兄弟组件通信

开发中需要通信的组件之间当然不只是父子关系，还有兄弟关系，如下图子组件1和子组件2。

我们可以子组件 1 和子组件 2 都用到的数据保存在父组件中，在通过 props 传给子组件，这样无论是子组件 1 还是子组件 2 通过父子通信的方式修改了数据，子组件都能接收到修改后的数据。

祖孙组件通信

这种嵌套极深的组件间通信目前来说有两种方式

• 层层传递 props
• context 技术

层层传递实现

这种实现方式比较麻烦，而且也不利于后期维护，若是需要修改一个属性名，那么层层组件都需要修改。

context 实现

上下文，一个范围，只要在这个范围内，就可以跨级组件通讯。（不需要 props 层层传递）。React 会往上找到最近的 theme Provider，然后使用它的值。

我的理解就是类似发布订阅模式，祖辈组件发布数据，孙辈组件订阅数据（个人理解）。

第三方库

除了上述的几种组件间通信方式还可以使用第三方插件例如 redux，我的理解就是他们提供一个仓库，存放着所有的需要共享的数据，任何组件都可以从这个仓库拿数据、修改数据。如下图

但是这里就不做过多记录，后边学习到这些知识在记录一下。我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。