Vue       React
Fatest            23ms      63ms
Mediam            42ms      81ms
Average           51ms      94ms
95thPerc.         73ms      164ms
Slowest           343ms     453ms

render () {
  let { items } = this.props
  let children
  if (items.length > 0) {
    children = (
      <ul>
        {items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    )
  } else {
    children = <p>No items found.</p>
  }
  return (
    <div className='list-container'>
      {children}
    </div>
  )
}

<template>
  <div class="list-container">
    <ul v-if="items.length">
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>No items found.</p>
  </div>
</template>

div.list-container
  ul(v-if="items.length")
    li(v-for="item in items") {{ item.name }}
  p(v-else) No items found.

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

//选择你要安装的文件夹，并在该文件夹下执行以下命令
git clone https://github.com/phacility/libphutil.git
git clone https://github.com/phacility/arcanist.git
git clone https://github.com/phacility/phabricator.git

<VirtualHost *>
  # Change this to the domain which points to your host.
  ServerName phabricator.example.com

  # Change this to the path where you put 'phabricator' when you checked it
  # out from GitHub when following the Installation Guide.
  #
  # Make sure you include "/webroot" at the end!
  DocumentRoot /path/to/phabricator/webroot
  RewriteEngine on
  RewriteRule ^(.*)$          /index.php?__path__=$1  [B,L,QSA]
</VirtualHost>

<Directory "/path/to/phabricator/webroot">
  Order allow,deny
  Allow from all
</Directory>

<Directory "/path/to/phabricator/webroot">
  Require all granted
</Directory>

server {
  server_name phabricator.example.com;
  #你的phabricator安装目录
  root        /path/to/phabricator/webroot;

  location / {
    index index.php;
    rewrite ^/(.*)$ /index.php?__path__=/$1 last;
  }

  location /index.php {
    fastcgi_pass   localhost:9000;
    fastcgi_index   index.php;

    #required if PHP was built with --enable-force-cgi-redirect
    fastcgi_param  REDIRECT_STATUS    200;

    #variables to make the $_SERVER populate in PHP
    fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
    fastcgi_param  QUERY_STRING       $query_string;
    fastcgi_param  REQUEST_METHOD     $request_method;
    fastcgi_param  CONTENT_TYPE       $content_type;
    fastcgi_param  CONTENT_LENGTH     $content_length;

    fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;

    fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
    fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;

    fastcgi_param  REMOTE_ADDR        $remote_addr;
  }
}

ReactDOM.render(<App />, rootEl);
//下面这一行会重新使用已存在的DOM
ReactDOM.render(<App />, rootEl);

function instantiateComponent(element) {
  var type = element.type;
  if(typeof type === 'function') {
    return new CompositeComponent(type);
  }else if(typeof type === 'string') {
    return new DOMComponent(type);
  }
}

class CompositeComponent {
  constructor(element) {
    this.currentElement = element;
    this.renderedComponent = null;
    this.publicInstance = null;
  }

  getPublicInstance() {
    // For composite components, expose the class instance.
    return this.publicInstance;
  }

  mount() {
    var element = this.currentElement;
    var type = element.type;
    var props = element.props;

    var publicInstance;
    var renderedElement;
    if (isClass(type)) {
      // Component class
      publicInstance = new type(props);
      // Set the props
      publicInstance.props = props;
      // Call the lifecycle if necessary
      if (publicInstance.componentWillMount) {
        publicInstance.componentWillMount();
      }
      renderedElement = publicInstance.render();
    } else if (typeof type === 'function') {
      // Component function
      publicInstance = null;
      renderedElement = type(props);
    }

    // Save the public instance
    this.publicInstance = publicInstance;

    // Instantiate the child internal instance according to the element.
    // It would be a DOMComponent for <div /> or <p />,
    // and a CompositeComponent for <App /> or <Button />:
    var renderedComponent = instantiateComponent(renderedElement);
    this.renderedComponent = renderedComponent;

    // Mount the rendered output
    return renderedComponent.mount();
  }
}

class DOMComponent {
  constructor(element) {
    this.currentElement = element;
    this.renderedChildren = [];
    this.node = null;
  }

  getPublicInstance() {
    // For DOM components, only expose the DOM node.
    return this.node;
  }

  mount() {
    var element = this.currentElement;
    var type = element.type;
    var props = element.props;
    var children = props.children || [];
    if (!Array.isArray(children)) {
      children = [children];
    }

    // Create and save the node
    var node = document.createElement(type);
    this.node = node;

    // Set the attributes
    Object.keys(props).forEach(propName => {
      if (propName !== 'children') {
        node.setAttribute(propName, props[propName]);
      }
    });

    // Create and save the contained children.
    // Each of them can be a DOMComponent or a CompositeComponent,
    // depending on whether the element type is a string or a function.
    var renderedChildren = children.map(instantiateComponent);
    this.renderedChildren = renderedChildren;

    // Collect DOM nodes they return on mount
    var childNodes = renderedChildren.map(child => child.mount());
    childNodes.forEach(childNode => node.appendChild(childNode));

    // Return the DOM node as mount result
    return node;
  }
}

[object CompositeComponent] {
  currentElement: <App />,
  publicInstance: null,
  renderedComponent: [object CompositeComponent] {
    currentElement: <Button />,
    publicInstance: [object Button],
    renderedComponent: [object DOMComponent] {
      currentElement: <div />,
      node: [object HTMLDivElement],
      renderedChildren: []
    }
  }
}

ReactDOM.render(<App />, rootEl);

console.log(<App />);
// { type: App, props: {} }

function isClass(type) {
  //React.Component的子类都有这个标记
  return (Boolean(type.prototype) && Boolean(type.prototype.isReactComponet));
}

//这个函数接受一个React元素，比如(<App/>)
//返回一个表示为镶嵌的树的DOM或原生节点
function mount(element) {
  var type = element.type;
  var props = element.props;
  //我们需要查明/确定渲染的元素，将type作为函数运行或者创建一个实例并调用render
  var renderedElement;
  if(isClass(type)) {
    //组件类
    var publicInstance = new type(props);
    //设置属性
    publicInstance.props = props;
    //如果有必要则调用生命周期
    if(publicInstance.componentWillMount) {
      publicInstance.componentWillMount();
    }
    //通过调用render()得到渲染的元素
    renderedElement = publicInstance.render();
  }else{
    //组件函数
    renderedElement = type(props);
  }

  //这个过程是递归的因为一个组件返回的元素有可能是一个别的类型的组件
  return mount(renderedElement);
  //注意：这个实现是没有完成的而且会无限循环，它只会处理类似<App />,<Button>的元素
  //它还没有支持处理像<div />或<p/>
}

var rootEl = document.getElementById('root');
var node = mount(<App />);
rootEl.appendChild(node);

console.log(<div />);
// { type: 'div', props: {} }

function isClass(type) {
  // React.Component子类都有这个标记
  return (
    Boolean(type.prototype) &&
    Boolean(type.prototype.isReactComponent)
  );
}

//这个函数只处理复杂类型的元素
//它只处理类似于<App/>和<Button />这样的，而不是<div/>
function mountComposite(element) {
  var type = element.type;
  var props = element.props;

  var renderedElement;
  if (isClass(type)) {
    //组件类
    var publicInstance = new type(props);
    // 设置属性
    publicInstance.props = props;
    //如果有必要，调用生命周期
    if (publicInstance.componentWillMount) {
      publicInstance.componentWillMount();
    }
    renderedElement = publicInstance.render();
  } else if (typeof type === 'function') {
    //组件函数
    renderedElement = type(props);
  }

  // This is recursive but we'll eventually reach the bottom of recursion when
  //这是个递归的过程，但是当元素是主机元素时（比如<div/>而不是复杂的组件）我们最终会到达递归的底部
  return mount(renderedElement);
}

//这个函数只处理主机类型元素
//比如，它处理<div/>,<p/>不会出来<App/>
function mountHost(element) {
  var type = element.type;
  var props = element.props;
  var children = props.children || [];
  if (!Array.isArray(children)) {
    children = [children];
  }
  children = children.filter(Boolean);

  //这一块的代码不会再协调器中
  //不同的渲染器可能会初始化不同的节点
  //比如，React Native可能会创建IOS或者Android的视图
  var node = document.createElement(type);
  Object.keys(props).forEach(propName => {
    if (propName !== 'children') {
      node.setAttribute(propName, props[propName]);
    }
  });

  //镶嵌子元素
  children.forEach(childElement => {
    // Children may be host (e.g. <div />) or composite (e.g. <Button />).
    //子元素们可能是主机元素（比如<div/>）或复杂性元素(<Button/>)
    //我们会递归的装载他们
    var childNode = mount(childElement);

    //这行代码也是渲染器特有的
    //不同的渲染器有不同的结果
    node.appendChild(childNode);
  });

  //将DOM节点的装载结果返回
  //这儿递归结束
  return node;
}

function mount(element) {
  var type = element.type;
  if (typeof type === 'function') {
    // User-defined components
    return mountComposite(element);
  } else if (typeof type === 'string') {
    // Platform-specific components
    return mountHost(element);
  }
}

var rootEl = document.getElementById('root');
var node = mount(<App />);
rootEl.appendChild(node);

ReactDOM.render(<App />, rootEl);
//会重新使用存在的DOM
ReactDOM.render(<App />, rootEl);

function instantiateComponent(element) {
  var type = element.type;
  if(typeof type === 'function') {
    //用户定义的组件
    return new CompositeComponent(element);
  }else if(typeof === 'string') {
    //平台组件
    return new DOMComponent(element);
  }
}

class CompositeComponent {
  constructor(element) {
    this.currentElement = element;
    this.renderedElement = null;
    this.publicInstance = null;
  }

  getPublicInstance() {
    //对应复杂的组件，暴露出这个类实例
    return this.publicInstance;
  }

  mount() {
    var element = this.currentElement;
    var type = element.type;
    var props = element.props;
    var publicInstance;
    var renderedElement;
    if(isClass(type)) {
      //组件类
      publicInstance = new type(props);
      //设置属性
      publicInstance.props = props;
      //如果有必要，调用生命周期
      if(publicInstance.componentWillMount) {
        publicInstance.componentWillMount();
      }
      renderedElement = publicInstance.render();
    }else if(typeof type === 'function') {
      publicInstance = null;
      renderedElement = type(props);
    }

    //保存公共实例
    this.publicInstance = publicInstance;
    //根据元素实例化子组件的内部实例
    //<div>,<p>将为一个DOM节点
    //<App /> <Button>将为一个复杂组件
    var renderedComponent = instantiateComponent(renderedElement);
    this.renderedComponent = renderedComponent;

    //装载renderd的输出
    return renderedComponent.mount();
  }
}

[object CompositeComponent] {
  currentElement: <App />,
  publicInstance: null,
  rendererComponent: [object CompositeComponent] {
    currentElement: <Button />,
    publicInstance: [object Button],
    renderedComponent: [object DOMComponent] {
      currentElement: <div />,
      node: [object HTMLDivElement],
      renderedChildren: []
    }
  }
}

function mountTree(element, containerNode) {
  //创建顶层的内部实例
  var rootComponent = instantiateComponent(element);

  //装载顶层组件到containetr
  var node = rootComponent.mount();
  containerNode.appendChild(node);
  //返回它提供的公共实例
  var publicInstance = rootComponent.getPublicInstance();
  return publicInstance;
}

var rootEl = document.getElementById('root');
mountTree(<App />, rootEl);

class CompositeComponent {

  //....
  unmount() {
    //如果有必要调用生命周期的钩子
    var publicInstance = this.publicInstance;
    if(publicInstance) {
      if(publicInstance.componentWillUnMount) {
        publicInstance.componentWillUnMount();
      }
    }

    //卸载单个渲染的组件
    var renderedComponent = this.renderedComponent;
    renderedComponent.unmount();
  }
}

class DOMComponent {
  //...

  unmount() {
    //卸载所有children
    var renderedChildren = this.renderedChildren;
    renderedChildren.forEach( child => child.unmount());
  }
}

function unmountTree(containerNode) {
  //从DOM节点中读取内部实例
  //(这个还不能工作，我们需要改变mountTree来来储存它)
  var node = containerNode.firstChild;
  var rootComponent = node._internalInstance;

  //卸载这个树并且情况这个container
  rootComponent.unmount();
  containerNode.innerHTML = '';
}

function mountTree(element, containerNode) {
  //销毁任何存在的树
  if(containerNode.firstChild) {
    unmountTree(containerNode);
  }

  //创建顶层内部实例
  var rootComponent = instantiateComponent(element);

  //装载顶层内部实例到container
  var mode = rootComponent.mount();
  containerNode.appendChild(node);

  //保存一个到内部实例的引用
  node._internalInstance = rootComponent;

  //返回它所提供的公共实例
  var publicInstance = rootComponent.getPublicInstance();
  return publicInstance;
}

var rootEl = document.getElementById('root');
mountTree(<App />, rootEl);
//这里应返回已存在的DOM
mountTree(<App />, rootEl);

class CompositeComponent {
  //...

  receive(nextElement) {
    //...
  }
}

class DOMComponent {
  //...

  receive(nextElement) {
    //...
  }
}

class CompositeComponent {

  //...

  receive(nextElement) {
    var prevProps = this.currentElement.props;
    var publicInstance = this.publicInstance;
    var prevRenderedComponent = this.renderedComponent;
    var prevRenderedElement = this.renderedElement;

    //修改*自己的*元素
    this.currentElement = nextElement;
    var type = nextElement.type;
    var nextProps = nextElement.props;

    //解决下一次的render()输出的是什么
    var nextRenderedElement;
    if(isClass(type)) {
      //组件类
      //如果有必要调用生命周期
      if(publicInstance.componentWillUpdate) {
        publicInstance.componentWillUpdate(prevProps);
      }
      //修改属性
      publicInstance.props = nextProps;
      //重新渲染
      nextRenderedElement = publicInstance.render();
    }else if(typeof type === 'function') {
      //组件函数
      nextRenderedElement = type(nextProps);
    }
  }
}

//...


//如果渲染的元素的类型没有变化
//复用已存在的组建实例并退出
if(prevRenderedElement.type === nextRenderedElement.type) {
  prevRenderedComponent.receive(nextRenderedElement);
  return;
}

// ...

  //如果我们达到这一点，我们需要卸载先前的
  //装载组件，装载新的，交换他们的节点

  //找到老节点因为它将被替换
  var prevNode = prevRenderedComponent.getHostNode();

  //卸载老child并装载新的child
  prevRenderedComponent.unmount();
  var nextRenderedComponent = instantiateComponent(nextRenderedElement);
  var nextNode = nextRenderedComponent.mount();

  //替换child的引用
  this.renderedComponent = nextRenderedComponent;

  //用新的替换老节点
  //注意：这是渲染器特定的代码并且在理想情况下，因位于CompositeComponent的外面
  prevNode.parentNode.replaceChild(nextNode, prevNode);
}
}

