国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Why React？

JayChen / 1282人閱讀

摘要：觀察者模式，一次創(chuàng)建多條通信鏈路，每條鏈路工作時與其他鏈路發(fā)生干擾。在目前系統(tǒng)中，只存在兄弟通信和父子通信，不存在跨樹通信，即孩子不能跟叔叔直接通信。模擬操作的方式，歸根到底是把手動測試過程用腳本記錄下來。

作者：BrianLi （部門同事李老師，口頭授權(quán)發(fā)布內(nèi)部react布道資料）

無法用語言準確表達思維時，就用公式；一個不行，那就兩個

—— 李老師

本文假設(shè)讀者已了解react的基本概念，并有少量react開發(fā)實踐。如果沒有，請先閱讀
http://www.ruanyifeng.com/blog/2015/03/react.html

當前我們?nèi)绾伍_發(fā)業(yè)務(wù)？ 

備注：微信不支持公式，所以我這邊截圖。  
補充一下f表示一次用m生成v的渲染方法  
g是界面發(fā)生交互時，對m做修改的方法
當前業(yè)務(wù)模塊之間如何通信？

回調(diào)模式：callback

觀察者模式：on / fire (addEventListener / removeEventListener)

偽總線模式：fcContextChange

三種模式?jīng)]有本質(zhì)區(qū)別：

回調(diào)模式，一次創(chuàng)建一條通信鏈路，此鏈路工作時不與其他鏈路發(fā)生干擾。

觀察者模式，一次創(chuàng)建多條通信鏈路，每條鏈路工作時與其他鏈路發(fā)生干擾。

偽總線模式，是一種特殊的觀察者模式，信息的發(fā)出者是一個固定的模塊。

在目前系統(tǒng)中，只存在兄弟通信和父子通信，不存在跨樹通信，即孩子不能跟叔叔直接通信。如果要跟叔叔通信，必須借助祖先中轉(zhuǎn)。

現(xiàn)在開始簡化模型：

假設(shè)系統(tǒng)中模塊之間的鏈路能雙向通信，這樣可以將有向鏈路換成無向鏈路；

假設(shè)任意兩個模塊之間都可以存在鏈路，但只允許存在一條鏈路，這樣之前不同的鏈路類型下降成單條鏈路的一個參數(shù)，并且將祖先中轉(zhuǎn)縮短成直接通信；

把系統(tǒng)中的模塊看作頂點，模塊間通信鏈路看作邊，則系統(tǒng)變成了無向圖。

這是模型簡化后的鏈路數(shù)量，而目前我們系統(tǒng)中的鏈路數(shù)比這多得多，因為我們允許節(jié)點間有多條鏈路，而且鏈路是單向通信的。

我們開發(fā)業(yè)務(wù)時很大一部分工作量就是創(chuàng)建各種通信鏈路，隨著系統(tǒng)復(fù)雜性不斷增加，圖越來越復(fù)雜，代碼邏輯就沒人能看懂了，因為數(shù)據(jù)在系統(tǒng)中的流動是沒有規(guī)律的。

React基本原則2：在React中，數(shù)據(jù)流是單向的。數(shù)據(jù)總是自頂而下流動，內(nèi)部不允許出現(xiàn)反向數(shù)據(jù)流。React簡化通信的方法相當粗暴，既然管理不好通信，那么干脆禁止通信。

如何用React滿足我們的通信需求？React的做法是：

把整個應(yīng)用抽象成一個數(shù)據(jù)集;

每個子模塊使用數(shù)據(jù)集的一部分做渲染，涉及渲染的數(shù)據(jù)通過props向下傳遞；

每個子模塊都可以直接修改最頂層的數(shù)據(jù)集。

現(xiàn)在，系統(tǒng)中通信鏈路條數(shù)變成了n，系統(tǒng)復(fù)雜度完全在我們掌控之中。當然這樣做也是有弊端的，所有數(shù)據(jù)放在一個model中，這個model必然很龐大，維護起來需要一定技巧，相應(yīng)地出現(xiàn)了flux和redux等框架專門用于管理model，目前我們沒有引入，準備使用ER.model，加強命名規(guī)范，來臨時解決這一問題。

最關(guān)鍵，上圖綠色鏈路的創(chuàng)建過程是半自動化的，只需要把修改model的回調(diào)函數(shù)mode.dispatch通過props一層層傳遞下去。當然，綠色鏈路的創(chuàng)建可以利用react.context做成全自動，但react官方對context的使用有疑慮，并且API在將來可能會修改，所以暫時沒有引入。

