成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React使用總結(jié)

LoftySoul / 485人閱讀

摘要：當(dāng)使用對(duì)象時(shí)，在生命周期中運(yùn)行，此時(shí)環(huán)境下已經(jīng)完成了。并不會(huì)隨著的更新而改變，因此在使用時(shí)一定要注意是否有。但是使用會(huì)跳過的過程，會(huì)觸發(fā)子組件的所有方法包括從而造成性能的浪費(fèi)。因此為了組件更加清晰高效，應(yīng)該避免使用。我推薦使用來管理。

兩種架構(gòu)

現(xiàn)在使用React的開發(fā)模式主要有兩種——freeMarker+React以及純靜態(tài)React頁(yè)面開發(fā)。本文著重介紹純靜態(tài)React頁(yè)面的開發(fā)方式。

freeMarker+React

由于以前是用YUI+freeMarker進(jìn)行開發(fā)，為了保證以前的頁(yè)面都能夠正常訪問，當(dāng)重構(gòu)老頁(yè)面時(shí)會(huì)使用這種開發(fā)方式。
在這種開發(fā)模式下由java利用freeMarker生成并Render為html，通過browserify將js打包至資源目錄并在browser中加載，React將app render至div中。

React純靜態(tài)頁(yè)面

利用browserify使用同構(gòu)的方式進(jìn)行開發(fā)，直接產(chǎn)出html以及js文件放置到資源文件中通過文件路徑訪問頁(yè)面。采用這種方式開發(fā)有以下優(yōu)點(diǎn)：

PreRender產(chǎn)出的靜態(tài)資源文件加載速度快

前后端只通過ajax進(jìn)行交互，使得前后端分離，各自約定好接口之后就能進(jìn)行開發(fā)。

同構(gòu)的開發(fā)模式使得功能模塊可以復(fù)用，比如模板、node的一些常用模塊等等。

需要注意代碼能同時(shí)在browser與node環(huán)境下執(zhí)行，否則會(huì)出問題。當(dāng)使用bom對(duì)象時(shí)，在componentDidMount生命周期中運(yùn)行，此時(shí)node環(huán)境下已經(jīng)完成了first render。

構(gòu)建方式

在node環(huán)境下通過React.renderToString方法生成html，通過這種方式生成的標(biāo)簽會(huì)帶有data-reactid屬性，儲(chǔ)存server render結(jié)果的校驗(yàn)值。
當(dāng)在browser中React.render時(shí)會(huì)檢查校驗(yàn)值是否一致，保證node以及browser環(huán)境下render的結(jié)果一致。因此開發(fā)過程中一定要保證render的結(jié)果保持一致，如果需要在browser中插入dom節(jié)點(diǎn)，可以使用insert等操作。禁止state以及props在兩個(gè)環(huán)境下值不同。
如果通過校驗(yàn)，則React不會(huì)重新生成dom，只將事件監(jiān)聽器掛載在對(duì)應(yīng)的節(jié)點(diǎn)下。

應(yīng)用架構(gòu)

采用flux的思想來組織應(yīng)用，具體的方案我推薦facebook的flux或者reflux，這也是現(xiàn)在Github中獲星最多的flux實(shí)現(xiàn)方案。兩者的主要區(qū)別是reflux不通過Dispatcher來控制action的分發(fā)，reflux中使用了較多的magic來使得代碼更加簡(jiǎn)潔高效。

如果項(xiàng)目的復(fù)雜程度不高（沒有多個(gè)互相關(guān)聯(lián)的store），我推薦使用Reflux，一般情況下其實(shí)一個(gè)store就夠了，而且避免了處理store之間的通信問題。

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

若項(xiàng)目較為龐大，考慮到代碼的可控性、直觀，以及更好地去控制各store之間的響應(yīng)邏輯，使用flux更合適。

優(yōu)點(diǎn)

采用flux來構(gòu)建應(yīng)用有以下優(yōu)勢(shì)：