class CompositeComponent {
  // ...

  getHostNode() {
    // Ask the rendered component to provide it.
    // This will recursively drill down any composites.
    return this.renderedComponent.getHostNode();
  }
}

class DOMComponent {
  // ...

  getHostNode() {
    return this.node;
  }  
}

class DOMComponent {
  //...
  receive(nextElement) {
    var node = this.node;
    var prevElement = this.currentElement;
    var prevProps = prevElement.props;
    var nextProps = nextElement.props;    
    this.currentElement = nextElement;

    // Remove old attributes.
    Object.keys(prevProps).forEach(propName => {
      if (propName !== 'children' && !nextProps.hasOwnProperty(propName)) {
        node.removeAttribute(propName);
      }
    });
    // Set next attributes.
    Object.keys(nextProps).forEach(propName => {
      if (propName !== 'children') {
        node.setAttribute(propName, nextProps[propName]);
      }
    });

    // ...
}

// ...

    //这是React元素的数组
    var prevChildren = prevProps.children || [];
    if (!Array.isArray(prevChildren)) {
      prevChildren = [prevChildren];
    }
    var nextChildren = nextProps.children || [];
    if (!Array.isArray(nextChildren)) {
      nextChildren = [nextChildren];
    }
    //这是内部实例的数组
    var prevRenderedChildren = this.renderedChildren;
    var nextRenderedChildren = [];

