JSX ?

JSX 是一个FaceBook提供的看起来很像 XML 的 JavaScript 语法糖，让我们更便捷高效的操作js

babel ?

一个javascript代码转换器，主要用于:

• jsx转换为原生js
• es6转换为es5(兼容不同浏览器)

webpack ?

当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

JSX+ES6语法构建React组件

React支持ES5和ES6语法，但推荐使用ES6语法来编写react组件，以下用源码对比ES5和ES6语法下React组件的构建差异：

ES6:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';//ES6语法 构建Component
class App extends Component {constructor(props){ //初始化statesuper(props); //不可变属性this.state = {height: '',opacity: '1.0',color: 'red',fontSize:'25px'};//可变属性//将绑定方法写到constructor中// this.handleClick = this.handleClick.bind(this);}componentWillMount(){//渲染前调用console.log('Lifecycle：'+'componentWillMount');}componentDidMount() { //已被渲染console.log('Lifecycle：'+'componentDidMount');var _self = this;//保存thiswindow.setTimeout(function (){//定时执行_self.setState({color:'green',fontSize:'40px'});},3000);}componentWillUnmount() { //组件从 DOM 中移除的时候立刻被调用console.log('Lifecycle：'+'componentWillUnmount');}componentWillReceiveProps() { //在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用console.log('Lifecycle：'+'componentWillReceiveProps');}componentWillUpdate() {console.log('LifeCycle:' + 'componentWillUpdate')}//使用ES6 class语法创建组件， class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 ＝>来进行手动绑定handleClick () {console.log('ES6 ' + this.props.nameProp);}render () {return (<div className="App"><div className="App-header"><img src={logo} className="App-logo" alt="logo" /><h2>Hello {this.props.nameProp} Welcome to React</h2></div><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p><div style={{color:this.state.color,fontSize:this.state.fontSize}} onClick={this.handleClick.bind(this)}>button</div></div>);}
}//props类型校验
App.propTypes = {nameProp: React.PropTypes.string
};//props默认值
App.defaultProps = {nameProp: 'leo'
};export default App;

ES5:

//ES5语法 构建Component
var App = React.createClass({getInitialState: function () { //初始化state// alert('init hook');return {opacity: 1.0,fontsize: '12px'};},componentWillMount: function () {//渲染前调用console.log('Lifecycle：'+'componentWillMount');},componentDidMount: function() { //已被渲染console.log('Lifecycle：'+'componentDidMount');},componentWillUnmount: function() { //组件从 DOM 中移除的时候立刻被调用console.log('Lifecycle：'+'componentWillUnmount');},handleClick: function () {console.log('ES5 ' + this.props.nameProp);},propTypes:{nameProp: React.PropTypes.string},getDefaultProps () {return {nameProp: 'leo'};},render: function () {return ( <div className="App"><div className="App-header"><img src={logo} className="App-logo" alt="logo" /><h2>Hello leoo  Welcome to React</h2></div><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p><div onClick={this.handleClick}>button</div></div>);}
});export default App;

对比小结

• ES6 class创建的组件语法更加简明，也更符合javascript规范。
• ES6下，Component 内部的方法不需要使用function关键字。
• 使用React.Component创建组件，需要通过在constructor中调用super()将props传递给React.Component。且react 0.13之后props是不可变的。
• 对于ES5下的getDefaultProps方法，由于props不可变，所以ES6下被定义为一个属性，和propTypes一样，要定义在class外部。
• ES6 class语法创建组件，初始化state的工作要在constructor中完成。不可再调用getInitialState方法。
• ES6 class语法创建组件， class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 ＝>来进行手动绑定。

React Component Lifecycle

• componentWillMount : 在渲染前调用,在客户端也在服务端。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval : 或者发送AJAX请求等操作(防止异部操作阻塞UI)。
• componentWillReceiveProps : 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate : 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
• componentWillUpdate : 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate : 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount : 在组件从 DOM 中移除的时候立刻被调用。

参考

React官方指导文档