React's component collaborative use implementation

Developers do not need to pay too much attention to the implementation details at the UI level. What they need to consider most is the data communication between components. So, in React development, what are the scenarios where components work together? How to achieve the coordinated use of components?

Component collaboration is essentially a way of organizing and managing components.

The purpose is to make the system logic clear, the code modular, the details encapsulated, and the code reusable.

There are two ways of component collaboration: nested, extracted, and publish-subscribe mode.

Nesting

The essence of component nesting is the parent-child relationship, that is, the communication between parent components and child components.

In general, there are two scenarios:

• Parent-child component communication
• Brother component communication

Parent-child component communication

First, let's take a look at the most commonly used method, through the props attribute. Taking the parent-child component as an example, the parent component only needs to pass the data to the child component in the form of props, and the child component can directly obtain it through this.props, such as:

// Parent component
export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: 'Message passed to child components'
    }
  }

  //Message callback onMessage(messageFromChildren) {
    console.log(messageFromChildren);
  }

  render() {
    const { message } = this.state;
    return (
      <div>
        <Children message={ message } onMessage={ this.onMessage.bind(this) } />
      </div>
    );
  }
}

//Children
export default class Children extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.onMessage('message from child component');
  }

  render() {
    const { message } = this.props;
    return (
      <div>
        <p>{ message }</p>
        <button onClick={ this.handleClick.bind(this) }>click</button>
      </div>
    );
  }
}

Of course, if the Children component needs to pass data to the parent component, you can use the callback method. The parent component passes the reference of the method to the child component through props, such as calling onMessage in handleClick in the above code. When the parent component's state is updated, the Children component will re-render and use the latest message data.

The function of bind is to add default parameters to the function. The first parameter will replace this in the method.

Brother component communication

Brother components cannot communicate with each other directly, and need to be transferred through the parent component to improve the status. Sibling components promote the data that needs to be shared to the common direct parent component, and then communicate with each other just like ordinary parent-child components. for example:

// Parent component
export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      messageFromA: '',
      messageFromB: ''
    }
  }

  onMessage(messageFromChildren, from) {
    console.log(messageFromChildren);

    this.setState({
      [from == 'A' ? 'messageFromA' : 'messageFromB']: messageFromChildren
    });
  }

  render() {
    const { messageFromA, messageFromB} = this.state;
    return (
      <div>
        <ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
        <ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
      </div>
    );
  }
}

//ChildrenA
export default class ChildrenA extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.onMessage('Message from A subcomponent', 'A');
  }

  render() {
    const { message } = this.props;
    return (
      <div className="pa ba">
        <p>{ message }</p>
        <button onClick={this.handleClick.bind(this)}>clickA</button>
      </div>
    );
  }
}

//ChildrenB
export default class ChildrenB extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.onMessage('Message from B child component', 'B');
  }

  render() {
    const { message } = this.props;
    return (
      <div className="pa ba">
        <p>{ message }</p>
        <button onClick={this.handleClick.bind(this)}>clickB</button>
      </div>
    );
  }
} 

When clickA is clicked, subcomponent B receives the message from subcomponent A, and vice versa.

Component communication through props is relatively simple, but it also has its own shortcomings. When the component level is greater than 3 layers, this method is not suitable. First of all, deep-level transmission is simply a nightmare for maintenance. You need to look at each layer to know the source and flow of the data. Secondly, if there are not only sub-components A and B, but also sub-component C, the parent component state update caused by components A and B will trigger the update of sub-component C, but in fact, sub-component C does not receive any data, which may easily cause waste of resources.

// Parent component render() {
    const { messageFromA, messageFromB} = this.state;
    return (
      <div>
        <ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
        <ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
        <ChildrenC />
      </div>
    );
  }

//ChildrenC
export default class ChildrenC extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidUpdate() {
    console.log('ChildrenC updated');
  }


  render() {
    return (
      <div>ChildrenC</div>
    );
  }
}

Withdraw

Mixin

The extraction introduced here mainly refers to Mixin.

Assuming that multiple components use the same getDefaultProps method, we can define the following Mixin:

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {name: "Tom"};
    }
};

Mixin is equivalent to an extension of a component. Its essence is a collection of methods. Components using this mixin can use these methods freely (just as defined in the component). The purpose of using Mixin is to extract similar codes of components horizontally.

Other concepts similar to Mixin include: AOP, plug-ins, etc.

In this example, DefaultNameMixin contains the getDefaultProps method. In addition to direct definition, Mixin can also be nested, that is, you can use another Mixin when defining a Mixin:

var DefaultCommonMixin = {
    mixins:[DefaultNameMixin], //use Mixin
    getDefaultProps: function () {
        return {food: "rice"};
    }
};