    //当我们遍历children时，我们要添加对这个数组的一些操作
    var operationQueue = [];

    //注意：下面的部分非常简单，他不会处理重新排序，它的存在只是为了说明整体流程，但不具体
    for (var i = 0; i < nextChildren.length; i++) {
      // Try to get an existing internal instance for this child
      var prevChild = prevRenderedChildren[i];

      // If there is no internal instance under this index,
      // a child has been appended to the end. Create a new
      // internal instance, mount it, and use its node.
      if (!prevChild) {
        var nextChild = instantiateComponent(nextChildren[i]);
        var node = nextChild.mount();

        // Record that we need to append a node
        operationQueue.push({type: 'ADD', node});
        nextRenderedChildren.push(nextChild);
        continue;
      }

      // We can only update the instance if its element's type matches.
      // For example, <Button size="small" /> can be updated to
      // <Button size="large" /> but not to an <App />.
      var canUpdate = prevChildren[i].type === nextChildren[i].type;

      // If we can't update an existing instance, we have to unmount it
      // and mount a new one instead of it.
      if (!canUpdate) {
        var prevNode = prevChild.node;
        prevChild.unmount();

        var nextChild = instantiateComponent(nextChildren[i]);
        var nextNode = nextChild.mount();

        // Record that we need to swap the nodes
        operationQueue.push({type: 'REPLACE', prevNode, nextNode});
        nextRenderedChildren.push(nextChild);
        continue;
      }

      // If we can update an existing internal instance,
      // just let it receive the next element and handle its own update.
      prevChild.receive(nextChildren[i]);
      nextRenderedChildren.push(prevChild);
    }