Note


Context is an advanced and experimental feature. The API is likely to change in future releases.


Most applications will never need to use context. Especially if you are just getting started with React, you likely do not want to use context. Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application.


If you have to use context, use it sparingly.


Regardless of whether you"re building an application or a library, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it"s easier to upgrade when the API changes.
當前我們?nèi)绾螠y試ui和業(yè)務(wù)模塊？

答案是測試基本靠手。怎么測試交互？目前有基于web driver的OneUX SDK方案。這個方案用腳本模仿了鼠標鍵盤操作，允許我們實現(xiàn)自動化測試。
但問題不在這里，而是工作量的問題。模擬操作的方式，歸根到底是QA把手動測試過程用腳本記錄下來。如果測試一次性通過，手動測試和寫腳本的工作量是一致的。

在React中，自動化測試變得非常簡單。還記得React基本原則1么？props + state是渲染界面view的唯一依據(jù)。因此，用戶在頁面的交互行為，最終都轉(zhuǎn)化成props或state的變化。

個人博客

http://tangguangyao.github.io/

微信公眾號

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78863.html

相關(guān)文章

  • React學(xué)習(xí)筆記—Why React?

    摘要：官方說法注本人英語二十六級是和用來創(chuàng)建用戶界面的庫。很多人將認為是中的。怎么說呢現(xiàn)在的自己就是個跟風(fēng)狗啊，什么流行先學(xué)習(xí)了再說，再看看能不能應(yīng)用在具體項目上。暫時先停下的學(xué)習(xí)，坐等。不過學(xué)習(xí)的腳步還是跟不上潮流的發(fā)展速度啊。 Why React? 官方說法 注：本人英語二十六級 React是Facebook和Instagram用來創(chuàng)建用戶界面的JavaScript庫。很多...

    余學(xué)文 評論0 收藏0

  • React性能探索 --- 避免不必要渲染

    摘要：如何修復(fù)既然是不需要渲染，那就要阻止它的渲染。我個人覺得，在實際中，用跟兩個工具已經(jīng)可以很好幫我們判斷哪部分不需要重新渲染，幫助我們做出優(yōu)化。 背景 上一篇文章的結(jié)尾http://imweb.io/topic/5985cc4...我們說到，也許，不是所有的節(jié)點都需要重新渲染，對于那些不需要渲染的節(jié)點，我們?nèi)绾握业剿鼈儾⒆鰞?yōu)化呢？ 本篇文章來具體解答這個問題。 應(yīng)用分析 首先，先看這個應(yīng)...

    missonce 評論0 收藏0

  • react+mobx 構(gòu)建H5制作工具項目經(jīng)驗總結(jié)

    摘要：三性能優(yōu)化處理做工具類的項目，性能是非常大的挑戰(zhàn)，我總結(jié)了以下幾個常見的性能優(yōu)化點數(shù)據(jù)緩存。防抖，節(jié)流，事件委托內(nèi)存釋放。 內(nèi)容大綱： 1、功能介紹 2、技術(shù)架構(gòu) 3、性能優(yōu)化 4、細節(jié)分享 5、開源說明 一、項目功能介紹 很久沒寫過技術(shù)類的文章了，這次給大家分享一個近期的項目，采用react+mobx+jquery構(gòu)建的大型工具類項目。查看項目網(wǎng)址。 如果用過易企秀，maka或者...

    用戶84 評論0 收藏0

  • react+mobx 構(gòu)建H5制作工具項目經(jīng)驗總結(jié)

    摘要：三性能優(yōu)化處理做工具類的項目，性能是非常大的挑戰(zhàn)，我總結(jié)了以下幾個常見的性能優(yōu)化點數(shù)據(jù)緩存。防抖，節(jié)流，事件委托內(nèi)存釋放。 內(nèi)容大綱： 1、功能介紹 2、技術(shù)架構(gòu) 3、性能優(yōu)化 4、細節(jié)分享 5、開源說明 一、項目功能介紹 很久沒寫過技術(shù)類的文章了，這次給大家分享一個近期的項目，采用react+mobx+jquery構(gòu)建的大型工具類項目。查看項目網(wǎng)址。 如果用過易企秀，maka或者...

    Aceyclee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<