將state在store中統(tǒng)一進(jìn)行管理，實(shí)現(xiàn)業(yè)務(wù)與組建的分離，代碼結(jié)構(gòu)更加清晰。

由于action在store中進(jìn)行監(jiān)聽，因此事件不需要再一層層通過props來進(jìn)行傳遞，簡(jiǎn)化代碼，而且也更容易將應(yīng)用拆分成更細(xì)粒度的模塊。

盡量使用props的情況下，代碼可預(yù)測(cè)性很強(qiáng)。

組件開發(fā)

react認(rèn)為組件就是一個(gè)狀態(tài)集，盡可能使得組件只擁有props。

當(dāng)組件需要有自己的處理邏輯時(shí)需要用到state,比如控制input的value，彈出層自動(dòng)隱藏、顯示的邏輯等等。

state并不會(huì)隨著porps的更新而改變，因此在使用 state 時(shí)一定要注意是否有 componentWillReceiveProps。

業(yè)務(wù)代碼為了方便以及速度可以不寫 PropTypes，但是可復(fù)用的組件使用 PropTypes 來保證組件的正常運(yùn)行是必要的，組件中的工具方法可以抽取出來寫測(cè)試用例。

setState

state為key-value的集合，一般來說value都是基本類型，當(dāng)state的數(shù)據(jù)結(jié)構(gòu)層次很深的時(shí)候，操作state就會(huì)變成很頭疼的事情。

深拷貝

// shallow copy
var state = deepCopy(this.state);
state.valueWantChange = vale;
this.setState(state);

深拷貝方法沒有問題，但由于deepCopy效率很低，一般都不推薦使用。

forceUpdate

this.state.valueWantChange = vale;
this.forceUpdate(); // this.setState(this.state);

在以下兩種情況會(huì)用到 forceUpdate

手動(dòng)更改了 state 之后需要觸發(fā) render

做了除更改props和state之外的操作后，需要render。

但是使用forceUpdate 會(huì)跳過 shouldComponentUpdate 的過程，會(huì)觸發(fā)子組件的所有l(wèi)ifeCycle方法（包括shouldComponentUpdate）從而造成性能的浪費(fèi)。因此為了組件更加清晰高效，應(yīng)該避免使用forceUpdate。

Immutability Helpers

我推薦使用React.addons來管理state。
You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven"t changed.

import react from "react/addons"
var newData = React.addons.update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});
this.setState(newData);

下面是update的基本語(yǔ)法。如果用過mongo應(yīng)該對(duì)此十分熟悉。

{$push: array} push() all the items in array on the target.

{$unshift: array} unshift() all the items in array on the target.