    // Finally, unmount any children that don't exist:
    for (var j = nextChildren.length; j < prevChildren.length; j++) {
     var prevChild = prevRenderedChildren[j];
     var node = prevChild.node;
     prevChild.unmount();

     // Record that we need to remove the node
     operationQueue.push({type: 'REMOVE', node});
    }

    // Point the list of rendered children to the updated version.
    this.renderedChildren = nextRenderedChildren;

    // ...

// Process the operation queue.
  while (operationQueue.length > 0) {
    var operation = operationQueue.shift();
    switch (operation.type) {
    case 'ADD':
      this.node.appendChild(operation.node);
      break;
    case 'REPLACE':
      this.node.replaceChild(operation.nextNode, operation.prevNode);
      break;
    case 'REMOVE':
      this.node.removeChild(operation.node);
      break;
    }
  }
}
}

function mountTree(element, containerNode) {
  // Check for an existing tree
  if (containerNode.firstChild) {
    var prevNode = containerNode.firstChild;
    var prevRootComponent = prevNode._internalInstance;
    var prevElement = prevRootComponent.currentElement;

    // If we can, reuse the existing root component
    if (prevElement.type === element.type) {
      prevRootComponent.receive(element);
      return;
    }

    // Otherwise, unmount the existing tree
    unmountTree(containerNode);
  }

  // ...

}

