# Presentational and Container Components
react团队成员之一的Dan Abramov在medium上写过一篇文章 [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)，他在文中将组件分为两类，分别是`Presentational `和`Container`。`Presentational`是展示类组件，比如说*Page*,*Sidebar*,*Story*,*List*。`Container`组件是功能类组件，比如*UserPage*, *FollowersSidebar*, *StoryContainer*, *FollowedUserList*。

它们是React组件的两种设计模式，和组件本身是class component还是function component关系不大。

# Hooks 出现的动机
## 便于复用组件中的逻辑
组件中逻辑的复用，解决render props和hoc所做的事，抽离它们中的逻辑。hoc组件太多会导致标签结构混乱复杂，大多数情况下一个Container Component外面会包裹很多Presentational Component，通过Hooks，你可以从组件中抽离状态逻辑，让它们变得可以单独测试和重复使用，Hooks可以让你复用状态逻辑，而不用去变更组件的层级关系，这使得与其他组件共享Hooks变得容易，甚至可以编写社区共用的Hooks。

## 组件太复杂而变得难以理解
组件的生命周期中经常会混入很多不相关的逻辑，比如在`componentDidMount`和`componentDidUpdate`中会进行数据的请求，但是在`componentDidMount`中我们可能还会进行一些事件的监听，在`componentWillUnmount`中会清理这些事件，这就使得不相关逻辑的代码混在一起，而逻辑相关的代码会被拆分在两个方法里面，这会使得维护变得困难，大多数的组件不能再次拆分成更小的组件，因为逻辑遍布整个文件。很多人会选择引入一个单独的状态管理工具，但是这又将会引入一大部分抽象，并且将在各个文件中切换。

## JavaScript中的class使得学习React变得困难
为了使用class取编写组件需要编写很多无意义的代码，class组件中需要去考虑this问题，在React的开发人员中，关于class组件和function组件的讨论也存在着巨大的分歧。而且对于Prepack这种提前优化工具，class变得不那么容易去优化，React团队希望能够提供一种方式，让这些逻辑代码变得可以优化。React团队建议在设计组件的时候能够向function组件靠拢，Hooks提供了能够在function组件中去编写生命周期时的逻辑，而不需要去理解复杂的响应原理。

> 目前React团队没有将class组件移除的计划

# React Hooks简单使用
React Hooks是React提交的一系列函数，他们提供在function组件中hook state和生命周期的特性，它们不能在class组件中被使用。

