简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

比较redux和reflux以及自己写个TinyFlux?

WBOY
Freigeben： 2016-06-07 08:44:18
Original
1890 Leute haben es durchsucht

看了redux和reflux，感觉redux好复杂啊，看reflux，1个小时就能弄懂，可是看redux，1天下来都迷迷糊糊的。

感觉flux不就应该是view层发消息给store，store根据消息去修改数据，修改完数据后通知涉及到被修改的view组建刷新state吗。。。

然后我看着reflux的使用方式（它的源代码没怎么看，感觉还是多了），自己写了个tinyFlux。。。二楼附上。。各位看看。。。。可能还太幼稚了。。。欢迎批评啊。。。

回复内容：

谢邀，Flux 相关的轮子已经太多了，实在看不过来，抱歉。

简单说说 Reflux 和 Redux 的区别吧。

之前我在 如何理解 Facebook 的 flux 应用架构？ - 知乎用户的回答 里提到过，目前市面上很多 Flux 相关的框架就是把 Dispatcher 隐藏了，然后封装了 Action Creator 和 Component 绑定的细节，简单地说就是「简化 Flux 里冗余的代码和操作」。

Reflux 在实现上面说到的内容的基础上，又提供了很多开发者喜欢的功能，比如 View 监听 Action 这种违背 Flux 概念但是确实在实际应用中很方便的特性。

而 Redux 并不仅仅是「简化 Flux」，它重新定义了 Flux 中每一个角色的功能、职责及实现方式。其中最大的不同是没有 Store 的概念（或者说 Store 不再需要用户去定义），而增加了 Reducer 的概念。Store 会通过我们定义的 Reducer 自动生成，使用 redux.createStore 方法。此外，Redux 定义了一个 middleware 机制，可以让我们在 Action 中更方便的处理业务逻辑。

总结一下就是，如果你觉得目前 Flux 用着不爽太多冗余代码， 那么你写的 TinyFlux 很不错，解决了你的很多问题；然而如果你想拥有更多 redux 带来的新特性，或者说你喜欢并推崇不可变的数据结构，或者说你想显得逼格比较高，那么看懂并会用 redux 绝对是你的不二选择。

PS. redux 确实不错，我们已经开始着手在生产环境中使用了。 Redux 核心概念 深入浅出Redux w3ctech.com/topic/1561 
<code class="language-js"><span class="c1">//TinyFlux.js</span>
<span class="kd">function</span> <span class="nx">createStore</span> <span class="p">(</span><span class="nx">store</span><span class="p">,</span> <span class="p">...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">store</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'请定义store'</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">store</span><span class="p">.</span><span class="nx">init</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">store</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">store</span><span class="p">.</span><span class="nx">actions</span> <span class="o">!==</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'actions应该是一个返回一个对象的function，对象里的方法都要用箭头表达式来书写，利用箭头表达式的this绑定。'</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="nx">store</span><span class="p">.</span><span class="nx">actions</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">actions</span><span class="p">();</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span> <span class="o">||</span> <span class="nx">store</span><span class="p">.</span><span class="nx">emit</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'不该存在subscriber和emit'</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="nx">store</span><span class="p">.</span><span class="nx">emit</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">argument</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">component</span> <span class="o">=></span> <span class="nx">component</span><span class="p">.</span><span class="nx">reload</span><span class="p">());</span>
  <span class="p">};</span>
  <span class="k">return</span> <span class="nx">store</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">connect</span> <span class="p">(</span><span class="nx">store</span><span class="p">,</span> <span class="nx">def</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">{</span>
      <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">def</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">try</span><span class="p">{</span>
            <span class="nx">state</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="s1">'store.'</span><span class="o">+</span><span class="nx">def</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
          <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
          <span class="p">}</span>
        <span class="p">};</span>
        <span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
      <span class="p">},</span>
      <span class="nx">reload</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">def</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">try</span><span class="p">{</span>
            <span class="nx">state</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="s1">'store.'</span><span class="o">+</span><span class="nx">def</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
          <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
          <span class="p">}</span>
        <span class="p">};</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span>
      <span class="p">},</span>
      <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
      <span class="p">},</span>
      <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">),</span><span class="mi">1</span><span class="p">);</span>
      <span class="p">}</span>
  <span class="p">};</span>
<span class="p">}</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">createStore</span><span class="o">:</span> <span class="nx">createStore</span><span class="p">,</span>
  <span class="nx">connect</span><span class="o">:</span> <span class="nx">connect</span>
<span class="p">}</span>
</code>
Nach dem Login kopieren
Verwandte Etiketten：
redux store view
Quelle：php.cn
Vorheriger Artikel：前端面试问“你会HTML5吗”到底是什么个意思？ Nächster Artikel：HTML 页面开头doctype应该大写还是小写？
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1774
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
1917
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1629
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1540
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1575
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！