第十一周-React

使用前端框架的原因

为了解决UI视图与数据同步的棘手操作
现代 js 框架存在的根本原因

React vs. Vue

Vue和React大比拼，你pick谁？
框架选型

文档

• React
• Vue

起步

• React：creact-react-app
• Vue：Vue CLI

React 基础、原理

1. Introducing JSX - React
2. Rendering Elements - React
3. Components and Props - React
4. State and Lifecycle - React
5. Handling Events - React
6. Conditional Rendering - React
7. 译 图解 React
8. React.js 的介绍 - 针对了解 jQuery 的工程师（译） - 杂七杂八的感想 - SegmentFault 思否
9. 深入浅出React（一）：React的设计哲学 - 简单之美
10. 前端已不止于前端－ReactJs初体验 · Issue #21 · kuitos/kuitos.github.io · GitHub
    React 生命周期

React 数据流

React父子组件之间的数据流动是单项的，触发UI的数据源太多，只依赖props传递，不好管理。所以出现了状态管理工具。

Flux架构

1. React 实践心得：react-redux 之 connect 方法详解 | Taobao FED | 淘宝前端团队
2. Redux Tutorial: Learn Redux from Dan Abramov on egghead
3. Redux状态管理之痛点、分析与改良 - kpaxqin - SegmentFault 思否
4. 图解 Flux
5. 使用redux的代码组织方式：可参考react-redux-realworld-example-app

扩展阅读

1. 现代 js 框架存在的根本原因 - 众成翻译
2. React 路由状态管理总结
3. Rematch: 重新设计 Redux
4. Redux从设计到源码
5. React 状态管理库: Mobx - 前端学习之路 - SegmentFault 思否
6. react+redux渲染性能优化原理 – 积木村の研究所

Mobx vs. Redux

Mobx 的优势来源于可变数据（Mutable Data）和可观察数据 (Observable Data) 。
Redux 的优势来源于不可变数据（Immutable data）。

可变数据，可以直接修改，所以操作起来非常简单。这使得使用 mobx 改变状态，变得十分简单。
不可变数据的优势在于，它可预测，可回溯。不可变数据不会随着时间的变化（程序的运行）而发生改变。在需要回溯的时候，直接获取保存的值即可。
Mobx 与 Redux 技术选型的本质，是在可变数据与不可变数据之间选择。具体业务场景的技术选型，还需要根据实际情况进行分析，脱离业务场景讨论技术选型是没有意义的。但我个人在状态管理的技术选型上，还是倾向于 Mobx 的。原因是前端与副作用打交道非常频繁，有 Http 请求的副作用，Dom 操作的副作用等等。使用不可变数据，还必须得使用中间件对副作用封装；在 Redux 中修改一次状态，需要经过 Action、Dispatch、Reducer 三个步骤，代码写起来太啰嗦；而前端的程序以中小型程序为主，纯函数带来的可预测性的收益，远不及其带的代码复杂度所需要付出的成本。而 Mobx 使用起来更加简单，更适合现在以业务驱动、快速迭代的开发节奏。

Mobx 与不可变数据的融合

不可变数据和可变数据，都是对状态的一种描述。那么有没有一种方案，能将一种状态，同时用可变数据和不可变数据来描述呢？这样就可以同时享有二者的优势了。

答案是肯定的，它就是 MST(mobx-state-tree)。