8_react component communication method

1. Parent-child components (both in class components and function components)

1. father to son

   // 父组件
   import React, {
         
          Component } from "react";
   import Child from "./Child";
   export default class Parent extends Component {
         
         
     constructor(props) {
         
         
       super(props);
       this.state = {
         
         
         msg: "我是父组件的信息",
       };
     }
     render() {
         
         
       return (
         <div>
           // 父组件直接通过属性传递给子组件
           <Child msg={
         
         this.state.msg}></Child>
         </div>
       );
     }
   }
   // 子组件
    import React, {
         
          Component } from "react";
   // 子组件
   export default class Child extends Component {
         
         
     render() {
         
         
       // 子组件通过props接收父组件传递的值
       console.log(this.props);
       return (
         <div>
           // 子组件使用
           <p>{
         
         this.props.msg}</p>
         </div>
       );
     }
   }
   

2. child's father

   // 父组件
   class Parent extends React.Component {
         
         
     constructor(props) {
         
         
       super(props);
       this.state = {
         
         
         parentMsg: "",
       };
     }
     // 提供回调函数 接收子组件数据
     getChidMsg = (msg) => {
         
         
       console.log("子组件的数据", msg);
       this.setState({
         
         
         parentMsg: msg,
       });
     };
     render() {
         
         
       return (
         <div>
           父组件：{
         
         this.state.parentMsg}
           <br />
           子组件: <Child getMsg={
         
         this.getChidMsg}></Child>
         </div>
       );
     }
   }
   // 子组件
   class Child extends React.Component {
         
         
     constructor(props) {
         
         
       super(props);
       this.state = {
         
         
         msg: "子组件的值",
       };
     }
   
     // 子组件调用父组件中传递的回调函数
     handClick = () => {
         
         
       this.props.getMsc(this.state.msg);
     };
     render() {
         
         
       return (
         <div>
           <button onClick={
         
         this.handClick}> 点击我 </button>
         </div>
       );
     }
   }
   

2. Cross-component

If the target subcomponent is deep in component nesting, it is not practical to pass values ​​directly with props.

1. context (from top to bottom in the component tree, from parent to child)
   The principle of redux is to use context for data transmission.

// 使用context实现跨组件通信
import React, {
    
     createContext } from "react";
// 1. 创建Context对象
const Context = createContext();

function A() {
    
    
  return (
    <div>
      <B></B>
      <Context.Consumer>{
    
    (value) => <span>{
    
    value}</span>}</Context.Consumer>
    </div>
  );
}
function B() {
    
    
  // 3. 通过Comsumer获取数据
  return (
    <div>
      <Context.Consumer>{
    
    (value) => <span>{
    
    value}</span>}</Context.Consumer>
    </div>
  );
  // 4. react16.8版本之后增加了hooks，可以使用hooks中的useContext来获取消费者
  import {
    
     useContext } from "react";
  const {
    
     message } = useContext(Context);
  // 直接这样定义就可以拿到consumer的值，省去了之前要定义在Consumer中才能使用。
}

class App extends React.Component {
    
    
  state = {
    
    
    message: "要传递的消息",
  };
  render() {
    
    
    return (
      // 2. 使用provider包裹根组件
      <Provider value={
    
    this.state.message}>
        <div>
          <A></A>
        </div>
      </Provider>
    );
  }
}

2. PubSub

• downloadnpm install pubsub-js --save
• send data:

import PubSub from "pubsub-js";
// 接收二个参数，第一个是要发送的消息，让订阅，第二个是传输的数据。
Pubsub.publish("updateSelectedKey", key);

• Receive data:

import PubSub from "pubsub-js";
// 组件加载完成时，订阅
componentDidMount() {
    
    
  this.pubsub = PubSub.subscribe('updateSelectedKey', (msg, key) => {
    
    
    this.setState({
    
    
      currentRoute: key
    });
  })
}
// 取消订阅
componentWillUnmount() {
    
    
  PubSub.unsubscribe(this.pubsub);
}

3. ref

   import React, {
         
          Component, createRef, useRef } from 'react';
   import Child from './child';
   class Parent extends Component {
         
         
   
     constrator(props) {
         
         
        super(props);
        this.state = {
         
         
            name: ''
        }
        // 1.创建ref
        this.childRef = createRef();
     }
     // 函数组件
     // const childRef = useRef();
   
     componentDidMount() {
         
         
        // 3.获取ref
        // 如果是自定义组件，获取到是组件实例
        // 如果是dom元素，获取到是dom节点
        console.log(this.childRef.current);
        // 4.子传父
        this.setState({
         
         
            name: this.childRef.current.name
        })
        // 5.父传子
        this.childRef.current.setName('ShangQiao')
     }
   
     render() {
         
         
        return {
         
         
            <div>
                <!-- 2.绑定ref -->
                <Child ref={
         
         this.childRef}></Child>
            </div>
        }
     }
   }
   
   

4. forwardRef

// 子组件（通过forwardRef方法创建）
const Child = React.forwardRef((props, ref) => <input forwardRef={
    
    ref} />);

// 父组件
class Father extends React.Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    
    
    console.log(this.myRef.current);
  }
  render() {
    
    
    return <Child ref={
    
    this.myRef} />;
  }
}

Notice:

• ref cannot be used on functional components. Functional components have no instances, but their internal dom nodes and class components can be used;
• You can use ReactDOM.findDOMNode(), the input parameter is a component or dom node, and the returned component corresponds to the dom root node or the dom node itself.
  After obtaining the component instance through refs, you can use this method to obtain its corresponding dom node;

5. redux