react开发教程之React 组件之间的通信方式

这两天学习了react感觉组件通信这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

父子组件通讯

通讯手段

这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。

通讯内容

更多要提的是如何合理的设置子组件的props，要想将子组件设计成一个复用性强的通用组件，需要将能够复用的部分抽象出来，抽象出来的props有两种形成，一种是简单的变量，另一种是抽象出来处理某种逻辑函数。

以header 组件为例

//headerbar.jsx 子组件

import react, { component } from 'react';

class header extends component {
  constructor() {
    super();
    this.handleclick = (e) => {
      console.log(this)
    }
  }

  renderleftcomponent() {

    let leftdom = {};
    if (this.props.renderleftcomponent) {
      return this.props.renderleftcomponent();
    }

    if (this.props.showback) {
      let backfunc = this.props.onback || this.goback;
      leftdom = (<a onclick={backfunc.bind(this)}><i classname="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftdom;
  }
  

  renderrightcomponent() {
    if (this.props.renderrightcomponent) {
      return this.props.renderrightcomponent();
    }
  }

  goback() {
    alert("返回上一页")
  }

  render() {
    return (
      <header classname="header-bar">
        {this.renderleftcomponent()}
        <span>{this.props.title || '滴滴'}</span>
        {this.renderrightcomponent()}
      </header>
    );
  }
}

export default header;

//父亲组件部分代码app.jsx
import headerbar from "./components/header";

let lefticon = function () {
 return (
  <a><i classname="icon left-icon icon-left-haha"></i>左边按钮</a>
 )
}
class app extends component {

 render() {
  return (
   <div classname="app">
    <headerbar title="滴滴打车" renderleftcomponent={lefticon} />
   </div>
  );
 }
}

子父组件通讯

父-子组件通信的手段是通过子组件的props是子组件用父组件的东西，子-父组件通信，是父组件用子组件的东西，暂时了解的两种方法

利用回调函数

父组件通过props传递一个方法给子组件，子组件通过props方法将子组件数据传递给父组件

利用ref

父组件通过refs调用子组件的属性

跨级组件通信

在react中当一个属性反复使用并且存在与好几个子组件中的时候，这个时候我们如果通过props一级一级传递的话可以实现多层级访问，但是这样出现一个问题就是会使代码非常混乱，在react中国年，我们还可以使用 context 来实现跨级父子组件间的通信；

在react中context称为虫洞

// component 父级
class parentcomponent extends react.component {
  
  // add the following property
  static childcontexttypes = {
    color: react.proptypes.string
  }
  
  // 添加下面方法
  getchildcontext() {
    return {
      color: "#f00"
    }
  }
  
  render() {
    <div>
      <child1 />
    </div>
  }
}


// component child1
class child1 extends react.component {
  // 添加下面属性
  static contexttypes = {
    color: react.proptypes.string
  }
  
  render() {
    <div>{this.context.color}</div>
  }
}

同级组件通信

同级组件之间的通信还是需要通过父组件作为中介，利用多次父-子组件通信，项目中将需要传递的数据放在了父组件的state中，变动时可以自动的同步传递。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。