React 组件通信的五种方式_props_ref_Context_Redux

最新推荐文章于 2024-09-20 10:39:46 发布

蒲公英芽

最新推荐文章于 2024-09-20 10:39:46 发布

阅读量1w

点赞数 2

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/charissa2017/article/details/105746685

版权

react 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

前言

React 中组件间的通信有以下几种情况：

父组件向子组件通信，可以通过 props 方式传递数据；也可以通过 ref 方式传递数据；
子组件向父组件通信，通过回调函数方式传递数据；
父组件向后代所有组件传递数据，如果组件层级过多，通过 props 的方式传递数据很繁琐，可以通过 Context.Provider 的方式；
一个数据源实现跨组件通信，通过指定 contextType 的方式来实现；
多个数据源实现跨组件通信，使用 Context.Consumer 方式实现；

1. 父组件向子组件通信

父组件向子组件通信有两种方式，一是父组件通过属性进行传递，子组件通过 props 接收；二是父组件通过 ref 获取到子组件的实例或者元素，调用子组件的方法进行数据传递。

1.1 通过 props 方式传递数据

父组件中通过给子组件设置属性，将数据传递给子组件，子组件通过 props 来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变。

import React, { Component } from 'react'
import ReactDOM from 'react-dom';

//子组件
class Child extends Component{
  render(){
    return <h1>接收到数据为:{this.props.num}</h1>
  }
}
//父组件
class Parent extends Component{
  num=3;
  render(){
    return <Child num={this.num}></Child>
  }
}

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

1.2 通过 ref 传递数据

React 提供的这个ref属性，表示为对组件真正实例的引用，其实就是 ReactDOM.render() 返回的组件实例，ref 可以挂载到组件上也可以挂载到dom元素上。

挂到组件(class声明的组件)上的 ref 表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例。
挂载到dom元素上时表示具体的dom元素节点。

使用方法：

父组件使用 ref 属性对子组件做标记，获取到子组件的实例或者dom元素，可以调用子组件的方法，传递数据。
在 React 最新的版本中，要使用 ref ，需要通过 React.createRef() 方法生成一个ref。

import React, { Component ,createRef} from 'react'
import ReactDOM from 'react-dom';

//子组件
class Child extends Component{
  state={
    name:"admin"
  }
  childClickHandle=(city)=>{
    this.setState({
      address:city
    })
  }
  render(){
    return (
      <div>name:{this.state.name},address:{this.state.address}</div>
    )
  }
}

//父组件
class Parent extends Component{
  constructor(){
    super();
    //通过 createRef() 生成ref
    this.childComp=createRef()
  }
 
  clickHandle=()=>{
    //调用子组件的方法，并传递数据
    this.childComp.current.childClickHandle("beijing");
  }

  render(){
    return (
      <div>
        <button onClick={this.clickHandle}>按钮</button>
        //给子组件设置ref属性
        <Child ref={this.childComp}></Child>
      </div>
    )
  }
}

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

2. 子组件向父组件通信

子组件通过 回调函数 向父组件传递数据。父组件将自己的某个方法传递给子组件，子组件通过this.props接收到父组件的方法后进行调用。

如果子组件内需要修改父组件传递过来的数据，需要通过调用父组件的方法，在父组件中对数据进行修改。

import React, { Component ,createRef} from 'react'
import ReactDOM from 'react-dom';

//子组件
class Child extends Component{
   state={
     name:"admin",
     age:18
  }
  childClickHandle=()=>{
    this.props.showInfo({address:"beijing"})
  }
  render(){
    return (
	    <div>
	    	//方式一：直接调用父组件的方法
		    <button onClick={this.props.showInfo.bind(this,this.state)}>按钮</button>
		    //方式二：先调用自身的方法，再调用父组件的方法
		    <button onClick={this.childClickHandle}>按钮</button>
	    </div>
	)
  }
}

//父组件
class Parent extends Component{
  clickHandle(data){
    //data为子组件中传递过来的数据
    //{address: "beijing"}
    //{name: "admin", age: 18, sex: "woman"}
	console.log(data);
  }

  render(){
    return <Child showInfo={this.clickHandle.bind(this)}></Child>
  }
}

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

3. 跨组件通信 Context