## State Hook
例子：
``` jsx
import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

useState就是一个React Hooks，这个方法接收一个值，并返回一个数组，通过JavaScript的[Array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)特性，可以将返回的值赋给变量。
useState会返回两个值，第一个是state，第二个是更新该state的方法，类似`setState`。
一个function组件中可以使用多次`useState`
``` jsx
function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}
```

## Effect Hook
例子:
``` jsx
import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```
React团队提出了一种叫“side effects”的操作，比如fetch data、subscriptions、或者手动去变更DOM，因为它们会影响其他组件，并且在渲染中无法进行。`useEffect` hook类似于类组件中`componentDidMount`、`componentDidUpdate`、`componentWillUnmount`的统一。上面的例子中将会在Effect中去改变title的值。
在使用`useEffect`时，只需要告诉React在更新DOM之后需要进行的“effect”，通常运行这些“effect”会在渲染之后（包括第一次渲染）。
`useEffect`可以通过返回一个函数来进行清理操作，这些操作会在组件unmounts时运行，或者因为后续渲染重新运行“effect”之前。下面的例子在effect中subscribe好友的状态，并且通过返回一个函数unsubscribe状态。
``` jsx
import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
```
跟`useState`一样，在function组件中也可以多次使用`useEffect`
``` jsx
function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...
```
这样可以很方便的根据逻辑代码去组织逻辑，而不是通过生命周期去组织代码。

## Hooks的使用规则
Hooks是JavaScript函数，但是在使用它们时需要强制遵循两条规则规则
* 调用Hooks必须在顶层函数，不能在循环、条件和嵌套函数中调用
* 调用Hooks必须在function组件中，不能在传统的JavaScript方法中调用(也可以在自己定义的Hooks中调用)
React团队提供了相关的eslint插件，可以在eslint中检查上面的规则。[linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)

## 自定义Hook
有时我们想在不同的组件中执行相同的逻辑，比如上面的subscribe好友状态，下面的例子中抽离了相关的逻辑，定义了一个`useFriendStatus`的方法
``` jsx
import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}
```
它接收一个friendID作为参数，并且返回好友在线的状态，现在可以在两个组件中使用它
``` jsx
function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
```
``` jsx
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
```
这些组件的状态是完全独立的，钩子是重用有状态逻辑的一种方式，而不是状态本身。事实上，每次调用Hook都有一个完全隔离的状态，所以你甚至可以在一个组件中使用相同的自定义Hook两次。
如果一个函数需要以`use`开头，在React中回叫它自定义Hooks，在lint工具中，这会是一个检查的条件。

## 其他Hook
有一些Hook不经常会用到，但是很有用，比如`useContext`，它可以让你subscribe React context
``` javascript
function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}
```
`useReducer`可以让你在复杂的组件中使用Reducer的方式管理state
``` javascript
function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...
```
更多的Hook可以阅读React提供的API文档 [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)

# 引用
1. *[Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)*

快速了解React-Hooks

在React Native中创建一个动画有多种方式。
1. 使用`react-native`包的`Animated`组件创建动画
2. 使用`react-native`包的`LayoutAnimation`创建布局动画
3. 使用Web API标准的`requestAnimationFrame`控制动画

以上是目前常用的几种在React Native中创建动画的方式，Animated动画可以进行nativeDriver加速，但是如果属性不支持，将会使用`requestAnimationFrame`实现计算。LayoutAnimation控制粒度不及Animated细。

本文主要来说说Animated.Value及Animated.ValueXY



# 使用Animated创建一个动画
先通过使用Animated创建一个动画回顾一下React Native中Animated的使用。
``` javascript
class AnimatedPlayground extends Component {
  state = {
    size: new Animated.Value(50) // 动画属性初始值
  }
  componentDidMount () {
    Animated.timing(this.state.size, {
      toValue: 200 // 下一阶段值
    }).start() // 开始动画
  }
  render () {
    return (
      <Animated.View style={{
        backgroundColor: '#000',
        width: this.state.size, // 将动画值赋给元素
        height: this.state.size
      }}/>
    )
  }
}

```

使用Animated做动画需要注意几个地方
1. 元素需要变化的属性值必须用`Animated.Value`或者`Animated.ValueXY`初始化。
2. 需要进行动画的元素需要转换成`Animated`的组件，Animated提供了`Animated.View`、`Animated.Text`、`Animated.Image`和`Animated.ScrollView` ，其他组件通过`Animated.createAnimatedComponent()`方法处理后即可使用Animated.Value值作为属性
3. 调用Animated的方法创建一个动画对象常用的方法有`Animated.decay`、`Animated.timing`、`Animated.spring`等
4. 调用第三步生成对象的`start()`方法即可触发动画

# Animated.timing()方法
在Animated创建动画的方法中，timing是最简单易懂的一个，这里看一下timing方法内部都做了什么。

> 注意：文中的源码基于`0.55.4`版本的react-native源码

``` javascript
// react-native/Libraries/Animated/src/AnimatedImplementation.js#181

