野心勃勃的React组件生命周期
当你还在写着Angular指令，过滤器，注入，服务，提供者，视图模版的时候，是不是觉得很烦，好在这个时候，React已经神一样的出现在历史舞台。
React组件
React实现了UI=Fn(State)的思想，组件内部有自己的状态和初始的属性，组件在某一个时刻都有一个确定的状态，状态是不断变化的，变化的状态驱动着UI渲染，一切就这么简单。React让UI组件化，一个最小的组件实现，需要一个render方法即可。
1 import React, { Component } from 'react' 2 var Dialog = React.createClass({ 3 render: function(){ 4 return( 5 <div> 6 Hello React 7 </div> 8 ) 9 } 10 }) 组件化方便组合重用，组件有自己的生命周期，详情请阅官方文档: http://reactjs.cn/react/docs/component-specs.html
让我们来看看React组件的生命周期：
getDefaultProps: function () { return{ //在组件类创建的时候调用一次，然后返回值被缓存下来。这是第一个触发的方法，返回的值可以用this.props访问，此值在所有实例间共享 } ｝getInitialState: function () { return{ //在组件挂载之前调用一次。返回值将会作为 this.state 的初始值，这是第二个触发的方法 } }componentWillMount: function(){ //在初始化渲染执行之前立刻调用，只会调用一次 //如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次渲染，尽管 state 改变了。 }componentWillReceiveProps: function (nextProps){ //该方法在初始化渲染的时候不会调用 //在组件接收到新的 props 的时候调用。 //这个方法里给你在渲染之前根据传入的属性来更新状态的机会 this.setState({title: nextProps.dialog.get('title')}); }shouldComponentUpdate: function(nextProps, nextState) { //该方法在初始化渲染的时候不会调用, 在使用 forceUpdate 方法的时候也不会。 //返回布尔值，true表示渲染组件，false表示本次不会运行render渲染调用，默认返回true // 在接收到新的 props 或者 state，将要渲染之前调用。 //如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false }componentWillUpdate: function (nextProps, nextState) { //该方法在初始化渲染的时候不会调用 //在接收到新的 props 或者 state 之前立刻调用.使用该方法做一些更新之前的准备工作. //当shouldComponentUpdate返回true时会在render之前调用. //你不能在这个方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。 }render: function () { //初始化渲染的时候会调用，在第一次初始化渲染的时候不理会shouldComponentUpdate的返回值 //因为shouldComponentUpdate默认返回true，而第一次初始化渲染时候，shouldComponentUpdate是不会调用的，不管你返回true或false。 //有点绕，多读几遍。 //当不是初始化渲染时，如果shouldComponentUpdate返回false，则不会调用render方法。 //在这里可以使用this.props和this.state来获取数据，请不要在这个方法里改变state }componentDidUpdate: function (prevProps, prevState) { //该方法在初始化渲染的时候不会调用 //组件render方法后调用此方法，在组件的更新已经同步到 DOM 中之后立刻被调用，使用该方法可以在组件更新之后操作 DOM 元素。 }componentDidMount: function(){ //在初始化渲染执行之后立刻调用，只会调用一次 //组件已经加载到dom里，在这里可以和浏览器交互，直接操作页面上原始的Dom元素，比如$.ajax调用等等 window.addEventListener("keydown", this.listenKeyboard, true); }componentWillUnmount: function() { //在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。 window.removeEventListener("keydown", this.listenKeyboard, true); } React组件页面触发结果如下：
第一次页面加载时候组件的生命周期如下： getDefaultProps -> getInitialState -> componentWillMount -> render ->componentDidMount 如果时在Redux（后面会讲到）里加载组件，则生命周期如下： getDefaultProps -> getInitialState -> componentWillMount -> render ->componentDidMount -> componentWillReceiveProps -> shouldComponentUpdate 第二次生命周期： componentWillReceiverProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate 如果shouldComponentUpdate返回false，则 componentWillUpdate -> render -> componentDidUpdate这三个方法不会被触发: componentWillReceiverProps -> shouldComponentUpdate
父子组件之间通过属性来传递数据，属性可以是普通字符串也可以是回调函数
兄弟组件之间可以给每个组件设置一个ref属性，然后同样可通过属性来传递此ref数据
但是建议不要这么做，这样结合过于紧密，正确的做法应该是通过消息来解决，
该是Flux出场的时候了，Flux是非死book推的一种解决方案，实现这种方案的框架非常之多，
该是Redux出手的时候了，它是Flux的一种实现，它让组件之间的交互，状态的维护变得简单快乐，简单快乐，简单快乐，重要的事重复说三遍。
Redux有一些基本概念
===================================
action：
事件消息对象，有一个必需的type键，对消息预处理，可以发起ajax请求数据。然后dispatch消息。
reduce:
订阅感兴趣的消息type，对消息数据进一步的加工 ，返回的state数据即以props传入React 组件
component:
React组件，接受Redux以props传入的actions和reduce state data，在React组件里用this.props.xxx和this.props.actions.xxx访问
====================================
组合reduce
====================================
1 import { combineReducers } from 'redux' 2 const reducers = combineReducers({ 3 form, 4 items, 5 dialog 6 }) 派发的消息，会挨个传入组合的reduce里，谁对消息感兴趣谁就接受此消息即可。
这样组件之间通过消息通讯，正所谓高内聚低媾合，组件之间不需要彼此知道彼此是谁，我只对数据感兴趣，那么数据怎么和组件关联上的呢，请看下面：
====================================
链接component和reduce
====================================
1 import { bindActionCreators } from 'redux' 2 import { connect } from 'react-redux' 3 import * as AllActions from '../actions' 4 export default connect(state => ({ 5 form: state.form, 6 items: state.items, 7 dialog: state.dialog, 8 }), dispatch => ({ 9 actions: bindActionCreators(AllActions, dispatch) 10 }))(App) 这一步把组件和reduce返回的state链接里起来，也就是说dialog reduce返回的数据，是驱动dialog组件的UI更新，这一步比较关键，好在redux给你做了，这样让状态的管理特别简单快乐，简单快乐，简单快乐。
React和Flux(Redux)
================================
Redux里用户在页面视图上的交互会触发dom事件，dom事件会派发消息即action，消息除了必需的type之外还可以携带数据，携带的数据可以发起服务器请求获取，然后传给对这个消息感兴趣的reduce，reduce判断自己对某个消息感兴趣后，会对数据进行加工处理，最终返回一个数据对象，即state，返回的state会被Redux作为当前reduce所绑定组件的props传入React组件内部，在这个时候Redux的事件被React的事件接管进入React组件的生命周期内，React组件触发React组件的一系列事件方法，当然包括重要的render方法的调用，从而驱动了UI的更新。
在前端JS的历史舞台终于革命性的出现了一颗闪耀的新星，野心之大前所未见。
React+Flux让前端（web+mobile）阿猿们从此变的简单快乐，简单快乐，简单快乐。