談?wù)凴eact那些小事

歡迎關(guān)注:https://zhuanlan.zhihu.com/dreawer

前言

說起React,那也是近一年多時間火起來的前端框架憔购,其在Facebook的影響力和大力推廣下痪蝇,已然成為目前前端界的中流砥柱劝萤。在如今的前端框架界肋殴,React尖殃、Vue攘宙、Angular三分天下的時代已經(jīng)到來屯耸,而曾經(jīng)jQuery一統(tǒng)天下的局面已一去不復(fù)返。

三分天下蹭劈,前端雖亂疗绣,但美其名曰“繁榮”。每一次突破性的革命必定會迎來成千上萬的追隨者铺韧,我們可以看一下一份來自NPM的統(tǒng)計(jì)數(shù)據(jù):


NPM的統(tǒng)計(jì)數(shù)據(jù)
NPM的統(tǒng)計(jì)數(shù)據(jù)

上圖統(tǒng)計(jì)的是全球范圍內(nèi)React多矮、Vue、Angular在npm中的月下載次數(shù)哈打,統(tǒng)計(jì)地址可以訪問:npm-stat工窍。從圖中我們不難發(fā)現(xiàn)React雖初出茅廬,但其影響力已經(jīng)奠定了在前端框架中的霸主地位前酿。

而對于React的開發(fā)者來說患雏,如何利用React構(gòu)建現(xiàn)代化的前端項(xiàng)目,產(chǎn)出高質(zhì)量的前端代碼才是學(xué)習(xí)React的重點(diǎn)罢维。所以本文就我自己平時利用React開發(fā)項(xiàng)目的經(jīng)驗(yàn)和個人見解淹仑,來談?wù)勗赗eact項(xiàng)目中需要了解和容易忽略的“小事”。


那些小事

俗話說“千里之堤毀于蟻穴”肺孵,在React開發(fā)中我們不能忙于進(jìn)度而忽視了細(xì)節(jié)匀借。

1.使用容器組件與展示組件
容器組件和展示組件名詞來自于redux文檔。如果你想讓自己的React項(xiàng)目變得清晰可維護(hù)平窘,那么你需要了解并使用它們吓肋。

這里我們將組件分成兩類,一類叫“容器組件”瑰艘,我一般將它們放在containers文件夾下是鬼。這一類組件可以理解為最頂層的組件肤舞,其功能僅僅做數(shù)據(jù)提取,然后渲染對應(yīng)的子組件均蜜。

另一類叫“展示組件”李剖,我一般將它們放在components文件夾下。這一類組件可以理解為只具有展示性的子組件囤耳,其功能僅僅是展示性的篙顺,所有數(shù)據(jù)都通過 props 傳入。

這樣分類的好處在于:關(guān)注分離充择,更易復(fù)用及維護(hù)德玫,數(shù)據(jù)集中處理等。具體可以參見:譯文《容器組件和展示組件》

2.組件劃分不宜過細(xì)椎麦,層次不宜過深
曾經(jīng)有人問我React組件的劃分應(yīng)不應(yīng)該太細(xì)宰僧,比如是不是可以把一個輸入框劃分為一個組件?

我個人認(rèn)為組件不應(yīng)該按照DOM元素來劃分铃剔,而是應(yīng)該按照功能來劃分撒桨。如果你的一個頁面中包含了兩個功能,比如表格搜索键兜、彈框查看凤类,就可以將其劃分為兩個子組件。

同樣的組件層次也不宜過深普气。很多時候會存在組件中包含組件的情況谜疤,這樣就出現(xiàn)了組件之間的嵌套層次。我個人認(rèn)為組件間的嵌套層次不宜超過3層现诀,如果嵌套層次太深會直接導(dǎo)致功能及狀態(tài)的難以維護(hù)屿聋,就像if else語句嵌套太深一樣党晋。