const timing = function(
  value: AnimatedValue | AnimatedValueXY,
  config: TimingAnimationConfig,
): CompositeAnimation {
  const start = function(
    animatedValue: AnimatedValue | AnimatedValueXY,
    configuration: TimingAnimationConfig,
    callback?: ?EndCallback,
  ): void {
    callback = _combineCallbacks(callback, configuration);
    const singleValue: any = animatedValue;
    const singleConfig: any = configuration;
    singleValue.stopTracking();
    if (configuration.toValue instanceof AnimatedNode) {
      singleValue.track(
        new AnimatedTracking(
          singleValue,
          configuration.toValue,
          TimingAnimation,
          singleConfig,
          callback,
        ),
      );
    } else {
      singleValue.animate(new TimingAnimation(singleConfig), callback);
    }
  };

  return (
    maybeVectorAnim(value, config, timing) || {
      start: function(callback?: ?EndCallback): void {
        start(value, config, callback);
      },

      stop: function(): void {
        value.stopAnimation();
      },

      reset: function(): void {
        value.resetAnimation();
      },

      _startNativeLoop: function(iterations?: number): void {
        const singleConfig = {...config, iterations};
        start(value, singleConfig);
      },

      _isUsingNativeDriver: function(): boolean {
        return config.useNativeDriver || false;
      },
    }
  );
};
```

timing方法会返回一个对象，在返回前会尝试使用`maybeVectorAnim`进行坐标值的准换，如果值不是坐标值，将会返回一个对象。在上面的例子中，对timing返回的对象调用`start()`方法会开始动画，所以start方法是触发动画的关键。跟随代码可以找到最后会调用Animated.Value的`animate`方法。

``` javascript
// react-native/Libraries/Animated/src/nodes/AnimatedValue.js#278

animate(animation: Animation, callback: ?EndCallback): void {
  let handle = null;
  if (animation.__isInteraction) {
    handle = InteractionManager.createInteractionHandle();
  }
  const previousAnimation = this._animation;
  this._animation && this._animation.stop();
  this._animation = animation;
  animation.start(
    this._value,
    value => {
      // Natively driven animations will never call into that callback, therefore we can always
      // pass flush = true to allow the updated value to propagate to native with setNativeProps
      this._updateValue(value, true /* flush */);
    },
    result => {
      this._animation = null;
      if (handle !== null) {
        InteractionManager.clearInteractionHandle(handle);
      }
      callback && callback(result);
    },
    previousAnimation,
    this,
  );
}
```

这个方法通过调用传入的`animation.start`方法处理值更改，当值update时调用自身的`_updateValue`最后会调用到`_flush`，这个方法是一个关键方法，阅读以下它的实现

``` javascript
// react-native/Libraries/Animated/src/nodes/AnimatedValue.js#51

function _flush(rootNode: AnimatedValue): void {
  const animatedStyles = new Set();
  function findAnimatedStyles(node) {
    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
     * error found when Flow v0.68 was deployed. To see the error delete this
     * comment and run Flow. */
    if (typeof node.update === 'function') {
      animatedStyles.add(node);
    } else {
      node.__getChildren().forEach(findAnimatedStyles);
    }
  }
  findAnimatedStyles(rootNode);
  /* $FlowFixMe */
  animatedStyles.forEach(animatedStyle => animatedStyle.update());
}
```

它会遍历所有子节点，找出带有update方法的节点，并调用他们的update方法。好了，Animated.Value的代码阅读展示到这里，接下来看看`createAnimatedComponent`这个方法主要做了什么。

# createAnimatedComponent 高阶组件

打开它的源码可以看到它是一个高阶组件，它返回的组件中有一个`_propsAnimated`的变量，在`UNSAFE_componentWillMount`中调用`_attachProps`进行初始化，传入了props和一个函数`_animatedPropsCallback`，这个传入函数的作用是通过`setNativeProps`更新最终的Component。来看一下`AnimatedProps`的实现

``` javascript
// react-native/Libraries/Animated/src/nodes/AnimatedProps.js