var rootEl = document.getElementById('root');

mountTree(<App />, rootEl);
// Reuses the existing DOM:
mountTree(<App />, rootEl);

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

<div className="before" title="stuff" />

<div className="after" title="stuff" />

<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<li key={item.id}>{item.name}</li>

// Importing from the same folder:
var setInnerHTML = require('./setInnerHTML');

// Importing from a different folder:
var setInnerHTML = require('../utils/setInnerHTML');

// Importing from a deeply nested folder:
var setInnerHTML = require('../client/utils/setInnerHTML');

/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule setInnerHTML
 */

var warning = require('warning');

warning(
  2 + 2 === 4,
  'Math is not working today.'
);

var warning = require('warning');
var didWarnAboutMath = false;
if(!didWarnAboutMath) {
  warning(
    2 + 2 === 4,
    'Math is not working today'
  );
  didWarnAbout = true;
}

var invariant = require('invariant');
invariant(
  2 + 2 === 4,
  'You shall not pass!'
);

if (__DEV__) {
  // This code will only run in development.
}

/**
  * Updates this component by updating the text content.
  *
  * @param {ReactText} nextText The next text content
  * @param {ReactReconcileTransaction} transaction
  * @internal
  */
receiveComponent: function(nextText, transaction) {
  // ...
},

ReactRef.detachRefs = function(
  instance: ReactInstance,
  element: ReactElement | string | number | null | false,
): void {
  // ...
}

// Constructor
function ReactDOMComponent(element) {
  this._currentElement = element;
}

// Methods
ReactDOMComponent.Mixin = {
  mountComponent: function() {
    // ...
  }
};

// Put methods on the prototype
Object.assign(
  ReactDOMComponent.prototype,
  ReactDOMComponent.Mixin
);

