React 和 reactmvc

[ustccjw]

React 和 reactmvc

React

React 是一个用于构建前端界面的 Javascript 库。可以从下面三个方面来描述 React,

Just the UI

1. 只提供前端的 view 层的解决方案。这保证了 React 的普适性和可优化性：对于简单的前端页面，可以使用 React 来构建页面；对于 web app，可以使用 React 作为 view 层方案，其他层可以自由选择。
2. 声明式的描述 view。这对于前端来说很自然，html, css 都是声明式的，DOM API 是命令式的。描述性的构建 view 的好处是状态的可预测性，可以真正做到 UI = f(state) 的目的。
3. 组件化。组件是 React 的基石，组件化是前端发展的趋势，在各种组件化的方案中，React 对组件化支持的最好。

Virtual DOM

1. 抽象化。Virtual DOM 是对 DOM 的抽象，在 Virtual DOM 的基础上又有了服务端渲染、React-native、react-canvas 这样的方案。
2. 不可变性。不可变性是实现声明式构建 view 的基础。DOM API 是命令式的，具有可变性，Virtual DOM 提供了一套声明式的语法，并且不提供直接操作 DOM 的命令接口，这样保证了 view 的不可变性。
3. DOM diff。DOM diff 是 Virtual DOM 底层基于 DOM 构建 view 的性能优化。

React may target the underlying browser’s Box Tree, the Graphics Layer, WebGL, and also mobile platforms like Android’s View system or iOS’s UIKit. Sebastian made it clear DOM diffing is just a necessary hack for the time being.

Data Flow

1. 单向数据流。React 并不关心数据流，单向数据流是 Facebook 官方推荐 React 应用的数据流方案。
2. Flux，Redux。Flux，Redux 都是单向数据流的具体实现方案。

Flux

Flux 架构

Flux vs Redux

1. Flux 有多个 store, Redux 遵循单个 store。
2. Flux 使用事件回调的方式实现 store 更新，Redux 使用函数组合来实现 store 更新
   
   

存在的问题

1. 数据管理复杂。造成数据层复杂的主要原因就是服务端数据和本地 UI 数据的混淆。
2. 数据更新麻烦。往往需要在 action 中发起更新数据请求，然后在 store 中更改数据。
3. 首次渲染数据为空。React 是同步渲染的，服务端数据异步获取的，渲染时需要各种判断数据是否不为空。
4. 组件无法实现 stateless。数据获取一般在 componentWillMount，使得组件无法实现 stateless。

reactmvc

一个用于 React app 的 MVC 解决方案

Traditional MVC

MVC in frontend

Model, Controller, View

1. Model: 分为 dataModel 和 uiModel，基于 Immutable-js。dataModel 实现服务端数据接口的抽象，提供存取、缓存、清空接口；uiModel 是本地 UI 数据的抽象。提供本地 UI 数据的存取操作。基于 Immutable-js 保证 model 的安全。
2. Controller: React-router，根据 router 获取需要渲染的组件，并且从 Model 中提取组件需要的数据（服务端数据和本地 UI 数据），然后返回需要渲染的组件以及需要的 props 数据。
3. View: React Component(stateless component)

目标

1. 分离服务端数据和本地 UI 数据。对服务端数据接口进行抽象才能真正实现服务端数据共享，而且可以让我们更专注于 UI。props = uiModel + dataModel.filter(uiModel)。
2. action 回归到本质：uiModel get/set, dataModel call/remove，数据获取更新只发生在渲染前。
3. 数据更新只需要清空对应数据缓存（dataModel.remove）。
4. 数据获取完全由 react-router 来管理，组件不需要关心数据获取，只需要关注描述渲染（stateless comonent）。

实现

1. async-props：配合 React-router 实现异步渲染，先异步获取组件所需数据，然后再渲染组件。
2. Model, HttpModel: 提供 dataModel 和 uiModel 的抽象类
3. wrapper: router component 的高阶组件，将组件渲染所需数据和 action 绑定到组件 props 上

项目地址：https://github.com/ustccjw/reactmvc