資訊專欄INFORMATION COLUMN
摘要：當(dāng)使用對象時，在生命周期中運行，此時環(huán)境下已經(jīng)完成了。并不會隨著的更新而改變，因此在使用時一定要注意是否有。但是使用會跳過的過程，會觸發(fā)子組件的所有方法包括從而造成性能的浪費。因此為了組件更加清晰高效，應(yīng)該避免使用。我推薦使用來管理。
兩種架構(gòu)
現(xiàn)在使用React的開發(fā)模式主要有兩種——freeMarker+React以及純靜態(tài)React頁面開發(fā)。本文著重介紹純靜態(tài)React頁面的開發(fā)方式。
freeMarker+React由于以前是用YUI+freeMarker進行開發(fā)，為了保證以前的頁面都能夠正常訪問，當(dāng)重構(gòu)老頁面時會使用這種開發(fā)方式。
在這種開發(fā)模式下由java利用freeMarker生成并Render為html，通過browserify將js打包至資源目錄并在browser中加載，React將app render至div中。
利用browserify使用同構(gòu)的方式進行開發(fā)，直接產(chǎn)出html以及js文件放置到資源文件中通過文件路徑訪問頁面。采用這種方式開發(fā)有以下優(yōu)點：
PreRender產(chǎn)出的靜態(tài)資源文件加載速度快
前后端只通過ajax進行交互，使得前后端分離，各自約定好接口之后就能進行開發(fā)。
同構(gòu)的開發(fā)模式使得功能模塊可以復(fù)用，比如模板、node的一些常用模塊等等。
需要注意代碼能同時在browser與node環(huán)境下執(zhí)行，否則會出問題。當(dāng)使用bom對象時，在componentDidMount生命周期中運行，此時node環(huán)境下已經(jīng)完成了first render。
構(gòu)建方式在node環(huán)境下通過React.renderToString方法生成html，通過這種方式生成的標(biāo)簽會帶有data-reactid屬性，儲存server render結(jié)果的校驗值。
當(dāng)在browser中React.render時會檢查校驗值是否一致，保證node以及browser環(huán)境下render的結(jié)果一致。因此開發(fā)過程中一定要保證render的結(jié)果保持一致，如果需要在browser中插入dom節(jié)點，可以使用insert等操作。禁止state以及props在兩個環(huán)境下值不同。
如果通過校驗，則React不會重新生成dom，只將事件監(jiān)聽器掛載在對應(yīng)的節(jié)點下。
采用flux的思想來組織應(yīng)用，具體的方案我推薦facebook的flux或者reflux，這也是現(xiàn)在Github中獲星最多的flux實現(xiàn)方案。兩者的主要區(qū)別是reflux不通過Dispatcher來控制action的分發(fā)，reflux中使用了較多的magic來使得代碼更加簡潔高效。
如果項目的復(fù)雜程度不高（沒有多個互相關(guān)聯(lián)的store），我推薦使用Reflux，一般情況下其實一個store就夠了，而且避免了處理store之間的通信問題。
╔═════════╗ ╔════════╗ ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝ ╚════════╝ ╚═════════════════╝
^ │
└──────────────────────────────────────┘
若項目較為龐大，考慮到代碼的可控性、直觀，以及更好地去控制各store之間的響應(yīng)邏輯，使用flux更合適。
優(yōu)點采用flux來構(gòu)建應(yīng)用有以下優(yōu)勢：
將state在store中統(tǒng)一進行管理，實現(xiàn)業(yè)務(wù)與組建的分離，代碼結(jié)構(gòu)更加清晰。
由于action在store中進行監(jiān)聽，因此事件不需要再一層層通過props來進行傳遞，簡化代碼，而且也更容易將應(yīng)用拆分成更細(xì)粒度的模塊。
盡量使用props的情況下，代碼可預(yù)測性很強。
組件開發(fā)react認(rèn)為組件就是一個狀態(tài)集，盡可能使得組件只擁有props。
當(dāng)組件需要有自己的處理邏輯時需要用到state,比如控制input的value，彈出層自動隱藏、顯示的邏輯等等。
state并不會隨著porps的更新而改變，因此在使用 state 時一定要注意是否有 componentWillReceiveProps。
業(yè)務(wù)代碼為了方便以及速度可以不寫 PropTypes，但是可復(fù)用的組件使用 PropTypes 來保證組件的正常運行是必要的，組件中的工具方法可以抽取出來寫測試用例。
setStatestate為key-value的集合，一般來說value都是基本類型，當(dāng)state的數(shù)據(jù)結(jié)構(gòu)層次很深的時候，操作state就會變成很頭疼的事情。
深拷貝
// 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);
在以下兩種情況會用到 forceUpdate
手動更改了 state 之后需要觸發(fā) render
做了除更改props和state之外的操作后，需要render。
但是使用forceUpdate 會跳過 shouldComponentUpdate 的過程，會觸發(fā)子組件的所有l(wèi)ifeCycle方法（包括shouldComponentUpdate）從而造成性能的浪費。因此為了組件更加清晰高效，應(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的基本語法。如果用過mongo應(yīng)該對此十分熟悉。
{$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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85806.html
摘要：問題初探索刪掉那一點重寫的代碼后，表現(xiàn)符合預(yù)期了。每一次都重新造一個虛擬的，然后監(jiān)聽其自定義事件，并且立即觸發(fā)這個自定義事件。真的不要隨便重寫原生方法。。。于是，我全面總結(jié)一下了中的事件系統(tǒng)，也算是對基礎(chǔ)的鞏固。 寫在前面 前段時間，我寫過一篇文章前端開發(fā)中的Error以及異常捕獲。 在文章中，我提到了這個問題： showImg(https://segmentfault.com/img...
摘要：項目問題總結(jié)這個項目，很簡單，前端使用，后端使用進行開發(fā)。方便移動端開發(fā)。當(dāng)動畫結(jié)束后，有一個鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。 todo-list 項目問題總結(jié) 這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發(fā)。數(shù)據(jù)庫使用 Mysql...
摘要：系列引言最近準(zhǔn)備培訓(xùn)新人為了方便新人較快入手開發(fā)并編寫高質(zhì)量的組件代碼我根據(jù)自己的實踐經(jīng)驗對組件設(shè)計的相關(guān)實踐和規(guī)范整理了一些文檔將部分章節(jié)分享了出來由于經(jīng)驗有限文章可能會有某些錯誤希望大家指出互相交流由于篇幅太長所以拆分為幾篇文章主要有以 系列引言 最近準(zhǔn)備培訓(xùn)新人, 為了方便新人較快入手 React 開發(fā)并編寫高質(zhì)量的組件代碼, 我根據(jù)自己的實踐經(jīng)驗對React 組件設(shè)計的相關(guān)實踐...
最近學(xué)了一些 react 和es6 的一些知識，并且使用 react 寫了一個 TodoList 項目===>預(yù)覽 && 源碼 感覺學(xué)的挺多的，并且遇到的坑也不少?，說實話，一開始學(xué) react 看到 jsx 語法有點不適應(yīng)，說好的結(jié)構(gòu)和行為分離呢?，不過隨著通過一個項目的完成，漸漸明白了這么寫的好處 好處 自定義標(biāo)簽 結(jié)構(gòu)清晰 代碼模塊化 更加語義化 不過也有缺點 瀏覽器不支持這語法 必須...
摘要：同構(gòu)的關(guān)鍵要素完善的屬性及生命周期與客戶端的時機是同構(gòu)的關(guān)鍵。的一致性在前后端渲染相同的，將輸出一致的結(jié)構(gòu)。以上便是在同構(gòu)服務(wù)端渲染的提供的基礎(chǔ)條件。可以將封裝至的中，在服務(wù)端上生成隨機數(shù)并傳入到這個中，從而保證隨機數(shù)在客戶端和服務(wù)端一致。 原文地址 React 的實踐從去年在 PC QQ家校群開始，由于 PC 上的網(wǎng)絡(luò)及環(huán)境都相當(dāng)好，所以在使用時可謂一帆風(fēng)順，偶爾遇到點小磕絆，也能夠...
摘要：為什么網(wǎng)頁性能會變高要回答這個問題，需要回頭看是單線程的知識點。在分析的過程中，發(fā)現(xiàn)了的源碼中使用了很多鏈?zhǔn)浇Y(jié)構(gòu)，回調(diào)鏈，任務(wù)鏈等，這個主要是為了增刪時性能比較高 系列文章 React Fiber源碼分析 第一篇 React Fiber源碼分析 第二篇（同步模式） React Fiber源碼分析 第三篇（異步狀態(tài)） React Fiber源碼分析 第四篇（歸納總結(jié)） 前言 Rea...
閱讀 2394·2023-04-26 02:54
閱讀 2317·2021-10-14 09:43
閱讀 3366·2021-09-22 15:19
閱讀 2846·2019-08-30 15:44
閱讀 2704·2019-08-30 12:54
閱讀 988·2019-08-29 18:43
閱讀 1939·2019-08-29 17:12
閱讀 1333·2019-08-29 16:40