{$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item.

{$set: any} replace the target entirely.

{$merge: object} merge the keys of object with the target.

{$apply: function} passes in the current value to the function and updates it with the new returned value.

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85806.html

相關(guān)文章

  • 從一次重寫原生方法遇到的坑，總結(jié)一下Web中的事件系統(tǒng)

    摘要：?jiǎn)栴}初探索刪掉那一點(diǎn)重寫的代碼后，表現(xiàn)符合預(yù)期了。每一次都重新造一個(gè)虛擬的，然后監(jiān)聽其自定義事件，并且立即觸發(fā)這個(gè)自定義事件。真的不要隨便重寫原生方法。。。于是，我全面總結(jié)一下了中的事件系統(tǒng)，也算是對(duì)基礎(chǔ)的鞏固。 寫在前面 前段時(shí)間，我寫過一篇文章前端開發(fā)中的Error以及異常捕獲。 在文章中，我提到了這個(gè)問題： showImg(https://segmentfault.com/img...

    oysun 評(píng)論0 收藏0

  • todo-list 項(xiàng)目問題總結(jié)（使用 react 進(jìn)行開發(fā)）

    摘要：項(xiàng)目問題總結(jié)這個(gè)項(xiàng)目，很簡(jiǎn)單，前端使用，后端使用進(jìn)行開發(fā)。方便移動(dòng)端開發(fā)。當(dāng)動(dòng)畫結(jié)束后，有一個(gè)鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。 todo-list 項(xiàng)目問題總結(jié) 這個(gè) todo-list 項(xiàng)目，很簡(jiǎn)單，前端使用 react，后端 nodejs 使用 koa2 進(jìn)行開發(fā)。數(shù)據(jù)庫(kù)使用 Mysql...

    shengguo 評(píng)論0 收藏0

  • 兩年React老兵的總結(jié) - 類型檢查篇

    摘要：系列引言最近準(zhǔn)備培訓(xùn)新人為了方便新人較快入手開發(fā)并編寫高質(zhì)量的組件代碼我根據(jù)自己的實(shí)踐經(jīng)驗(yàn)對(duì)組件設(shè)計(jì)的相關(guān)實(shí)踐和規(guī)范整理了一些文檔將部分章節(jié)分享了出來由于經(jīng)驗(yàn)有限文章可能會(huì)有某些錯(cuò)誤希望大家指出互相交流由于篇幅太長(zhǎng)所以拆分為幾篇文章主要有以 系列引言 最近準(zhǔn)備培訓(xùn)新人, 為了方便新人較快入手 React 開發(fā)并編寫高質(zhì)量的組件代碼, 我根據(jù)自己的實(shí)踐經(jīng)驗(yàn)對(duì)React 組件設(shè)計(jì)的相關(guān)實(shí)踐...

    scola666 評(píng)論0 收藏0

  • react使用總結(jié)

    最近學(xué)了一些 react 和es6 的一些知識(shí)，并且使用 react 寫了一個(gè) TodoList 項(xiàng)目===>預(yù)覽 && 源碼 感覺學(xué)的挺多的，并且遇到的坑也不少?，說實(shí)話，一開始學(xué) react 看到 jsx 語(yǔ)法有點(diǎn)不適應(yīng)，說好的結(jié)構(gòu)和行為分離呢?，不過隨著通過一個(gè)項(xiàng)目的完成，漸漸明白了這么寫的好處 好處 自定義標(biāo)簽 結(jié)構(gòu)清晰 代碼模塊化 更加語(yǔ)義化 不過也有缺點(diǎn) 瀏覽器不支持這語(yǔ)法 必須...

    liaosilzu2007 評(píng)論0 收藏0

  • React同構(gòu)直出優(yōu)化總結(jié)

    摘要：同構(gòu)的關(guān)鍵要素完善的屬性及生命周期與客戶端的時(shí)機(jī)是同構(gòu)的關(guān)鍵。的一致性在前后端渲染相同的，將輸出一致的結(jié)構(gòu)。以上便是在同構(gòu)服務(wù)端渲染的提供的基礎(chǔ)條件。可以將封裝至的中，在服務(wù)端上生成隨機(jī)數(shù)并傳入到這個(gè)中，從而保證隨機(jī)數(shù)在客戶端和服務(wù)端一致。 原文地址 React 的實(shí)踐從去年在 PC QQ家校群開始，由于 PC 上的網(wǎng)絡(luò)及環(huán)境都相當(dāng)好，所以在使用時(shí)可謂一帆風(fēng)順，偶爾遇到點(diǎn)小磕絆，也能夠...

    alaege 評(píng)論0 收藏0

  • React Fiber源碼分析 第四篇（歸納總結(jié)）

    摘要：為什么網(wǎng)頁(yè)性能會(huì)變高要回答這個(gè)問題，需要回頭看是單線程的知識(shí)點(diǎn)。在分析的過程中，發(fā)現(xiàn)了的源碼中使用了很多鏈?zhǔn)浇Y(jié)構(gòu)，回調(diào)鏈，任務(wù)鏈等，這個(gè)主要是為了增刪時(shí)性能比較高 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇（同步模式） React Fiber源碼分析 第三篇（異步狀態(tài)） React Fiber源碼分析 第四篇（歸納總結(jié)） 前言 Rea...

    jsdt 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LoftySoul

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<