在React中，数据是单向流动的，是从上向下的方向，即从父组件到子组件的方向。
state和props是其中重要的概念，如果顶层组件初始化props，那么React会向下遍历整颗组件树，重新渲染相关的子组件。其中state表示的是每个组件中内部的的状态，这些状态只在组件内部改变。
把组件看成是一个函数，那么他接受props作为参数，内部由state作为函数的内部参数，返回一个虚拟dom的实现。

state
state是组件内部的状态，当组件内部使用内置的setState方法，该组件会重新进行渲染。
注意一下，setState方法是一个异步的方法，在一个生命周期中的所有setState方法会合并操作。
props
props是React中用来让组件之间相互联系的一种机制，props的传递过程对React是非常直观的，React的单向数据流主要的流动管道就是props，props本身是不可变的，当我们试图改变props的原始值，React会报类型错误的警告。组件的props一定是来源于默认指定的属性或者是从父组件传入的。
React为props提供了默认配置，通过defaultProps静态变量的方式来定义，当组件被调用的时候，默认值保证渲染后始终有值。
在React中有一个内置的props--children，代表的是子组件的集合，根据子组件的数量，this.props.children的数据类型而且不一致，当没有子组件的时候为undefined，当有一个的时候为object，当有多个的时候为array。
propTypes
propTypes是用来规范props的类型和必须的状态，如果组件定义了propTypes，那么在开发环境下会对props进行检查，在生产环境下是不会进行检查的。

1.6 React主要就下图之中的这些内容，掌握了这个图就算入门了。

2. React-router

官方例子：react-router-tutorial。

完事以后可以再看一下阮一峰老师的教程，主要是对一些API的讲解：React Router 使用教程。

3. Redux 

3.1 简介

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。乱！

这时候Redux就强势登场了，现在你可以把React的model看作是一个个的子民，每一个子民都有自己的一个状态，纷纷扰扰，各自维护着自己状态，太乱了，我们需要一个King来领导大家，我们就可以把Redux看作是这个King。网罗所有的组件组成一个国家，掌控着一切子民的状态！防止有人叛乱生事！

这个时候就把组件分成了两种：容器组件(King或是路由)和展示组件(子民)。

• 容器组件：即redux或是router,起到了维护状态，出发action的作用，其实就是King高高在上下达指令。
• 展示组件：不维护状态，所有的状态由容器组件通过props传给他，所有操作通过回调完成
  • 。

  	展示组件	容器组件
  作用	描述如何展现（骨架、样式）	描述如何运行（数据获取、状态更新）
  直接使用 Redux	否	是
  数据来源	props	监听 Redux state
  数据修改	从 props 调用回调函数	向 Redux 派发 actions
  调用方式	手动	通常由 React Redux 生成

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const reducer = function (state, action) {
  // ...
  return new_state;
};

npm install --save react-redux

import { connect } from 'react-redux';
const TodoList = connect()(Memos);

import { connect } from 'react-redux'
const TodoList = connect(
  mapStateToProps
)(Memos)

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, IndexRoute, hashHistory, Router } from 'react-router';
import { Provider } from 'react-redux';
import App from './container/App';
import AllMemosRoute from './routes/AllMemosRoute';
import TodoRoute from './routes/TodoRoute';
import DoingRoute from './routes/DoingRoute';
import DoneRoute from './routes/DoneRoute';
import configureStore from './stores';
import './main.less';

const store = configureStore();
ReactDOM.render(
    <Provider store={store}>
        <Router history={hashHistory}>
            <Route path="/" component={App}>
                <IndexRoute component={AllMemosRoute} />
                <Route path="/todo" component={TodoRoute} />
                <Route path="/doing" component={DoingRoute} />
                <Route path="/done" component={DoneRoute} />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);

import { createStore } from 'redux';
import reducer from '../reducers';
export default function configureStore(initialState) {
  const store = createStore(reducer, initialState);
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers');
      store.replaceReducer(nextReducer);
    });
  }
  return store;
}

'use strict';
/*
 * @author Damonare 2016-12-10
 * @version 1.0.0
 * action 类型
 */
export const Add_Todo = 'Add_Todo';
export const Change_Todo_To_Doing = 'Change_Todo_To_Doing';
export const Change_Doing_To_Done = 'Change_Doing_To_Done';
export const Change_Done_To_Doing = 'Change_Done_To_Doing';
export const Change_Doing_To_Todo = 'Change_Doing_To_Todo';
export const Search='Search';
export const Delete_Todo='Delete_Todo';
/*
 * action 创建函数
 * @method  addTodo添加新事项
 * @param  {String} text 添加事项的内容
 */
export function addTodo(text) {
  return {
      type: Add_Todo,
      text
  }
}
/*
 * @method  search 查找事项
 * @param  {String} text 查找事项的内容
 */
