看我们3天 hackday 都干了些什么
source link: https://blog.oyanglul.us/javascript/react-transdux-the-clojure-approach-of-flux
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Rationale
鉴于大部分 React 初学者都困惑的问题，我在浓缩 React 煮书中也讲过
如果两个 Component 不是父子关系或者兄弟或者伯父侄女，该如何交互
我当时的回答是
如果两个 Component 不是父子关系或者兄弟或者伯父侄女，他们真的需要交互吗？
所以毫无框架的解决方案就是找到两个 component 的共同父元素，一层一层回调上去，在一层一层 props 传导 另一个 component。
好吧，如果 component 树的层次太多，那么写 callback 就会跟这个图上忍亲戚一样晕，而且一旦中间谁在往了传这个 callback 就会挂掉。
于是，对于复杂 component 交互的情景，facebook 提供了 flux 架构设计（当然也实现了https://github.com/facebook/flux）
图2 flux 架构
这个图估计大家被各种 facebook 的 jsconf 洗过脑了，单向的数据流，中间加了一大堆东西
- action：要干什么
- dispatcher：到哪里去
- store：变什么/如何变
基本思想就是把一个 component 想干的事情弄成 action，dispatcher 会为不同的 action 调用不用的 store 中的 reducer，store 真正管理着 component 的状态。 把引起状态变化的每一部都分解出来。恩，大型项目一定要这么分解才算大型，没有什么问题。
原文思想如下，facebook 的表达能力我也是给跪了:
All data flows through the dispatcher as a central hub. Actions most often originate from user interactions with the views, and action creators are nothing more than a call into the dispatcher. The dispatcher then invokes the callbacks that the stores have registered with it, effectively dispatching the data payload contained in the actions to all stores. Within their registered callbacks, stores determine which actions they are interested in, and respond accordingly. The stores then emit a "change" event to alert the controller-views that a change to the data layer has occurred. Controller-views listen for these events and retrieve data from the stores in an event handler. The controller-views call their own render() method via setState() or forceUpdate(), updating themselves and all of their children.
思想是不错，但是看看例子，这个dispacher 是怎么个回事
AppDispatcher.register(function(action) {
var text;
switch(action.actionType) {
case TodoConstants.TODO_CREATE:
text = action.text.trim();
if (text !== '') {
create(text);
TodoStore.emitChange();
}
break;
case TodoConstants.TODO_TOGGLE_COMPLETE_ALL:
if (TodoStore.areAllComplete()) {
updateAll({complete: false});
} else {
updateAll({complete: true});
}
TodoStore.emitChange();
break;
...
我一直以为 dispatcher 应该自动给我 dispatcher 才对，我自己都 dispatcher 完了还要 dispatcher 干什么？
redux
于是 redux 出来把 dispatcher 这一步去掉了，然后放到了 reducer 里：
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
然后就获得了一片好评
“Love what you’re doing with Redux” Jing Chen, creator of Flux
“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.” Bill Fisher, author of Flux documentation
“It's cool that you are inventing a better Flux by not doing Flux at all.” André Staltz, creator of Cycle
我竟无言以对…
Recommend
-
77
又是一年临近年底了，年底制定下了许多计划，正在一点一点实现，最近在开始读《你不知道的Javascript》了，也会慢慢把读书笔记通过博客的形式输出出来，让自己印象更深刻，今天就来聊聊JS中的var a = 2;这行代码发生了什么？ 编译 对于编程语言来说都会有
-
5
我们随手做的 git stash，究竟干了什么？软件开发话题下的优秀回答者git stash 是程序员的至宝。老板 biangbiang 甩来一个 case，说这个要下班之前 hot fix，咋办，s...
-
8
哲学家们都干了些什么-读书简记 2017年08月29日 最近读了这本哲学家们都干了些什么，作者以轻松幽默的风格讲述了两千多年的哲学史。一代代的哲学家们不断思考，争吵，寻找终极真理，对我...
-
4
Grofers Virtual Hackday 2020
-
5
连自己人都怒了，太平人寿干了什么 来源：深蓝财经 浏览：10037 2021-04-23 08:29:07 来源：深蓝财经近日，微博、抖音等互联网平台上一段太平人寿保险公司（以下简称“太平人寿”）黑龙江...
-
4
2019-12-18-哲学家们都干了些什么-笔记 – 龚成博客跳至内容 哲学家们都干了些什么 “中华民族是世界上最智慧的民族”这句话，我们没听过一千遍，也有一百遍了。但是...
-
6
网易游戏 520 发布会：除了做游戏，网易还干了什么？ 520 这天并非只能吃狗粮，打游戏也是不错的。 5 月 20 日作为一个新兴的表白节...
-
2
本文约 2070 字、3 张图表，需 4 分钟阅读...
-
5
JDK 从8升级到11，使用 G1 GC，HBase 性能下降近20%。JDK 到底干了什么？ 编者按：笔者在 HBase 业务场景中尝试将 JDK 从 8 升级到 11，使用 G1 GC 作为垃圾回收器，但是性能下降 20%。到底是什么导致了性能衰退？又该如何定位解决？本文介绍如...
-
2
new操作符具体都干了什么？(1) 首先创建了一个空对象。(2) 设置原型，将对象的原型设置为函数的prototype对象。(3) 让函数的this指向这个对象，执行构造函数中的代码(4) 判断函数的返回值类型，如果是值类型，则返...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK