React使用總結

LoftySoul 發布于2019-08-21 10:35 / 478人閱讀

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

兩種架構

現在使用React的開發模式主要有兩種——freeMarker+React以及純靜態React頁面開發。本文著重介紹純靜態React頁面的開發方式。

freeMarker+React

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

React純靜態頁面

利用browserify使用同構的方式進行開發，直接產出html以及js文件放置到資源文件中通過文件路徑訪問頁面。采用這種方式開發有以下優點：

PreRender產出的靜態資源文件加載速度快

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

同構的開發模式使得功能模塊可以復用，比如模板、node的一些常用模塊等等。

需要注意代碼能同時在browser與node環境下執行，否則會出問題。當使用bom對象時，在componentDidMount生命周期中運行，此時node環境下已經完成了first render。

構建方式

在node環境下通過React.renderToString方法生成html，通過這種方式生成的標簽會帶有data-reactid屬性，儲存server render結果的校驗值。
當在browser中React.render時會檢查校驗值是否一致，保證node以及browser環境下render的結果一致。因此開發過程中一定要保證render的結果保持一致，如果需要在browser中插入dom節點，可以使用insert等操作。禁止state以及props在兩個環境下值不同。
如果通過校驗，則React不會重新生成dom，只將事件監聽器掛載在對應的節點下。

應用架構

采用flux的思想來組織應用，具體的方案我推薦facebook的flux或者reflux，這也是現在Github中獲星最多的flux實現方案。兩者的主要區別是reflux不通過Dispatcher來控制action的分發，reflux中使用了較多的magic來使得代碼更加簡潔高效。

如果項目的復雜程度不高（沒有多個互相關聯的store），我推薦使用Reflux，一般情況下其實一個store就夠了，而且避免了處理store之間的通信問題。

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

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

優點

采用flux來構建應用有以下優勢：

將state在store中統一進行管理，實現業務與組建的分離，代碼結構更加清晰。

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

盡量使用props的情況下，代碼可預測性很強。

組件開發

react認為組件就是一個狀態集，盡可能使得組件只擁有props。

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

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

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

setState

state為key-value的集合，一般來說value都是基本類型，當state的數據結構層次很深的時候，操作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 之后需要觸發 render

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

但是使用forceUpdate 會跳過 shouldComponentUpdate 的過程，會觸發子組件的所有lifeCycle方法（包括shouldComponentUpdate）從而造成性能的浪費。因此為了組件更加清晰高效，應該避免使用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應該對此十分熟悉。

{$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.

云服務器 GPU云服務器 react使用webrtc 使用方法總結 react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85806.html

從一次重寫原生方法遇到的坑，總結一下Web中的事件系統

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

oysun 2019-08-23 14:42 評論0 收藏0
todo-list 項目問題總結（使用 react 進行開發）

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

shengguo 2019-08-22 15:37 評論0 收藏0
兩年React老兵的總結 - 類型檢查篇

摘要：系列引言最近準備培訓新人為了方便新人較快入手開發并編寫高質量的組件代碼我根據自己的實踐經驗對組件設計的相關實踐和規范整理了一些文檔將部分章節分享了出來由于經驗有限文章可能會有某些錯誤希望大家指出互相交流由于篇幅太長所以拆分為幾篇文章主要有以系列引言最近準備培訓新人, 為了方便新人較快入手 React 開發并編寫高質量的組件代碼, 我根據自己的實踐經驗對React 組件設計的相關實踐...

scola666 2019-08-23 18:38 評論0 收藏0
react使用總結

最近學了一些 react 和es6 的一些知識，并且使用 react 寫了一個 TodoList 項目===>預覽 && 源碼感覺學的挺多的，并且遇到的坑也不少?，說實話，一開始學 react 看到 jsx 語法有點不適應，說好的結構和行為分離呢?，不過隨著通過一個項目的完成，漸漸明白了這么寫的好處好處自定義標簽結構清晰代碼模塊化更加語義化不過也有缺點瀏覽器不支持這語法必須...

liaosilzu2007 2019-08-21 16:52 評論0 收藏0
React同構直出優化總結

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

alaege 2019-08-21 10:53 評論0 收藏0
React Fiber源碼分析第四篇（歸納總結）

摘要：為什么網頁性能會變高要回答這個問題，需要回頭看是單線程的知識點。在分析的過程中，發現了的源碼中使用了很多鏈式結構，回調鏈，任務鏈等，這個主要是為了增刪時性能比較高系列文章 React Fiber源碼分析第一篇 React Fiber源碼分析第二篇（同步模式） React Fiber源碼分析第三篇（異步狀態） React Fiber源碼分析第四篇（歸納總結）前言 Rea...

jsdt 2019-08-23 15:05 評論0 收藏0