React In Action

javascript

---

1. Feature
   
   • Just the UI
   • Virtual DOM
2. Props VS State
3. Lifecycle
4. Some tips
   
   • Form
   • Assign a key to dynamic Children
   • DOM event listener and ajax
   • Maintain classname and inline style
   • Communicate between components
   • Render method
5. 4 examples

Feature

var Wrapper = React.createClass({
  render: function(){
    var className = "inner"
    return (
      <div>
        This is Wrapper
        <Inner className={className}  />
      </div>
    )
  }
})
var Inner = React.createClass({
  render: function(){
    return (
      <div className={this.props.className}>
        This is inner, className is {this.props.className}
      </div>
    )
  }
})
React.render(<Wrapper />, document.body);

Props VS State

• What is props -- <div className={}>
• What is state -- Things that will change
  

  you simply update a component's state, and then render a new UI based on this new state.

Difference between props and state

Simply ask three questions about each piece of data:
1. Does it change over time? If not, it probably isn't state. (在某一时间点改变值)
2. Is it passed in from a parent via props? If so, it probably isn't state.(不来自于父元素)
3. Can you compute it based on any other state or props in your component? If so, it's not state.(不能由其他值计算得出)

Question: If a value passed in from a parent via props, but it will change in some time, is this state?

Lifecycle

Mount -> Update -> Unmount

• getInitialState
  

  Invoked once before the component is mounted. The return value will be used as the initial value of this.state.

• Mounting: componentWillMount

• Mounting: componentDidMount

  Integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests

• Updating: componentWillUpdate

• Updating: componentDidUpdate
• Unmounting: componentWillUnmount
  

  clear timeout, clean DOM events

Tips

Form(input)

Assign a key to dynamic Children

...
render: function(){
  var list = this.props.list
  return (
    <div>
      {
        list.map(function(item){
          return <Other item={item} key={item.id} />
        })
      }
    </div>
  ) 
}
...

DOM event listener and ajax

Bind in componentDidMount method and unbind in componentWillUnmount

Maintain classname and inline style

...
render: function(){
  var className = "aa"
  if(..) className += ' bb'
  return <div className={className} /> 
}
...

Communicate between components

1. For parent-child communication, simply pass props.

2. For child-parent communication

   var GroceryList = React.createClass({
     handleClick: function(i) {
       console.log('You clicked: ' + this.props.items[i]);
     },
     render: function() {
       return (
         <div>
           {this.props.items.map(function(item) {
             return (
               <div onClick={this.handleClick.bind(this, i)} key={item}>{item}</div>
             );
           }, this)}
         </div>
       );
     }
   });
   React.render(
     <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
   );

3. For communication between two components that don't have a parent-child relationship
   Use your own event system

Render method

In JSX, always return one element

 render: function(){
    return (
      <article />
      <article />
    )
 }

 render: function(){
    return (
      <section>
          <article />
          <article />
      </section>
    )
 }

Examples