Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Component Specs and Lifecycle

...

ref: 

 

 

  • props: attributes to component  {this.props}
  • propsType: object that  allows you to validate props being passed to your components 
Code Block
titlepropsTypes
 {
	propTypes: { 
				children: React.PropTypes.element.isRequired 
			}
}
  • transferring props: shortcut
    <a {...this.props}>{'√ '}{this.props.children}</a>;
  • mixins – An array of objects, used to extend the current component’s functionality.
  • binding:  ES6 class don't bind (this) method to instance automatically. You'll have to explicitly use .bind(this) or arrow functions =>:

    Code Block
    titlebinding
    // You can use bind() to preserve `this`
    <div onClick={this.tick.bind(this)}>
    
    // Or you can use arrow functions
    <div onClick={() => this.tick()}>

     

  • arrow function

    Code Block
    titlearrow function
    function HelloMessage(props) {
      return <div>Hello {props.name}</div>;
    }
     
    0r
    const HelloMessage = (props) => <div>Hello {props.name}</div>;
  • static: The statics object allows you to define static methods that can be called on the component class. For example:

    Code Block
    titlestatic
    ar MyComponent = React.createClass({
      statics: {
        customMethod: function(foo) {
          return foo === 'bar';
        }
      },
      render: function() {
      }
    });
    
    MyComponent.customMethod('bar');  // true

     

  • state:  editable object parameter. Upon change in state updates  UI Component.

    Code Block
    titlestate
    var MyComponent = React.createClass({
        getInitialState: function(){
            return {
                count: 5
            }
        },
        render: function(){
            return (
                <h1>{this.state.count}</h1>
            )
        }
    });
  • a