react 组件通信

父级组件和子组件或者子组件与父组件通信

import React, { Component } from 'react';
import './App.css';
import { LifeCycleComponent } from './pages/life-cycle';
class App extends Component<any, {count: number}> {
  state = { count: 1};
  render() {
    setTimeout(()=>{
      console.log(this)
    })
    return (
      <div className="app-root">
        <LifeCycleComponent count={this.state.count} ></LifeCycleComponent>
        <button onClick={this.onclick.bind(this)}>++</button>
      </div>
    );
  }
}

export default App;

核心思想无非就是通过props去往子组件传递值，当值为function时就提供了子组件向父组件通信的回调方法，传递非function时基本算是父组件向子组件通信，反正父组件和子组件可以通过传递一个值来操作。

跨组件通信

代码

import React, { Component } from 'react';
import './App.css';
import { LifeCycleComponent } from './pages/life-cycle';
import PropTypes from "prop-types";
class App extends Component<any, {count: number}> {
  state = { count: 1};
  static childContextTypes = {
    father: PropTypes.func,
    some: PropTypes.array        
  }
  getChildContext() {
    return {
      father: ()=>{
      },
      some: []
    }
  }
  onclick() {
    this.setState({
      count: this.state.count+1
    });
  }
  render() {
    return (
      <div className="app-root">
        <LifeCycleComponent count={this.state.count} >
        </LifeCycleComponent>
        <button onClick={this.onclick.bind(this)}>++</button>
      </div>
    );
  }
}

export default App;

父组件要做的事

父组件需要表明要提供给子组件或着子子组件（嵌套很深都可以）我提供了那些变量给我的子组件，并且需要说明这些变量的类型
就是上面代码中的

  static childContextTypes = {
   father: PropTypes.func,
   some: PropTypes.array        
 }

如果是JavaScript则为,ps: 就是挂在构造函数上，而非对象中

App.childContextTypes = {
    father: PropTypes.func,
   some: PropTypes.array  
}

父组件还需提供一个获取初始化context的接口（就是component对象的一个方法）getChildContext，如：

  getChildContext() {
    return {
      father: ()=>{
      },
      some: []
    }
  }

子组件需要做的事

代码

import React, { Component } from 'react';
import PropTypes from "prop-types";
export interface LifeCycleProps{
   count: number;
}
export class LifeCycleComponent extends Component<LifeCycleProps> {
   static contextTypes = {
       father: PropTypes.func,
       some: PropTypes.array
   }
   public render() {
       return (
           <div>
               {this.title}{this.props.count}
               <div>
                   {this.props.children}
               </div>
           </div>
       );
   }
}

表明自己需要向父组件取得的值就是以下这段代码

    static contextTypes = {
       father: PropTypes.func,
       some: PropTypes.array
   }

现在打印this这个对象就可以获取到父组件传递的context了

如果是父组件->子组件1->子组件2->子组件3，如果要在子组件3获取context，上面的步骤只需要在子组件三中做即可

特殊情况

• 父组件->子组件1->子组件2->子组件3，其中父组件的context提供dd， 类型为function，子组件1也提供dd， 类型为function， 子组件3获取父组件时指明dd为function，那么组件3的context获取的是子组件2提供的dd
• 父组件->子组件1->子组件2->子组件3，其中父组件的context提供dd， 类型为function，子组件1也提供dd， 类型为boolean，如果子组件3获取父组件时指明dd为function时，获取的是父组件的dd，如果子组件3获取父组件时指明dd为boolean时，获取的是父组件的子组件1
  总结就是获取context是不断往自己上一级找名称和类型都同自己定义为相同是就返回结果，找到root没找到就报错