In the example, DefaultNameMixin is nested in the definition of DefaultCommonMixin, so DefaultCommonMixin includes the getDefaultProps method defined in DefaultNameMixin. At this time, there are two methods in DefaultCommonMixin. When using Mixin, just add Mixin to the array corresponding to the mixins attribute. The syntax for using Mixin is mixins:[Mixin1, Mixin2…].

When using Mixin, just add Mixin to the array corresponding to the mixins attribute. The syntax for using Mixin is mixins:[Mixin1, Mixin2…].

var Component = React.createClass({
    mixins:[DefaultCommonMixin], //use Mixin
    render:function(){
        return <h1>{this.props.name} like {this.props.food}</h1>;
    }
}); 

ReactDOM.render(
    <Component/>,
    document.getElementById("example")
);

A component can use multiple Mixins, and Mixins can also be used in multiple components.

When using Mixin, be careful not to set the same Prop and State in multiple places. At the same time, when the same method is defined in different Mixins, or the same method is included in Mixin and component, an exception will be thrown. However, this situation does not apply to lifecycle methods such as componentDidMount (except for the render method, which will also throw an exception if it is defined multiple times).

If the same lifecycle method is defined in multiple places in a component, the execution order of these methods is: the method in the mixin will be executed first (from left to right according to the order in the mixins), and then the method defined in the component will be executed.

Advantages of Mixin:

Code reuse: extract common code, reduce development costs, and improve development efficiency

Plug and Play: You can directly use many existing Mixins to write your own components

Strong adaptability: changing the code once affects multiple components

Disadvantages of Mixin:

High writing difficulty: Mixin may be used in various environments. Compatibility with multiple environments requires more logic and code. The cost of universality is increased complexity.

Reduced code readability: The advantage of components is that they directly combine logic and interface. Mixin essentially disperses logic and is more difficult to understand.

React's LinkedStateMixin

'use strict';  
  
// Construct object {value, requestChange}, value is the initial value, requestChange is a method that must be called manually // In this module, value is the initial value of state[key], requestChange is used to update state[key]  
var ReactLink = require('./ReactLink');  
  
// After setting the attribute key, return a function that accepts value and calls the component.setState method internally to update state[key]=value  
var ReactStateSetters = require('./ReactStateSetters');  
  
/** 
 * Provides two-way binding for the one-way data flow of manually calling the setState method in react * Automatically calls the setState method after passing the value using linkState(key).requestChange(value) to update the state 
 * 
 * Example * var LinkedStateMixin = require('react-addons-linked-state-mixin'); 
 
 * var WithoutLink = React.createClass({ 
 * mixins: [LinkedStateMixin], 
 * getInitialState: function() { 
 * return {message: 'Hello!'}; 
 * }, 
 * render: function() { 
 * var valueLink = this.linkState('message'); 
 * var handleChange = function(e) { 
 * valueLink.requestChange(e.target.value); 
 * }; 
 * return <input type="text" value={valueLink.value} onChange={handleChange} />; 
 * } 
 * }); 
 */  
var LinkedStateMixin = {  
  // ReactStateSetters.createStateKeySetter method is used to construct the requestChange method of the object returned by linkState(key) // Automatically call the setState method after passing the value to update the state  
  linkState: function (key) {  
    return new ReactLink(this.state[key], ReactStateSetters.createStateKeySetter(this, key));  
  }  
};  
  
module.exports = LinkedStateMixin;

Use the above mixin:

import LinkedStateMixin from 'react-addons-linked-state-mixin'

mixins: [React.addons.LinkedStateMixin],

LinkedStateMixin is just a simple wrapper and convention for onChange/setState() pattern. It does not fundamentally change how data flows in your React application. In other words, LinkedStateMixin is essentially a one-way flow. It just passes data changes to React through onChange , and then automatically calls setState to update the internal data.

Example of use:

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

LinkedStateMixin adds a method called linkState() to your React components. linkState() returns a valueLink object containing the current value of React state and a callback function to change it.

The valueLink object can be passed up or down the tree as props , so it's very easy to establish two-way binding at the component level and the state level.

Notice:

There is a special behavior for value attribute of checkbox . If checkbox is selected ( on by default), value attribute value will be sent when the form is submitted. When checkbox is checked or unchecked, value attribute is not updated. For checkbox , you should use checkLink instead of valueLink .

<checkbox type="checkbox" checkedLink={this.linkState('booleanValue')} />

Reference:

1. http://schifred.iteye.com/blog/2361478

2. http://blog.csdn.net/qq_18661257/article/details/68951561

This is the end of this article about the collaborative use of React components. For more relevant React component collaboration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!