export function search(text) {
  return {
      type: Search,
      text
  }
}
/*
 * @method  changeTodoToDoing 状态由todo转为doing
 * @param  {Number} index 需要改变状态的事项的下标
 */
export function changeTodoToDoing(index) {
  return {
      type: Change_Todo_To_Doing,
      index
  }
}
/*
 * @method  changeDoneToDoing 状态由done转为doing
 * @param  {Number} index 需要改变状态的事项的下标
 */
export function changeDoneToDoing(index) {
  return {
      type: Change_Done_To_Doing,
      index
  }
}
/*
 * @method  changeDoingToTodo 状态由doing转为todo
 * @param  {Number} index 需要改变状态的事项的下标
 */
export function changeDoingToTodo(index) {
  return {
      type: Change_Doing_To_Todo,
      index
  }
}
/*
 * @method  changeDoingToDone 状态由doing转为done
 * @param  {Number} index 需要改变状态的事项的下标
 */
export function changeDoingToDone(index) {
  return {
      type: Change_Doing_To_Done,
      index
  }
}
/*
 * @method  deleteTodo 删除事项
 * @param  {Number} index 需要删除的事项的下标
 */
export function deleteTodo(index) {
  return {
      type: Delete_Todo,
      index
  }
}

text =>
  dispatch(addTodo(text))

import { combineReducers } from 'redux';
import todolist from './todos';
// import visibilityFilter from './visibilityFilter';

const reducer = combineReducers({
    todolist,
});

export default reducer; 

import {
    ADD_TODO,
    DELETE_TODO,
    CHANGE_TODO_TO_DOING,
    CHANGE_DOING_TO_DONE,
    CHANGE_DOING_TO_TODO,
    CAHNGE_DONE_TO_DOING,
    SEARCH,
} from '../actions';

let todos;
(() => {
    if (localStorage.todos) {
        todos = JSON.parse(localStorage.todos);
    } else {
        todos = [];
    }
})();
const todolist = (state = todos, action) => {
    switch (action.type) {
       /*
        *  添加新的事项
        *  并进行本地化存储
        *  使用ES6展开运算符链接新事项和旧事项
        *  JSON.stringify进行对象深拷贝
        */
        case ADD_TODO:
            return [
                ...state, {
                    todo: action.text,
                    istodo: true,
                    doing: false,
                    done: false
                }
            ];
        /*
         * 将todo转为doing状态，注意action.index的类型转换
         */
        case CHANGE_TODO_TO_DOING:
            localStorage.setItem('todos', JSON.stringify([
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: false,
                    doing: true,
                    done: false
                },
                ...state.slice(parseInt(action.index) + 1)
            ]));
            return [
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: false,
                    doing: true,
                    done: false
                },
                ...state.slice(parseInt(action.index) + 1)
            ];
        /*
         * 将doing转为done状态
         */
        case CHANGE_DOING_TO_DONE:
            localStorage.setItem('todos', JSON.stringify([
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: false,
                    doing: false,
                    done: true
                },
                ...state.slice(parseInt(action.index) + 1)
            ]));
            return [
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: false,
                    doing: false,
                    done: true
                },
                ...state.slice(parseInt(action.index) + 1)
            ];
        /*
         * 将done转为doing状态
         */
        case CAHNGE_DONE_TO_DOING:
            localStorage.setItem('todos', JSON.stringify([
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: false,
                    doing: true,
                    done: false
                },
                ...state.slice(parseInt(action.index) + 1)
            ]));
            return [
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: false,
                    doing: true,
                    done: false
                },
                ...state.slice(parseInt(action.index) + 1)
            ];
        /*
         * 将doing转为todo状态
         */
        case CHANGE_DOING_TO_TODO:
            localStorage.setItem('todos', JSON.stringify([
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: true,
                    doing: false,
                    done: false
                },
                ...state.slice(parseInt(action.index) + 1)
            ]));
            return [
                ...state.slice(0, action.index),
                {
                    todo:state[action.index].todo,
                    istodo: true,
                    doing: false,
                    done: false
                },
                ...state.slice(parseInt(action.index) + 1)
            ];
        /*
         * 删除某个事项
         */
        case DELETE_TODO:
            localStorage.setItem('todos', JSON.stringify([
                ...state.slice(0, action.index),
                ...state.slice(parseInt(action.index) + 1)
            ]));
            return [
                ...state.slice(0, action.index),
                ...state.slice(parseInt(action.index) + 1)
            ];
        /*
         * 搜索
         */
        case SEARCH:
            let text = action.text;
            let reg = eval("/"+text+"/gi");
            return state.filter(item=> item.todo.match(reg));
        default:
            return state;
    }
}
export default todolist;