Communication problems in the assembly 5.React

1. The value passed to the parent component subassembly

This surely we all know it! All thought we react with the props, then I would simply write a small demo, see the
parent component

class Parent extends Component{
  render() {
    return (
      <Child text="Hello" />
    )
  }
}

Subassembly

class Child extends Component{
  render(){
    return (
      <p>{ this.props.text }</p>
    )
  }
}

2. The value passed to the parent sub-assembly components

Phase we will have to think about it is estimated here! So I also wrote a little demo to tell you, in fact, it is not difficult to understand Oh
parent component

class Parent extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      someKey: 'world'
    };
  }
  fn(newState) {
    this.setState({ someKey: newState });
  }
  render() {
    return (
      <div>
        <Child pfn={this.fn.bind(this)} />
        <p>{this.state.someKey}</p>
      </div>
    );
  }
}

Subassembly

class Child extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      newState: 'Hello'
    };
  }
  someFn() {
    this.props.pfn(this.state.newState);//这里就是传值给父组件
  }
  render() {
    return (
      <div onClick={ this.someFn.bind(this) }>点我</div>
    );
  }
}

A value of parent element to pass through the callback function, and bind parent element this this.fn.bind (this)

3. The transmission assembly of any value between nesting relationship

If there is no relationship between the components, component nesting levels relatively deep (personally think that two or more layers has been considered deep), or you can subscribe to some components, write some signals, do not want to insert a component between components, allowing two components in relation independent. For event system, there are two basic steps: Subscription (subscribe) / monitor (listen) an event notification, and send (send) / trigger (trigger) / release (publish) / send (dispatch) an event notification those who want to components want.

Here to talk introduces three models to handle the event, you can click here to compare them.

Briefly summarize:

(1) Event Emitter/Target/Dispatcher

Features: the need for a specific feed

// to subscribe
otherObject.addEventListener(‘click’, function() { alert(‘click!’); });
// to dispatch
this.dispatchEvent(‘click’);

(2) Publish / Subscribe

Features: When a triggering event, you do not need to specify a particular source, because it is (in fact, a way to deal with the global broadcast event) using a global object to handle the event

// to subscribe
globalBroadcaster.subscribe(‘click’, function() { alert(‘click!’); });
// to dispatch
globalBroadcaster.publish(‘click’);

(3) Signals

Features: With Event Emitter / Target / Dispatcher similar, but you do not use a random string of events triggered as a reference. Each object trigger event requires an exact name (which is similar to hard-code the class to write the name of the event), and when triggered, must also specify the exact events. (See an example, well understood)

// to subscribe
otherObject.clicked.add(function() { alert(‘click’); });
// to dispatch
this.clicked.dispatch();

In dealing with events, note:
In componentDidMount event, if the component mount (mounted) to complete, and then subscribe to the event; when components are uninstalled (unmounted), the unsubscribe events in componentWillUnmount event.

Read the above, whether some perception
, for example, to communicate between father and son components through non-event, if the operation is not a lot we can do it yourself simply to achieve the following Oh!
Now I wrote a simple, see

Simple implementation a bit subscribe and dispatch

let EventEmitter = {
  _events: {},
  dispatch: function (event, data) {
    if (!this._events[event]) { // 没有监听事件
      return;
    }
    for (var i = 0; i < this._events[event].length; i++) {
      this._events[event][i](data);
    }
  },
  subscribe: function (event, callback) {
    // 创建一个新事件数组
    if (!this._events[event]) {
      this._events[event] = [];
    }
    this._events[event].push(callback);
  }
};

otherObject.subscribe('namechanged', (data) => console.log(data.name));
this.dispatch('namechanged', { name: 'John' });

Now is not the fact that components of the communication is not so difficult to understand it, come on, show years