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

傷城~ 2022-10-15 10:50 184阅读 0赞

## 组件通讯介绍 ##

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

## 组件的props ##

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

*  接收数据：函数组件通过参数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 >
          )
        )
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]  
特点：

*  可以给组件传递任意类型的数据，没有限制
    
    函数传递  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]  
    标签传递  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]
 *  props是只读的一个对象，只可以读取属性的值，而无法将对象进行修改
 *  注意∶使用类组件时，如果写了构造函数，应该将props 传递给super()，否则，无法在构造函数中获取到props  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]  
    如果不进行传递，则在构造函数中是获取不到的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]

## 组件通讯的三种方式 ##

*  父组件 -> 子组件
    
    1.  父组件提供要传递的state数据
    2.  给子组件标签添加属性，值为state中的数据
    3.  子组件通过props接收父组件中传递过来的数据  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]
 *  子组件 -> 父组件  
    思路：利用回调函数进行传值，父组件提供，子组件进行调用，将要传递的数据作为回调函数即可
    
    1.  父组件提供一个回调函数(用于接收数据)
    2.  将该函数作为函数属性值，传递给子组件使用
    3.  子组件通过props调用回调函数  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]
 *  兄弟组件  
    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')
    );

![在这里插入图片描述][20210525145136998.gif_pic_center]

## Context ##

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

*  使用props一层层组件往下进行传递是非常繁琐的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]
 *  简单方法：使用Context
 *  跨组件传递数据

使用：

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

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

*  使用Provider组件作为父节点

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

结果：

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')
    );

![在这里插入图片描述][20210525150950306.png]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221014/2ba4005c674347f2b49c2b7e37e9eaca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221014/7bcdf4b4d57d4ca5a4e2f151873832c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221014/c4409f3f82a84133a7b454d9344111a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221014/c78bea19970b47d4b472d7ca129b5f08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221014/a0ec461441544890afd94f7a22373359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]: /images/20221014/1e0ab939087a472a86f7e56b3e376dd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]: /images/20221014/63e3f1d86544460080474e343e4c2a6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]: /images/20221014/eb7c98b432444faea6e87d39ef398700.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]: /images/20221014/03b71b194b034797865ad2cb1168a04b.png
[20210525145136998.gif_pic_center]: /images/20221014/feac17bf66e74d2d9cbfc2d2f068f5b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]: /images/20221014/658233585abf4c0c965336f8aa13fbfe.png
[20210525150950306.png]: /images/20221014/198b7e25451a4a02979f3c9d1d0b66a4.png