组件通信总结

父组件和子组件通信

通过props就可以了

子组件向父组件通信

父组件传递一个函数给子组件，子组件通过调用函数后，父组件就能拿到值

父组件调用子组件的所有函数

采用子组件向父组件通信模式，父组件给子组件传回调，子组件在挂载完后把this作为参数，传到父组件即可

class Parent extends Component {
    render() {
        return(
            <View>
                <Child onRef={this.onRef} />
            </View>
        )
    }
    onRef = (ref) => {
        this.child = ref
    }

}

class Child extends Component {
    componentDidMount(){
        this.props.onRef(this)
    }
}

通过ref属性可以获取子组件实例来实现通讯

function App() {
  let myRef = React.createRef()

  useEffect(() => {
      myRef.current.doit()
  }, [])
  return (
    <div className="App">
      <RouterMenu routes={routes} ref = {myRef}/>
    </div>
  );
}

class RouterMenu extends PureComponent {
  static propTypes = {
    routes: PropTypes.array.isRequired
  };
    doit = ()=>{
    alert('ref 获取子组件')
  }
  render() {
    return (
      <HashRouter>
        <RouterDiv>{this.recursive(routes, 1)}</RouterDiv>
      </HashRouter>
    );
  }
}

context跨组件通讯

Redux就是基于这个，相当于是一个全局变量一样，一个顶层的组件提供context后所以的子组件都能访问

events 模块

自定义事件是典型的发布订阅模式,通过向事件对象上添加监听器和触发事件来实现组件之间的通信

npm install events --save

注册事件

import { EventEmitter } from 'events';
const emitter = new EventEmitter();
......
......
 componentDidMount() {
        // 组件装载完成以后声明一个自定义事件
        this.eventEmitter = emitter.addListener('changeMessage', (message) => {
            this.setState({
                message,
            });
        });
    }
    componentWillUnmount() {
        emitter.removeListener(this.eventEmitter);
    }

在其它任何组件里发布事件

 handleClick = (message) => {
        emitter.emit('changeMessage', message);
    };