class AnimatedProps extends AnimatedNode {
	...
	__attach(): void {
    for (const key in this._props) {
      const value = this._props[key];
      if (value instanceof AnimatedNode) {
        value.__addChild(this);
      }
    }
  }
  ...
  update(): void {
    this._callback();
  }
}
```

里面的`update`方法将会调用传入的回调，回到上面说的`_flush`方法，可以大概知道了Animated的原理了。但是这里还有一个问题就是什么时候将Value和组件关联起来的，就是为什么`_flush`能找到AnimatedProps的update方法。
上面代码中我贴出了`__attach`方法，改方法会在初始化的时候调用，最终会把this传入`value.__addChild`，这里的value就是通过props传入的Animated.Value。在`_flush`中会调用`node.__getChildren().forEach(findAnimatedStyles);`，它将会返回在前面添加的Child。

到这里就能理解在React Native的Animated动画实现流程了。

文章只是简单分析了一下部分源码，并没有完全分析，源码中还有很多优化及功能代码，比如detach、事件通知等。

React Native的Animated动画原理浅谈

贝塞尔曲线就是可以通过控制点来完成对线条的扭曲，在平面中，已知两个点的最短距离为直线，在这两个点的基础上引入一个控制点来控制直线的弯曲。

本文远行环境为HTML5中的Canvas，使用的方法来自`CanvasRenderingContext2D`。

通过两个点可以绘制一条直线
<iframe width="100%" height="300" src="//jsfiddle.net/moonou/bscd5bhd/1/embedded/js,html,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

但是如果要绘制一条曲线的话，就要使用它提供的绘制贝塞尔曲线接口`bezierCurveTo`（三次贝塞尔曲线）或`quadraticCurveTo`（二次贝塞尔曲线）。
# 关于贝塞尔曲线

在数学的数值分析领域中，贝济埃曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝济埃曲线就称作贝济埃曲面，其中贝济埃三角是一种特殊的实例。

## 二次贝塞尔曲线
引入一个控制点生成的曲线叫二次贝塞尔曲线，在上面的例子中有两个点`P0(0,0) P1(200,200)`，接下来我们引入点`P2(0, 200)`作为控制点，
相应的改变方法为`quadraticCurveTo `。
<iframe width="100%" height="500" src="//jsfiddle.net/moonou/bscd5bhd/4/embedded/js,html,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

可以看到直线发生了弯曲。

## 三次贝塞尔曲线
接下来再引入一个点`P3(150,150)`，将方法改为`bezierCurveTo`
<iframe width="100%" height="500" src="//jsfiddle.net/moonou/bscd5bhd/5/embedded/js,html,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

可以看到曲线再次发生了变化。

# 平滑曲线
很多场景下，需要在给定若干个点中绘制一条线，使这条线穿过给出的点，但是如果直接穿过的话线条会很生硬，那么需要一种处理方式，结合上面的贝塞尔曲线知识，可以让直线变成曲线。但是这样会存在一个问题，就是如何去确定贝塞尔曲线的控制点，才能够让曲线变得平滑。这是百度文库的一篇文章[贝塞尔曲线控制点确定的方法_百度文库](https://wenku.baidu.com/view/c790f8d46bec0975f565e211.html)，里面介绍了如何得到控制点，使得曲线平滑。

![C1773972-488E-432B-87AF-CB06F5706050](//odujw1uur.qnssl.com/C1773972-488E-432B-87AF-CB06F5706050.png)

![AAC6A0D3-AB5A-415D-981C-8026E71D48D9](//odujw1uur.qnssl.com/AAC6A0D3-AB5A-415D-981C-8026E71D48D9.png)

这是两个控制点的计算公式，A和B分别对应两个点。但是需要注意的是起始点和结束点的控制点无法通过上面的公式推导。这两个点的坐标需要通过下面的公式进行计算。

![D6C7E690-33B9-4292-8492-C28EB7BD9B17](//odujw1uur.qnssl.com/D6C7E690-33B9-4292-8492-C28EB7BD9B17.png)

![5B7407F6-2820-4FD3-B4BF-A572D44DAFAC](http://odujw1uur.qnssl.com/5B7407F6-2820-4FD3-B4BF-A572D44DAFAC.png)

其中B 0点和A n-1点依然根据上面的公式求得。
根据公式实现了如下算法
<iframe width="100%" height="700" src="//jsfiddle.net/moonou/bscd5bhd/6/embedded/js,html,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

可以得到一条平滑的曲线，当然这类算法还有很多，可以Google相关文章。

# 参考
[基于canvas使用贝塞尔曲线平滑拟合折线段 · Issue #31 · Aaaaaaaty/blog · GitHub](https://github.com/Aaaaaaaty/Blog/issues/31)
[贝塞尔曲线控制点确定的方法_百度文库](https://wenku.baidu.com/view/c790f8d46bec0975f565e211.html)

绘制曲线笔记

# 前言
在前端开发发展的趋势中，已经越来越偏向于webapp模式，前端更像是app，但是现在的JavaScript语言中，没有原生的包的概念，这和JavaScript的历史有很大原因，由于Google开源的v8引擎以及NodeJS开源项目的成功，使得现在JavaScript的应用场景越来越多，但是原生不支持模块系统的问题一直存在，社区和Ecma提供了很多的解决方案，本文介绍其中一些比较知名的规范，如CommonJS、AMD等......



# 规范简介

## CommonJS

[CommonJS](http://www.commonjs.org/) 规范规定通过`require`方法加载包，通过`exports`来导出，NodeJS就是使用CommonJS规范来管理包
``` javascript
// a.js
const value = {
  num: 0,
  name: 'a.js'
}

