tut about monoid and functor

Author: jcouyang

docs/src/main/tut/范特西.md

@@ -82,10 +82,68 @@ apply 到 View 上获得 React Component  一枚
 let Mult = XMult.apply(View)
 ```
 
-完整代码: https://www.webpackbin.com/bins/-KoGxSJ-3pOi4DicUvaq
+完整代码: <https://www.webpackbin.com/bins/-KoGxSJ-3pOi4DicUvaq>
 
 <iframe src="https://www.webpackbin.com/bins/-KoGxSJ-3pOi4DicUvaq" frameborder="0" width="100%" height="500"></iframe>
 
+## Functor
+
+想象一下以前构造出来的 ReactComponent,  一旦构造出来就不好修改或重用, 比如还是前面的例子, 你有一个 Mult 控件, 做的是乘法. 
+
+那么如果我需要一个新的控件, 而且控件的也需要 `a * b`,  但是不同的是, 我们新控件的公式是 `(a * b)^2`. 要是修改函数我们思路很清晰, 构造个新函数呗:
+```js
+function mmp(a, b) {
+  return mult(mult(a, b), mult(a, b))
+}
+```
+
+如果是 React, 那就构造个 HoC 把 Mult 控件套进去呗.
+
+但是不管是包函数还是包 React 控件, 都不是一个可持续组合的方式, 而且构造新的 React Class 又会需要很多啰嗦的模板代码, 如果你经常写 React 你知道我在说什么.
+
+Functor 可以免去这些复杂的过程, 而且提供了高可重用与组合的可能.
+
+接着 `XMult`, 我们很容易能将其变换成 `XMMP`
+
+```js
+let XMMP = XMult.map((s) => ({output: s.output * s.output}))
+```
+
+这样我们就轻松从 XMult 生成一个新的 FantasyX, 在之前的基础上平方一下.
+
+这就像操作数据一样简单 不是吗
+
+```js
+[1,2,3].map(x=>x*x)
+// [2,4,6]
+```
+
+完整代码: <https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB>
+
+<iframe src="https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB" frameborder="0" width="100%" height="500"></iframe>
+
+## Monoid
+
+有了变换, 我们可能还需要合并两个 FantasyX,  比如上面的 XMMP 和 XMult, 如果我需要一个同时能具有两种行为的 FantasyX
+
+```js
+let XCOMBINE = XMMP.concat(XMult)
+```
+
+仅此, 我们就得到了一个同时具有 XMMP 与 XMult 行为的 FantasyX
+
+当然, 因为他们都会修改 `state.output`,  合并到一起会导致冲突, 我们稍微修改下 XMMP
+
+```js
+let XMMP = XMult.map((s) => ({output2: s.output * s.output}))
+```
+
+这样 View 就可以把 XMMP 和 Mult 的输出都显示出来
+
+完整代码: <https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB>
+
+<iframe src="https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB" frameborder="0" width="100%" height="500"></iframe>
+
 ## Summary
 
  使用 FantasyX, 我们很简单将逻辑从 UI 中分离