module.exports = ReactDOMComponent;

class ReactDOMComponent {
  constructor(element) {
    this._currentElement = element;
  }

  mountComponent() {
    // ...
  }
}

module.exports = ReactDOMComponent;

// Dynamically injected
var textComponentClass = null;

// Relies on dynamically injected value
function createInstanceForText(text) {
  return new textComponentClass(text);
}

var ReactHostComponent = {
  createInstanceForText,

  // Provides an opportunity for dynamic injection
  injection: {
    injectTextComponentClass: function(componentClass) {
      textComponentClass = componentClass;
    },
  },
};

module.exports = ReactHostComponent;

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

return{
	todos: nextTodos,
	visibleTodoFilter: nextVisibleTodoFilter
}

//thunk action creator
//使用方式和同步cation一样	dispatch(fetchPosts('xxx'))
export function fetchPosts(xxx) {
	//Thunk middleware知道如可处理函数
	//这里把dispatch方法通过参数的形式传给函数，以此来让它自己也能dispatch action

	return function(dispatch) {

		dispatch(action);

		//执行api请求使用isomorphic-fetch库替代XMLHttpRequest
	}

}

//**index.js代码**
import thunkMiddleware from 'react-thunk';
import createLogger from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';

const createStoreWithMiddleware = applyMiddleware(
	thunkMiddleware,	//允许我们dispatch()函数
	createLogger
)(createStore);

const reducers = combineReducers({
	//拆分的单个reducer函数
})

const store = createStoreWithMiddleware(reducers);

//**action.js代码**
export function fetchPosts(xxx) {
	return (dispatch) => {
		//...
		dispatch(action)
	}
}

export function fetchPostsIfNeeder(xxx) {
	//可接收getState()方法
	return (fetch, getState) => {

	}

}

function makeActionCreator(type, ...argNames) {
	return function(...args) {
		let action = { type };
		argNames.forEach(arg, index) {
			action[argNames[index]] = args[index];
		}
		return action;
	}
}

const ADD_TODO = 'ADD_TODO';
const EDIT_TODO = 'EDIT_TODO'
const REMOVE_TODO = 'REMOVE_TODO';

export const addTodo = makeActionCreator(ADD_TODO, 'todo');
export const editTodo = makeActionCreator(EDIT_TODO, 'id', 'todo');
export const removeTodo = makeActionCreator(REMOVE_TODO, 'id');

export function loadPostsSuccess(userId, response) {
  return {
    type: 'LOAD_POSTS_SUCCESS',
    userId,
    response
  };
}

export function loadPostsFailure(userId, error) {
  return {
    type: 'LOAD_POSTS_FAILURE',
    userId,
    error
  };
}

export function loadPostsRequest(userId) {
  return {
    type: 'LOAD_POSTS_REQUEST',
    userId
  };
}

import { Component } from 'react';
import { connect } from 'react-redux';
import { loadPostsRequest, loadPostsSuccess, loadPostsFailure } from './actionCreators';

class Posts extends Component {
  loadData(userId) {
    // 调用 React Redux `connect()` 注入 props ：
    let { dispatch, posts } = this.props;

    if (posts[userId]) {
      // 这里是被缓存的数据！啥也不做。
      return;
    }

    // Reducer 可以通过设置 `isFetching` 反应这个 action
    // 因此让我们显示一个 Spinner 控件。
    dispatch(loadPostsRequest(userId));

    // Reducer 可以通过填写 `users` 反应这些 actions
    fetch(`http://myapi.com/users/${userId}/posts`).then(
      response => dispatch(loadPostsSuccess(userId, response)),
      error => dispatch(loadPostsFailure(userId, error))
    );
  }

  componentDidMount() {
    this.loadData(this.props.userId);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.userId !== this.props.userId) {
      this.loadData(nextProps.userId);
    }
  }

  render() {
    if (this.props.isLoading) {
      return <p>Loading...</p>;
    }

    let posts = this.props.posts.map(post =>
      <Post post={post} key={post.id} />
    );

    return <div>{posts}</div>;
  }
}

export default connect(state => ({
  posts: state.posts
}))(Posts);