module.exports = value

//b.js
const a = require('./a.js')

console.log(a.num) // 0
console.log(a.name) // a.js
```

## AMD

AMD全称Asynchromous module Definition，它的应用场景主要在前端文件加载上，它规定通过`define`方法声明包，通过`require`方法加载包，如果包有其他依赖需要在`define`方法中传入

``` javascript
define('a', ['b'], function (b) {
  return {
    name: 'module a',
    dependencies: 'module b'
  }
})

require('a'， function (a) {
  
  console.log(a.name) // module a 
  console.log(a.dependencies) // module b    
  
})
```

## CMD
CMD全称Common Module Definition，和AMD类似，并与CommonJS保持兼容
``` javascript
define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})
```

## UMD

UMD官方的[Github](https://github.com/umdjs/umd)是这样介绍的

>The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

UMD作为CommonJS和AMD规范的兼容
``` javascript
(function (window, cb){
  
  // 检查exports对象是否存在
  if (typeof exports === 'object') {
    exports = cb()
  } else if ( typeof define === 'function' && define.amd ) {
    define(cb)
  } else {
    window.eventUtil = cb()
  }

})(this, function(){
  // 模块逻辑代码
})
```

## ES6

EcmaScript6中添加了JavaScript的元素模块规范，通过`import`来引入模块，`export`导出模块

``` javascript
// a.js
export const a = {
  name: 'value "a" in a.js'
}

// b.js
import * as a from './a.js'

console.log(a.a.name) // value "a" in a.js
```

# 参考文章

[关于 CommonJS AMD CMD UMD](https://my.oschina.net/felumanman/blog/263330?p=1)

[webpack中文文档-模块系统](http://webpackdoc.com/module-system.html)

JavaScript中的模块系统

# 什么是React？

![React](//odujw1uur.qnssl.com/React.png)

当今的前端正处于技术爆发期，这个阶段涌现很多优秀的编程思想以及框架，本文所介绍的react就是
前端的一种框架，它使用单向数据绑定以及jsx语法糖，通过它提供的特性，可以构建去区别于以前传统
型的网页。

# 什么是Redux？

![redux](//odujw1uur.qnssl.com/redux.png)


单页模式区别于传统模式开发，比如用户的登录状态、数据列表的缓存，传统类型的MVC设计模式中，后端语言（Java、PHP......）中，浏览器发起url请求，后端根据请求的路径和参数，后端对数据进行处理（从数据库中拿出数据、请求第三方接口等......），然后进行页面数据填充后返回完整的HTML数据，浏览器拿到这些html元素后进行页面渲染。

单页应用模式的区别在于请求进行接口化，开发过Android或者iOS的应该知道，客户端处理数据状态，操作UI控件，与后端进行网络通信获取数据通信。单页应用的开发就是基于这种模式，那么处理数据状态的任务就落到前端的头上来了，react提供视图渲染的优化，但是数据的状态管理就成了一个问题，比如用户的数据，交由那个组件去控制，怎么进行交互，这就成了一个问题。Facebook提出了Flux设计模型来解决这个问题，用store来存放数据源，通过action、reducer来操作数据，来保证数据的单一性。

但是Facebook只是提出了这一种设计思想，没有开发相应的框架，于是就诞生了很多第三方实现，Redux就是其中一种，它不是完全采用Flux规范模式，它提出了自己的设计思想，Redux也就成了和React搭配的优秀的状态工具。

# 项目生成

代码生成工具使用Yeoman，Yeoman是一个代码generators工具，它提供很多第三方generators，通过它，我们可以很方便的构建一个初始化项目，[点击访问Yeoman](http://yeoman.io/)

项目使用react+redux构建，所以这里选择`generator-redux-stack`来作为生成模板。终端下使用如下命令：
``` shell
#安装yeoman
npm install yo -g 