在 react 中没有类似 vue 中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。

react 中数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于多层级父子关系的组件传值是极其繁琐的。react 提供了context api 来实现在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。React 16.3之后的contextapi 较之前的好用。

3.1 父组件向后代组件通信

使用 Context.Provider ，具体使用方法如下：

使用 createContext() 创建一个context 对象（内容为需要传递的数据），参数为默认值；
在父组件外层使用 <.Provider> 将当前 context 的值传递给内部所有的组件树。当使用了 <.Provider> 后，不再读取上面的默认值，需要设置 value 属性来进行数据传递。
当组件需要读取数据时，指定 contextType 读取当前的 context 对象（即刚开始创建的 context）；
通过 this.context，获取到当前 context 内的数据；

import React, { Component ,createContext} from 'react';
import ReactDOM from 'react-dom';

//使用createContext()创建一个context,参数为默认值
const cityContext = createContext("beijing");
cityContext.displayName = "cityContextName"; //devtools中调试用

class Parent extends Component{
 render() {
       return (
       		//使用Provider 将当前context的值传递给下面的组件树
           <cityContext.Provider value="shenzhen">
                   <Child />
           </cityContext.Provider>
       )
   }
}

//中间的组件不需要对数据进行传递
class Child extends Component{
   render() {
       return <Grandson />
   }
}

class Grandson extends Component{
  //指定contextType 读取当前的context
  //react 会往上找到最近的 Provider，然后使用它的值
  static contextType = cityContext;
   render() {
       return <div>{this.context}</div>
       //最终页面上输出 shenzhen
   }
}

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

上面的方法中，我们实现了跨组件的数据传递，这种方式的缺点是只能有一个共享的数据源，也就是在 Grandson 组件中，指定 contextType 的值只能是一个。那么如果我们有多个数据源都需要进行跨组件传递，应该怎么做呢？这里，我们可以使用 <.Consumer> 来实现对多个数据源进行共享。

3.2 多个数据源实现跨组件通信

使用 Context.Consumer ，实现多个数据源跨组件通信。具体使用方法如下：

使用 import 导入要读取的数据文件。
使用<.Consumer> ，它里面的语法是函数组件的语法，函数接收的 参数 为当前 createContext() 里的默认值。
<.Consumer> 可以嵌套使用，也可以平级使用。

比如现在我们有两个数据文件 CityContext.js 和 WeatherContext.js （注意：共享的数据源文件需要导出 context 对象）。

CityContext.js 文件内容：

/* CityContext.js */
import {createContext} from 'react'
const CityContext = createContext({
    id:1,
    name:"beijing",
    location:"north"
})
export default CityContext;

WeatherContext.js 文件内容：

/* WeatherContext.js */
import {createContext} from 'react'
const WeatherContext = createContext({
    status:"sunshine"
})
export default WeatherContext;

上面这两个文件需要在多个组件内进行使用，可以使用下面的方式：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

//导入需要使用的context对象
import CityContext from './CityContext';
import WeatherContext from './WeatherContext';

class Child extends Component{
 render() {
       return (
           <CityContext.Consumer>	//子元素是函数组件的语法
             {
               (prop)=>{	//参数是当前context对象里的数据
                 return (
                     <div>
                       name:{prop.name},location:{prop.location}
                        <WeatherContext.Consumer>	//可以嵌套使用，也可以同级使用
                          {
                            ({status})=>{
                              return <div>weather:{status}</div>
                            }
                          }
                        </WeatherContext.Consumer>
                     </div>
                 )
               }
             }
           </CityContext.Consumer>
       )
   }
}

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

3.3 Context 的使用场景

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。如果用组件组合可以解决的问题，就不要使用 Context 。

使用 context 的通用的场景包括管理当前的 locale，theme，或者一些缓存数据。

3.4 Context 总结

React.createContext(defaultValue) 创建一个 Context 对象。
Class.contextType，挂载在 class 上的 contextType 属性会被赋值为一个 Context 对象。这能让你使用 this.context 来消费最近的 Context 上的数据。你可以在任何生命周期中访问到它，包括 render 函数中。
Context.Provider，接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
Context.Consumer，是函数作为子元素（function as a child）这种做法。这个函数参数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。
Context.displayName，浏览器中调试用。