検索

看了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
<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:ウェブ上のユーザーエクスペリエンスをどのように強化するかH5:ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解:HTML5の基礎H5コードの理解:HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード:Web開発者向けのベストプラクティスH5コード:Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5:Web標準とテクノロジーの進化H5:Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。