手把手教你从零到有学会React组件通讯

组件通讯介绍

组件是独立且封闭的单元，默认只能使用组件自己的数据，在组件化过程中，我们将一个完整的功能拆分为多个组件，以便于更好的完成整个应用的功能。在这个过程中，多个组件之间不可避免的要使用共享一些数据，实现这些功能，我们就需要打破组件的独立封闭性，让其与外界进行沟通，这个过程就算组件通讯

组件的props

• 组件是封闭性的，要接收外部传来的数据就要通过props实现
• props作用：接收传递给组件的数据
• 传递数据：给组件标签添加自定义属性

<Title name="Tom" age={19} statudClass="3班" />

• 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收

function Title (props) {
  return (
    <div>
      {props.name}---{props.age}---{props.statudClass}
    </div>
  )
}

class Title extends React.Component {
  render () {
    return (
      (
        <div>
          { this.props.name}-- - {this.props.age}-- - { this.props.statudClass}
        </div >
      )
    )
  }
}

特点：

• 可以给组件传递任意类型的数据，没有限制

  函数传递
  
  标签传递
  

• props是只读的一个对象，只可以读取属性的值，而无法将对象进行修改

• 注意∶使用类组件时，如果写了构造函数，应该将props 传递给super()，否则，无法在构造函数中获取到props
  
  如果不进行传递，则在构造函数中是获取不到的
  

组件通讯的三种方式

• 父组件 -> 子组件

  1. 父组件提供要传递的state数据
  2. 给子组件标签添加属性，值为state中的数据
  3. 子组件通过props接收父组件中传递过来的数据
     

• 子组件 -> 父组件
  思路：利用回调函数进行传值，父组件提供，子组件进行调用，将要传递的数据作为回调函数即可

  1. 父组件提供一个回调函数(用于接收数据)
  2. 将该函数作为函数属性值，传递给子组件使用
  3. 子组件通过props调用回调函数
     

• 兄弟组件
  A < = >B

  1. 将共享状态提升到最近的公共父组件中，由共同父组件管理
     A = > 父 => B B = > 父 => A
  2. 状态进行提升
  3. 公共父组件职责∶提供共享状态 提供操作共享状态的方法
  4. 要通讯的子组件只需通过props接收状态或操作状态的方法

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

class Title extends React.Component {
  // 提供共享状态
  state = {
    num: 0
  }

  Increase = () => {
    this.setState({
      num: this.state.num + 1
    })
  }

  Reduce = () => {
    if (this.state.num === 0) {
      alert('不能再减了，要不然为负数了')
      return
    }
    this.setState({
      num: this.state.num - 1
    })
  }
  render () {
    return (
      <div>
        <Children1 num={this.state.num} />
        <Children2 Increase={this.Increase} Reduce={this.Reduce} />
      </div>
    )
  }
}

const Children1 = (props) => {
  return (
    <h1>计数：{props.num}</h1>
  )
}

const Children2 = (props) => {

  return (
    <div>
      <button onClick={() => props.Increase()}>+1</button>
      <button onClick={() => props.Reduce()}>-1</button>
    </div>
  )
}

ReactDOM.render(
  <Title />,
  document.getElementById('root')
);

Context

学习时是不是有个疑问（App组件要传递数据给Child组件，该如何处理?）

• 使用props一层层组件往下进行传递是非常繁琐的
  
• 简单方法：使用Context
• 跨组件传递数据

使用：

• 调用React.createContext()创建Provider (提供数据）和Consumer (消费数据）两个组件

const { Provider,consumer } = React.createcontext()

• 使用Provider组件作为父节点

<Provider>
    <div>
        <Node />
    </div>
</Provider>

• 设置value属性，表示要传递的数据

<Provider value="states">
        <div>
          <Node />
        </div>
      </Provider>

结果：

import React from 'react';
import ReactDOM from 'react-dom';
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
  render () {
    return (
      <Provider value="states">
        <div>
          <Node />
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div>
      <SubNode />
    </div>
  )
}

const SubNode = props => {
  return (
    <div>
      <Child />
    </div>
  )
}

const Child = props => {
  return (
    <Consumer>
      {
        data => <h1> {data}</h1>
      }
    </Consumer>
  )
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

1、如果两个组件是多层嵌套可以使用Context实现组件通讯
2、Context提供了两个组件:Provider和Consumer
3、Provider组件∶用来提供数据
4、Consumer组件∶用来消费数据