2020-06-16 React组件通信

在使用react的,不可避免的组件间的消息传递

1:父组件向子组件传值(通常的是父组件向子组件传递props,子组件得到props后进行对应的处理)

App.js(父组件)

  import React,{ Component } from "react";
  import Sub from "./SubComponent.js";
  export deafault class APP extents Component{
  reader(){
  return (`
`) } }

SubComponents.js(子组件)

    import React,{ Component } from "react";
    const Sub=(props)=>{
     return(
      

{props.title}

) }

2:子组件向父组件传值( 父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。)

SubComponents.js

 import React from 'react'
 const Sub=(props)=>{
  const cb=(msg)=>{
   return()=>{
      prop.callback(msg)
   }
 }
  return(
    
) } export default Sub;

App.js
import Sub from "./SubComponent.js";
import React,{ Component } from "react";
callback(msg){console.log(msg)}
render(){
return(




)
}

3:跨级组件之间的通信

所谓跨级组件通信,就是父组件向子组件的子组件通信,向更深层的子组件通信。跨级组件通信可以采用下面两种方式:

  1: 中间组件层层传递 props
  2: 使用 context 对象

对于第一种方式,如果父组件结构较深,那么中间的每一层组件都要去传递 props,增加了复杂度,并且这些 props 并不是这些中间组件自己所需要的。不过这种方式也是可行的,当组件层次在三 层以内可以采用这种方式,当组件嵌套过深时,采用这种方式就需 要斟酌了。
使用 context 是另一种可行的方式,context 相当于一个全局变量,是一个大容器,我们可以把要通信的内容放在这个容器中,这样一来,不管嵌套有多深,都可以随意取用。
使用 context 也很简单,需要满足两个条件:

1:上级组件要声明自己支持 context,并提供一个函数来返回相应的 context 对象
2:子组件要声明自己需要使用 context

APP.JS

  import React, { Component } from 'react';
  import PropTypes from "prop-types";
  import Sub from "./Sub";
  import "./App.css";
 export default calss App extents Component{
//父组件声明自己支持content
 static childContentTypes={
   color:Proptypes.string
   callback:propsTypes.func
 }
//父组件提供一个函数,用来返回相应的content 对象
getchildContent(){
 return{
  color:"red"
  callback:this.callback.bind(this)
 }
}
callback(msg){
    console.log(msg)
}
render(){
    return(
        
); } }

Sub.js

import React from "react";
import SubSub from "./SubSub";

const Sub = (props) =>{
    return(
        
); } export default Sub;

SubSub.js:

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class SubSub extends Component{
    // 子组件声明自己需要使用 context
    static contextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }
    render(){
        const style = { color:this.context.color }
        const cb = (msg) => {
            return () => {
                this.context.callback(msg);
            }
        }
        return(
            
SUBSUB
); } } 如果是父组件向子组件单向通信,可以使用变量,如果子组件想向父组件通信,同样可以由父组件提供一个回调函数,供子组件调用,回传参数。 在使用 context 时,有两点需要注意: 父组件需要声明自己支持 context,并提供 context 中属性的 PropTypes 子组件需要声明自己需要使用 context,并提供其需要使用的 context 属性的 PropTypes 父组件需提供一个 getChildContext 函数,以返回一个初始的 context 对象 如果组件中使用构造函数(constructor),还需要在构造函数中传入第二个参数 context,并在 super 调用父类构造函数是传入 context,否则会造成组件中无法使用 context。 ... constructor(props,context){ super(props,context); } import React, { Component } from 'react'; import PropTypes from "prop-types"; import Sub from "./Sub"; import "./App.css"; export default class App extends Component{ constructor(props) { super(props); this.state = { color:"red" }; } // 父组件声明自己支持 context static childContextTypes = { color:PropTypes.string, callback:PropTypes.func, } // 父组件提供一个函数,用来返回相应的 context 对象 getChildContext(){ return{ color:this.state.color, callback:this.callback.bind(this) } } // 在此回调中修改父组件的 state callback(color){ this.setState({ color, }) } render(){ return(
); }

}

在子组件的 cb 方法中,传入相应的颜色参数,就可以改变 context 对象了,进而影响到子组件:

...
return(
    
SUBSUB
); ... context 同样可以应在无状态组件上,只需将 context 作为第二个参数传入: import React,{ Component } from "react"; import PropTypes from "prop-types"; const SubSub = (props,context) => { const style = { color:context.color } const cb = (msg) => { return () => { context.callback(msg); } } return(
SUBSUB
); } SubSub.contextTypes = { color:PropTypes.string, callback:PropTypes.func, } export default SubSub;

4:非嵌套组件之间通信(非嵌套组件,就是没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件,可以采用下面两种方式:利用二者共同父组件的 context 对象进行通信使用自定义事件的方式)

App.js

      1:我们需要使用一个 events 包:(npm install events --save)
      2:新建一个 ev.js,引入 events 包,并向外提供一个事件2对象,供通信时使用:
    
    import { EventEmitter } from "events";
    export default new EventEmitter();
    
    
    import React, { Component } from 'react';
    
    import Foo from "./Foo";
    import Boo from "./Boo";
    
    import "./App.css";
    
    export default class App extends Component{
        render(){
            return(
                
); } }

Foo.js:

    import React,{ Component } from "react";
    import emitter from "./ev"
    export default class Foo extends Component{
        constructor(props) {
            super(props);
            this.state = {
                msg:null,
            };
        }
        componentDidMount(){
            // 声明一个自定义事件
            // 在组件装载完成以后
            this.eventEmitter = emitter.addListener("callMe",(msg)=>{
                this.setState({
                    msg
                })
            });
        }
        // 组件销毁前移除事件监听
        componentWillUnmount(){
            emitter.removeListener(this.eventEmitter);
        }
        render(){
            return(
                
{ this.state.msg } 我是非嵌套 1 号
); } }

Boo.js:

     import React,{ Component } from "react";
     import emitter from "./ev"
    export default class Boo extends Component{
        render(){
            const cb = (msg) => {
                return () => {
                    // 触发自定义事件
                    emitter.emit("callMe","Hello")
                }
            }
            return(
                
我是非嵌套 2 号
); } }

你可能感兴趣的:(2020-06-16 React组件通信)