第十一周-React

使用前端框架的原因

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

React vs. Vue

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

文档

React
Vue

起步

React：creact-react-app
Vue：Vue CLI

React 基础、原理

React 数据流

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

Flux架构

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

扩展阅读

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)。