前端开发小结（持续更新）
2017-04-06
UI rendering 工具选择：模板(Template7, 以下简称T7) vs 组件(React)
T7 是包含在 Framework7 中的模板引擎，据称实现了类似 Handlebars 的语法。
尝试用 T7 写2层嵌套循环的 UI 渲染代码，结果发现，有些渲染逻辑还是不便实现。
T7 语法中有个好的地方是可以切换 context. 但是模板中似乎不能临时生成变量（在循环中，保存中间结果）。另外就是如果要调用自定义函数，则需要通过 registerHelper() 的方式提前申明。调用自定义帮助函数时，如何正确的传递参数并保证在切换的 context 下工作正常，也是个很费脑筋的事情。
这样显然在实现复杂的 UI 时，很容易卡壳。
这时想到在 UI 渲染方面，也许 React 是最强大的。想想纯 js 代码在 render 几乎没有什么限制。想输出什么样子就是什么样子，变量想怎么计算都可以。但纯手写 js 的问题在于字符串拼接方式的各种转义会非常烦人，也容易出错。因此 React 的 JSX 语法在完整保留了 js 语法的同时，可以利用不是字符串拼接的更高级的方式构建 virtual DOM， 自然是更好。
结论：选择 React.
那么又想到，React 最精华最有用的优势技术到底是什么？ 其实就是：
-
用 JSX 方式方便的构建 UI.
JSX 其实是 React 的语法糖。有人甚至尝试造一个 fake 的 React 来仅仅利用 JSX 语法构建 html. 详见链接。
-
Reactive （响应式）. 这个理解不太容易，主要特点是基于数据流，消息驱动的架构。这种编程模式在处理异步时，如果语言/框架自带 CPS 转换功能会比较好。
参考：
- https://www.zhihu.com/question/26079335
- 如何看待文章 WHY REACT/REDUX IS AN INFERIOR PARADIGM?
- https://link.zhihu.com/?target=http%3A//staltz.com/why-react-redux-is-an-inferior-paradigm.html
- ReactJS 真的好吗？
- 如何评价数据流管理架构 Redux?
React 啥时候状态需要在外部管理？为什么需要 Redux 这样的东西？
开始项目中尽管用，但是并没有真正理解为啥需要管理状态。直到，从0开始搭建轮子项目时才发现的。
比如，当我在一个 React 组件中发起一个 ajax call，并希望在调用返回时把拿到的数据直接用 setState 方式存在当前组件的 state 中。但是发现如果用回调的语法是不 work 的。
Why? 可能是因为异步调用返回时，context 已经不一样了。所以在回调的函数中拿不到指向这个 component 的 this 指针。这时自然就想到，在 component 外部放一个变量，用来保存这个值。
然后，在 ajax call 返回时写入这个值，同时触发一个外部的函数，重新对整个 component 调用一次 render 到页面 DOM 中去的操作。
这样就可以理解，实际上 React 中需要外部管理的状态，通常是异步执行返回时的状态。
原因是，异步调用返回时代码执行的上下文发生了变化。不这样做就无法正确更新 DOM.
如果不想用 Redux，可以用更简单的 Recompose.
它有 withState() 和 enhance() 函数可供用来创建一个可管理局部状态的闭包。
Redux 和 Recompose 相比，会发现用 Redux 写代码过于刻板了些，让人有点难受。其最大弊病就是，状态的管理和操作的相关代码，完全脱离了 UI，若遇到几个串接的异步调用的场景，业务逻辑会被拆到很多地方，导致难以开发和理解。
而 Recompose 则可以把一些组件的内部状态，或者临时状态，很方便的“就近”定义和使用，离业务场景更近，代码更容易理解。
React, Redux 的正确使用姿势（个人偏好）
- Store 最好按对应页面来模块化拆分，1对1. 不要用同一个 reducer 管理好几个页面的状态。
- action type 定义不要太过于装逼，写一堆没用的常数字符串，累得要死。尽量简短一点，直接字符串形式就行了，可以用些缩写。代码写起来要舒服很多。
- 处理异步调用工作流，最好用 ReduxSaga. （待尝试）。
- 不要片面强调用纯函数式 component. 用用 class 的也挺好，配合生命周期，加上组件自身 state 的使用，可以快速开发一些功能。在代码的可理解性等等方面，可能比无副作用的纯函数式组件 + Redux 管理状态，要容易理解的多！片面强调函数式组件，以及组件完全不管理自身状态，就会需要来回多用 dispatch 很多 action 去操作数据流，组件父子之间传数据以及调用变得极其麻烦。
React 的组件 (Component) 是什么作用？是为了复用吗？
实际做过才发现，组件在实际开发过程中复用的可能性极低，尤其是，跨项目复用更加不可能。组件基本上肯定不是为了复用而设计的。
组件实际上就是负责一个页面的 UI 片段的渲染，最多能处理其事件响应，仅此而已。撇去事件处理的功能，组件跟 html 模板差不多。
其他工具
RequireJS, Framework7.