对组件 State 的方案的一些想法

#1

React 出来到现在, 数据层的方案一直在调整, 前面 Flux 出来一大波, 现在又 Redux.
另外 FRP 那边的方案也时不时侵袭 React 社区, 整个感觉就是乱战.

有一点似乎确定下来了, 就是界面操作都转化为 Actions, 然后 Store 自动根据它更新.
这里似乎有点问题, 就是 props 对的应数据是通过 Actions 处理的, 而 state 似乎错位改变?

state 给人的感觉很像是 MVVM 当中的 ViewModel, 很多数据直接对应界面的状态
这部分的数据简直可以用过双向绑定直接整合在 View 当中, 非常简单
然而现在最多用 LinkState 写法做双向绑定, 实际上远远不如 MVVM 方便.

而且从另一个思路, props 的操作都是 Actions, 在 Elm 里的叫法就是 Signal(随着时间改变的数据)
其实 state 也很像, 就是 initialState 随着用户不同的操作, 做出改变
奇怪的是 state 并没有看到有引入 Actions 的例子, 即便在 Flux 和 Redux 当中已经很明确

现状就是我们目前的用户操作, 都还是写一个 handler 函数,
一方面不如 MVVM 方便, 一方面不像是 props 处理 actions 的方案那么明确
从 React 正式发布到现在一年多时间, 其他地方改了好多, state 几乎从未改进

所以我觉得关于 State 是缺乏足够多的考虑的…

1 Like
#2

react 目前还没到1.0，
目前还没具体关注它的roadmap，
不知道react对于未来的规划是什么样的，
后续可能需要关注下，
这样才能跟进未来的方向

#3

State存在的意义感觉越来越小？

#4

我这里是：组件非props的状态才用state表示

#5

用过很长时间的angularjs和vue，双向绑定有利有弊，事实上，尤雨溪也很纠结，在Vue某个版本里是去除了双向绑定，但是后来很多人提issue，又加回去了。React的这种单向数据流的方式我认为是经过深思熟虑的，改变parent的值需要明确的调用，减少了很多错误操作state而造成的问题。

#6

当然, 仔细考虑的话, 虽然 MVC 将数据存储为 Model, 但是界面状态的数据缺失不适合存放 Model
ViewModel 类似的一个局部状态还是需要的, React 里的 State 也是很重要的.

#7

他居然去掉过双向绑定, 去掉还叫 MVVM 吗 - -!

#8

请教题老师，以TodoMVC中的 Filter为例，使用redux的时候：
如果组件管理好自身的state改变，改变页面，不必通过action-reducer-dispatch走，那就没法行为记录回放后退。
如果通过action-reducer走，在store中专门一块字段来管理filterState，那自身的state似乎没必要，但这个组件就不方便复用。
怎么处理比较好呢。

#9

其实我也没办法的… 私有的 state 继续用 state 就好了, actions-recorder 目标是对 store 进行重演.

#10

那个应该是去掉父组件和子组件的双向数据流吧？

#11

回过头来再看下题叶的文章，写下我的理解

model -> 映射 application state
view model -> 映射 application state + computed variables + ui state

我们 model 都放在后端。这个 abstraction 层可以去除。
前端的 store 里就混合了 application state + ui state + computed variables，甚至对于计算，一般也是后台计算好了过来，前端专注做 UI，组件
{...applicationState, ui }

LinkState 解决的是表单页面中，类似 input onChange 修改 state 的重复代码。自己写一个简单的 onChange.bind(this, key) 也可行。本质不是双向绑定，而是 helper method。这样，onChange 我也从改变 state 变成改变全局 state，组件 stateless。现在看来 0.14 也有 stateless component。

Elm 没有看过，但是 Signal 估计就是 RX 中的 stream （或者叫做 Observables）。这个是 reactive 的，和flux 中 action是 positive 的不同。