比较redux和reflux以及自己写个TinyFlux?-H5教程-PHP中文網

首頁

web前端

H5教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 08:44 AM

reduxstoreview

看了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 http://www.w3ctech.com/topic/1561

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

理解H5：含義和意義May 11, 2025 am 12:19 AM

H5是HTML5，是HTML的第五個版本。 HTML5提升了網頁的表現力和交互性，引入了語義化標籤、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術的發展。

H5：可訪問性和網絡標準合規性May 10, 2025 am 12:21 AM

無障礙訪問和網絡標準遵循對網站至關重要。 1）無障礙訪問確保所有用戶都能平等訪問網站，2）網絡標準遵循提高網站的可訪問性和一致性，3）實現無障礙訪問需使用語義化HTML、鍵盤導航、顏色對比度和替代文本，4）遵循這些原則不僅是道德和法律要求，還能擴大用戶群體。

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

See all articles