export function loadPosts(userId) {
  // 用 thunk 中间件解释：
  return function (dispatch, getState) {
    let { posts } = getState();
    if (posts[userId]) {
      // 这里是数据缓存！啥也不做。
      return;
    }

    dispatch({
      type: 'LOAD_POSTS_REQUEST',
      userId
    });

    // 异步分发原味 action
    fetch(`http://myapi.com/users/${userId}/posts`).then(
      response => dispatch({
        type: 'LOAD_POSTS_SUCCESS',
        userId,
        respone
      }),
      error => dispatch({
        type: 'LOAD_POSTS_FAILURE',
        userId,
        error
      })
    );
  }
}

import { Component } from 'react';
import { connect } from 'react-redux';
import { loadPosts } from './actionCreators';

class Posts extends Component {
  componentDidMount() {
    this.props.dispatch(loadPosts(this.props.userId));
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.userId !== this.props.userId) {
      this.props.dispatch(loadPosts(nextProps.userId));
    }
  }

  render() {
    if (this.props.isLoading) {
      return <p>Loading...</p>;
    }

    let posts = this.props.posts.map(post =>
      <Post post={post} key={post.id} />
    );

    return <div>{posts}</div>;
  }
}

export default connect(state => ({
  posts: state.posts
}))(Posts);

import { createSelector } from 'reselect';
import { VisibilityFilters } from './actions';

function selectTodos(todos, filter) {
  switch (filter) {
  case VisibilityFilters.SHOW_ALL:
    return todos;
  case VisibilityFilters.SHOW_COMPLETED:
    return todos.filter(todo => todo.completed);
  case VisibilityFilters.SHOW_ACTIVE:
    return todos.filter(todo => !todo.completed);
  }
}

const visibilityFilterSelector = (state) => state.visibilityFilter;
const todosSelector = (state) => state.todos;

export const visibleTodosSelector = createSelector(
  [visibilityFilterSelector, todosSelector],
  (visibilityFilter, todos) => {
    return {
      visibleTodos: selectTodos(todos, visibilityFilter),
      visibilityFilter
    };
  }
);

const keywordSelector = (state) => state.keyword

const keywordFilterSelector = createSelector(
  [ visibleTodosSelector, keywordSelector ],
  (visibleTodos, keyword) => visibleTodos.filter(
    todo => todo.indexOf(keyword) > -1
  )
)

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { addTodo, completeTodo, setVisibilityFilter } from '../actions'
import AddTodo from '../components/AddTodo'
import TodoList from '../components/TodoList'
import Footer from '../components/Footer'
import { visibleTodosSelector } from '../selectors/todoSelectors'

class App extends Component {
  render() {
    // Injected by connect() call:
    const { dispatch, visibleTodos, visibilityFilter } = this.props
    return (
      <div>
        <AddTodo
          onAddClick={text =>
            dispatch(addTodo(text))
          } />
        <TodoList
          todos={this.props.visibleTodos}
          onTodoClick={index =>
            dispatch(completeTodo(index))
          } />
        <Footer
          filter={visibilityFilter}
          onFilterChange={nextFilter =>
            dispatch(setVisibilityFilter(nextFilter))
          } />
      </div>
    )
  }
}

App.propTypes = {
  visibleTodos: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  })),
  visibilityFilter: PropTypes.oneOf([
    'SHOW_ALL',
    'SHOW_COMPLETED',
    'SHOW_ACTIVE'
  ]).isRequired
}

// 把 selector 传递给连接的组件
export default connect(visibleTodosSelector)(App)

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

export function removeTodo(id) {
	return {
		type: 'REMOVE_TODO',
		id
	}
}

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as TodoActionCreators from './TodoActionCreators';

class TodoListContainer extends React.Component {

	componentDidMount() {
		//由react-redux注入
		let { dispatch } = this.props;

		let action = TodoActionCreators.addTodo('Use Redux');
		dispatch(action);
	}

	render() {

		let { todos, dispatch } = this.props;

		//应用bindActionCreator
		let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch);

		return (
			<TodoList todos={todos}
				{...boundActionCreators}
			/>
		);

		//一种可以替换bindActionCreators的做法是直接把dispatch函数和action creators当作props传递给组件
		//return <TodoList todos={todos} dispatch={dispatch} />
	}
}

export default connect(state => ({todos: state.todos}))(TodoListContainer);