3.Redux和state并不沖突
很多開發(fā)者可能會認(rèn)為用了Redux來管理數(shù)據(jù)狀態(tài)后,我們的組件中就不需要state了。其實(shí)我個人認(rèn)為Redux和state并不沖突砌溺。

Redux主要用于管理那些公用及異步的狀態(tài)缸夹,而state一般用于管理組件獨(dú)有的狀態(tài)铆遭。如果你的組件中存在其不必和其他組件公用及非異步的單一數(shù)據(jù)锐极,那么你直接可以寫在state中,比如一些loading的狀態(tài)和顯示隱藏的狀態(tài)等成福。
巧妙的使用Redux和state可以幫助我們更好的管理數(shù)據(jù)流碾局。

4.不要渲染當(dāng)前用不到的組件
在用戶操作中,有些組件可能不是一開始展示頁面的時候就需要用到的奴艾,比如某些彈框等净当。這樣的組件除了將其隱藏外,我們最好不要讓它渲染在頁面上,當(dāng)用戶點(diǎn)擊觸發(fā)的時候再進(jìn)行渲染像啼,這樣一來便起到了優(yōu)化加載的作用俘闯。

5.除了劃分組件還應(yīng)劃分reducer
相比組件的劃分,reducer的劃分也同樣重要埋合。隨著應(yīng)用的膨脹备徐,我們可以將拆分后的 reducer 放到不同的文件中, 以保持其獨(dú)立性并用于專門處理不同的數(shù)據(jù)域萄传。

如果一個中大型的項(xiàng)目不劃分reducer甚颂,會導(dǎo)致單一的reducer文件代碼過于冗長而難以維護(hù)。我們可以使用Redux提供的 combineReducers()來將拆分的reducer進(jìn)行合并秀菱。詳見:Redux中文文檔振诬。

結(jié)語

事無巨細(xì),人無完人衍菱。一個優(yōu)秀的React項(xiàng)目并不代表其沒有缺點(diǎn)赶么,代碼優(yōu)化是一個長期的過程,唯有發(fā)現(xiàn)問題總結(jié)問題才能給我們帶來新的突破口脊串。

來源:前端呼啦圈(Love-FED)

本文完辫呻!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市琼锋,隨后出現(xiàn)的幾起案子放闺,更是在濱河造成了極大的恐慌,老刑警劉巖缕坎,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怖侦,死亡現(xiàn)場離奇詭異,居然都是意外死亡谜叹,警方通過查閱死者的電腦和手機(jī)匾寝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來荷腊,“玉大人艳悔,你說我怎么就攤上這事∨觯” “怎么了猜年?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長董栽。 經(jīng)常有香客問我码倦,道長,這世上最難降的妖魔是什么锭碳? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任袁稽,我火速辦了婚禮,結(jié)果婚禮上擒抛,老公的妹妹穿的比我還像新娘推汽。我一直安慰自己补疑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布歹撒。 她就那樣靜靜地躺著莲组,像睡著了一般。 火紅的嫁衣襯著肌膚如雪暖夭。 梳的紋絲不亂的頭發(fā)上锹杈,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機(jī)與錄音迈着,去河邊找鬼竭望。 笑死,一個胖子當(dāng)著我的面吹牛裕菠,可吹牛的內(nèi)容都是我干的咬清。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼奴潘,長吁一口氣:“原來是場噩夢啊……” “哼旧烧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起画髓,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤掘剪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后雀扶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杖小,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年愚墓,在試婚紗的時候發(fā)現(xiàn)自己被綠了予权。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡浪册,死狀恐怖扫腺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情村象,我是刑警寧澤笆环,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站厚者,受9級特大地震影響躁劣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜库菲,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一账忘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦鳖擒、人聲如沸溉浙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽戳稽。三九已至,卻和暖如春期升,著一層夾襖步出監(jiān)牢的瞬間惊奇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工吓妆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留赊时,地道東北人吨铸。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓行拢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親诞吱。 傳聞我的和親對象是個殘疾皇子舟奠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容