#安装generators
npm install -g generator-redux-stack

#创建目录并进入
mkdir [xxx] && cd [xxx]

#使用yo创建项目框架
yo redux-stack
```
执行完成后会看到下图
![yo](//odujw1uur.qnssl.com/yo.png)

填写相应的项目描述信息，Yeoman会自动创建文件，并且安装依赖

![npm](//odujw1uur.qnssl.com/npm.png)

如果网络较慢可以`Ctrl+C`停止安装，使用cnpm国内镜像安装(#滑稽)。

![cnpm](//odujw1uur.qnssl.com/cnpm.png)

稍等一会出现如下界面就说明完成了

![finash](//odujw1uur.qnssl.com/finash.png)

在终端输入
``` shell
npm start
```
浏览器端打开`http://localhost:3000`可以看到生成器提供的模板

![web](//odujw1uur.qnssl.com/web.png)

好了，接下来就可以开始编码了。：）

# 目录介绍

![file](//odujw1uur.qnssl.com/file.png)

> 目录结构由`redux-stack`控制

| 目录名 | 描述 |
| ----- | :--- |
|build|项目主html文件存放位置|
|dist|项目编译目录位置|
|node_modules|npm包存放位置|
|server|项目运行时服务器环境|
|src|项目源码目录，代码主要存放位置|
| ----actions|redux action存放目录|
| ----components|react组件存放目录|
| ----config|react-router主要配置文件|
| ----container|react页面(组件拼贴)存放位置|
| ----reducers|redux reducer存放位置|
| ----store|redux store定义存放位置|
| ----style|样式文件存放位置|
| ----utils|开发调试工具配置|
|test|测试脚本存放目录|

# 编写代码

## 编写jsx页面

在`container`目录新创建一个`Home.js`文件
``` jsx
// src/containers/Home.js
import React, { Component } from 'react';

export default class Home extends Component {
  render () {
    return (
      <div>
        这是主页
      </div>
    )
  }
}
```
这里创建了一个组件，组件渲染了一个`div`标签，里面是一行文字。`render`使用了jsx的语法糖。

## 编写路由
修改`config`目录下面的`routes.js`文件，需要引入Home组件，并且将其挂载到根节点。
``` jsx
// src/config/routes.js
import Home from '../containers/Home.js';

export default (
  <Route path="/" component={Home} />
);
```
刷新路由器可以看到页面的更改

## 编写action

在`src/actioins`目录下面创建`one.js`文件，这里面将会定义数据操作类型与一些actions方法。
``` javascript
// actions/one.js
import 'whatwg-fetch';
export const UPDATE_ONE = 'update_one';

export function update(_data) {
  return {
    type: UPDATE_ONE,
    data: _data
  };
}

export function getone() {
  return dispatch => {
    fetch('http://v3.wufazhuce.com:8000/api/hp/bymonth/2016-09')
      .then((response) => {
        console.log(response)
      })
  };
}
```
这里我们需要安装`fetch`来进行异步网络请求，当然你也可以使用其他网络请求工具。通过以下命令安装`fetch`
``` sh
npm install whatwg-fetch --save
```
>接口使用[WeexOne](https://github.com/dodola/WeexOne )项目里面的接口
## 编写reducer
`redux-stack`这个生成器自动帮我们做好了reducer到store的绑定，所以我们只需要将注意力放在reducer中就可以了。

在`src/reducers`目录下新建`one.js`文件，这里我们将放置一些常用的数据操作。

``` javascript
// reducers/one.js
import { createReducer } from 'redux-create-reducer';
import { UPDATE_ONE } from '../actions/one';

const initialState = {};

export default createReducer(initialState, {
  [UPDATE_ONE](state, data) {
    return data.data;
  }
});
```
并在`reducers/index.js`文件中注册store
``` javascript
// reducersindex.js
......
import one from './one';

const rootReducer = combineReducers({
  ......
  one,
  ......
});

export default rootReducer;
```

## 绑定store和actions到组件
这里我们需要修改开始创建的`Home.js`组件。

``` jsx
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as OneActions from '../actions/one';

class Home extends Component {
  componentWillMount() {
    this.props.getone() //发起action操作
  }
  render() {
    return (
      <div>
        这是主页
      </div>
    )
  }
}

/* 映射store中的state到组件中 */
function mapStateToProps(state) {
  return {
    one: state.one
  };
}

/* 映射actions到组件中，并且注入dispatch方法 */
function mapDispatchToProps(dispatch) {
  return bindActionCreators(OneActions, dispatch);
}

/* 修改组件导出方式，导出调用connect方法生成后的新组件*/
export default connect(mapStateToProps, mapDispatchToProps)(Home);
```
这里注入的state与actions都可以通过`this.props`访问到。这时打开浏览器可以看到我们在`one action`中的`getone`方法打印出的异步请求数据
![response](//odujw1uur.qnssl.com/response.png)
## 将异步数据写入到state
修改`actions`当中的`one.js`，在拿到数据后dispatch到reducer处理
``` javascript
// actions/one.js
import 'whatwg-fetch';
export const UPDATE_ONE = 'update_one';

export function update(_data) {
  return {
    type: UPDATE_ONE,
    data: _data
  };
}

export function getone() {
  return dispatch => {
    fetch('http://v3.wufazhuce.com:8000/api/hp/bymonth/2016-09').then((response) => {
        console.log(response)
        return response.json()
      }).then((data) => {
        /** 返回的json格式为
        {
          res: 0,
          data: [...]
        }
        */
        dispatch(update(data.data[0]))
      })
  };
}
```
由于`fetch`库提供`Promise`的支持，所以可以使用then结构。

在redux开发工具中我们可以看到如下显示

![reduxtool](//odujw1uur.qnssl.com/reduxtool.png)

在末尾处可以看到`state`中的one已经有数据了，接下来我们将数据绑定到界面组件。

## 绑定store中的state数据到react组件
回到还是创建的`Home.js`组件中，我们将需要的数据绑定到界面中
``` jsx
......
  render() {
    const { one } = this.props
    return (
      <div>
        <h2>{one.hp_content}</h2>
        <hr/>
        <p>{one.hp_author}</p>
        <img src={one.hp_img_url}></img>
      </div>
    )
  }
......
```
这是浏览器里面的页面已经有数据了

![perview](//odujw1uur.qnssl.com/perview.png)

经过一些简单的css样式调整得到的效果如下

![one](//odujw1uur.qnssl.com/one.png)

# 结语

这篇文章讲述了react搭配redux的基础用法，关于`react-router`的部分本文没有详细讲解，但是react-router的难度也不大，上手也很快。如果需要使用`webpack ensure`按需加载，需要将组建导出格式换成`CommonJS`规范导出
``` jsx
module.exports = React.createClass({
  render() {
    <div>示例页面</div>
  }
})
```
详细可以参考[react-router示例程序](https://github.com/ReactTraining/react-router/tree/master/examples/auth-with-shared-root)

快速了解React-Hooks

React Native的Animated动画原理浅谈

绘制曲线笔记

JavaScript中的模块系统

使用react+redux搭建one单页应用