React组件通讯

一，组件通讯介绍

基本概念：

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。

在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。

而在这个过程中，多个组件之间不可避免的要共享某些数据

为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯

二，三种常用的组件通讯方式

父子组件之间

兄弟组件之间

跨组件层级

先了解props基本使用：

格式：

父组件传入数据

<子组件 自定义属性1={值1} 自定义属性2={值2} .... />

子组件两种方式接收数据：

a.函数式组件-接收数据

// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
  console.log('从父组件中传入的自定义属性被收集在对象:', props)
  return (<div>子组件的内容</div>)
}

b.类组件-接收数据

// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
  console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
  render() { return (<div>子组件的内容</div>) }
}

props的三个注意事项：

a.可以传任意数据

b.只读的

c.单向数据流

props的children属性：

children属性：表示该组件的子节点，只要组件有子节点，props就有该属性

children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

1.父传子

步骤：

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

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

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

2.子传父

步骤

1. 父组件
   1. 定义一个回调函数f（将会用于接收数据）
   2. 将该函数f作为属性的值，传递给子组件
2. 子组件
   1. 通过 props 获取f
   2. 调用f，并传入将子组件的数据

3.兄弟组件（状态提升）

状态提升：将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• 公共父组件职责：
  • 提供共享状态
  • 提供操作共享状态的方法
• 要通讯的子组件只需通过 props 接收状态或操作状态的方法