大多數(shù)前端開(kāi)發(fā)人員都希望React JS能成為他們的武器庫(kù)，來(lái)創(chuàng)建獨(dú)特的、前沿的用戶界面。

　　1.重要文件組織

　　服務(wù)于相似功能并且被設(shè)計(jì)為使用某一特征的文件應(yīng)該被保存在一起。例如，與單個(gè)組件相關(guān)的所有樣式文件和其他文件應(yīng)該位于同一位置。在這種做法的幫助下，開(kāi)發(fā)人員可以很容易地在一個(gè)位置找到相關(guān)的項(xiàng)目。因此，用戶不必在整個(gè)項(xiàng)目中搜索特定的文件。無(wú)論項(xiàng)目變得多么大，文件總是位于它應(yīng)該在的地方。

　　開(kāi)發(fā)人員也可以選擇以組件為中心的文件結(jié)構(gòu)。這需要將關(guān)于一個(gè)組件的所有文檔放在一個(gè)文件夾中。例如，可以創(chuàng)建一個(gè)名為NavBar的文件夾，其中包含導(dǎo)航欄組件本身、樣式化組件以及任何其他JavaSript和資產(chǎn)文件。當(dāng)一個(gè)組件的所有文件都包含在一個(gè)文件夾中時(shí)，重用、共享和調(diào)試該組件就很容易了。

　　2.小而特殊的功能組件

　　眾所周知，React允許開(kāi)發(fā)能夠執(zhí)行各種任務(wù)的大型組件。然而，最好通過(guò)保持組件的適度來(lái)構(gòu)建它們，以便每個(gè)組件都執(zhí)行特定的目的。在Web前端培訓(xùn)中，也有關(guān)于React的學(xué)習(xí)和使用，理論知識(shí)結(jié)合實(shí)戰(zhàn)操作，學(xué)以致用，真正掌握前端技術(shù)。

　　使用React，開(kāi)發(fā)人員可以生成可重用的UI組件。就操作而言，較小的組件更易于閱讀和理解，并且易于更新。因此，代碼的可用性也得到了提高。每個(gè)組件通常都很短(100到200行)，使得其他程序員理解和調(diào)整代碼很簡(jiǎn)單。

　　3.選擇碎片而不是分裂

　　任何React組件返回的代碼都應(yīng)該包裝在一個(gè)單獨(dú)的標(biāo)記中。通常，使用<div>或React片段，但選擇React片段是最佳實(shí)踐之一。你使用的每個(gè)標(biāo)簽或< div >都會(huì)獲取內(nèi)存。因此，<div>的數(shù)量越多，你的網(wǎng)站需要的內(nèi)存就越多，需要的能量就越多，加載網(wǎng)站的時(shí)間也就越長(zhǎng)。這最終導(dǎo)致網(wǎng)站速度慢，用戶體驗(yàn)差。

　　

　　4.命名規(guī)格

　　命名約定有助于使代碼更易于閱讀。這適用于變量、React鉤子、組件名等等。

　　React文檔中沒(méi)有提供正式的命名方案，但是使用了3個(gè)主要的命名約定：

　　l 組件名稱應(yīng)該反映它們的功能，而不是指特定的應(yīng)用程序功能。它們也應(yīng)該大寫字母camelCase。

　　l 需要成分的鍵應(yīng)該有唯一的、非隨機(jī)的標(biāo)識(shí)符。建議不要僅僅使用索引作為鍵。組合兩個(gè)不同對(duì)象屬性的鍵分配是可接受的。

　　l 在camelCase中，方法應(yīng)該根據(jù)它們的目的和功能來(lái)命名，而不是特定于應(yīng)用程序。一般來(lái)說(shuō)，組件是用PascalCase編寫的，必須根據(jù)它們的用途而不是它們?cè)陧?xiàng)目中的功能來(lái)命名。

　　5.不要重復(fù)你的代碼

　　React最佳實(shí)踐讓你能夠編寫準(zhǔn)確而簡(jiǎn)潔的代碼，從而使它變得可行而簡(jiǎn)單。問(wèn)題是——你如何知道你是否要合并重復(fù)的代碼?你只需要尋找相似之處，如果你找到了，那就意味著你在復(fù)制一個(gè)代碼。

　　6.使用React開(kāi)發(fā)工具

　　React開(kāi)發(fā)人員工具在開(kāi)發(fā)React應(yīng)用程序時(shí)派上用場(chǎng)。它包含狀態(tài)、子元素、道具和組件層次結(jié)構(gòu)。這也有助于調(diào)試代碼。借助React開(kāi)發(fā)工具，開(kāi)發(fā)人員可以輕松構(gòu)建交互式UI。

　　React開(kāi)發(fā)者工具會(huì)定期添加新功能。

　　7.條件渲染實(shí)踐

　　React允許用戶創(chuàng)建封裝所需行為的獨(dú)特組件。然后，根據(jù)React應(yīng)用程序的狀態(tài)，可以呈現(xiàn)一些組件。這就是條件渲染?，F(xiàn)在，有很多方法可以執(zhí)行條件渲染。

　　8.使用代碼片段庫(kù)

　　編寫代碼時(shí)，你應(yīng)該始終努力使用最好和最新的語(yǔ)法。你可以通過(guò)使用代碼片段來(lái)保持語(yǔ)法最新，它們還有助于確保你的代碼沒(méi)有錯(cuò)誤和bug。因此，為了提高效率，你應(yīng)該堅(jiān)持使用代碼片段庫(kù)代碼片段，如ES7 React、Redux、JS片段等。

　　

　　9.JavaScript中的CSS

　　對(duì)于一個(gè)活動(dòng)項(xiàng)目來(lái)說(shuō)，將其所有CSS樣式放在一個(gè)SCSS文件中是非常常見(jiàn)的。全局前綴有助于避免名稱崩潰，然而，當(dāng)項(xiàng)目開(kāi)始增長(zhǎng)時(shí)，這種技術(shù)可能不會(huì)派上用場(chǎng)。React提供了很多庫(kù)來(lái)在JS解決方案中編寫CSS測(cè)試，最流行的庫(kù)是EmotionJS和Glamorous。

　　10.延遲加載實(shí)施

　　簡(jiǎn)單地說(shuō)，延遲加載是一種設(shè)計(jì)模式。通過(guò)允許應(yīng)用程序的部分僅在必要時(shí)加載，可以減少初始加載時(shí)間。例如，你可以首先加載用戶注冊(cè)和登錄所需的部件和模塊。然后可以基于用戶導(dǎo)航加載其余的功能或類組件。

　　為了擴(kuò)大你的React應(yīng)用程序，延遲加載是一個(gè)很好的工具。如果你的代碼庫(kù)很大，你的網(wǎng)站加載時(shí)間就會(huì)變慢。這是因?yàn)槊看斡脩舻卿洉r(shí)，必須加載整個(gè)應(yīng)用程序。

　　11.測(cè)試和監(jiān)測(cè)規(guī)范

　　為了消除錯(cuò)誤概率的組件編寫測(cè)試。測(cè)試可確保部件的性能符合預(yù)期。Jest是最流行的測(cè)試React組件之一，它提供了一個(gè)可以運(yùn)行測(cè)試的設(shè)置。在瀏覽器中運(yùn)行React應(yīng)用程序允許你在創(chuàng)建應(yīng)用程序時(shí)對(duì)其進(jìn)行測(cè)試。任何發(fā)現(xiàn)的問(wèn)題通常都會(huì)顯示在屏幕上。這相當(dāng)于使用DevKinsta創(chuàng)建WordPress站點(diǎn)，這是一個(gè)允許你在本地創(chuàng)建、編輯和啟動(dòng)WordPress站點(diǎn)的程序。

　　12.在ReactJS應(yīng)用程序中管理狀態(tài)

　　處理React功能組件為呈現(xiàn)自己所需的數(shù)據(jù)的過(guò)程稱為React狀態(tài)管理。通常，這些信息保存在組件的狀態(tài)對(duì)象中。當(dāng)狀態(tài)對(duì)象更改時(shí)，組件將重新渲染自身。

　　它有所有的信息。演示文稿包括HTML、CSS和格式，構(gòu)成了剩下的一半。應(yīng)用程序的呈現(xiàn)部分依賴于狀態(tài)和狀態(tài)管理。React應(yīng)用程序只會(huì)在狀態(tài)更改時(shí)重新渲染自己。

　　13.使用JSX編寫干凈易讀的代碼

　　作為一名開(kāi)發(fā)人員，可能希望編寫清晰易讀、易于理解的代碼結(jié)構(gòu)。你可以使用JSX速記，將不相關(guān)的代碼移動(dòng)到單個(gè)組件中，并為一個(gè)組件開(kāi)發(fā)單獨(dú)的文件。開(kāi)發(fā)人員還可以在鉤子中將功能組件組合在一起。

　　

　　14.使用React路由器實(shí)現(xiàn)正確的路由

　　路由方法包括將用戶發(fā)送到各種網(wǎng)站，以響應(yīng)他們的請(qǐng)求或操作。ReactJS路由器的主要應(yīng)用是創(chuàng)建單頁(yè)web應(yīng)用程序。使用React Router在應(yīng)用程序中定義了多條路由。

　　React Router包是一個(gè)構(gòu)建在React之上的標(biāo)準(zhǔn)庫(kù)系統(tǒng)，用于在React應(yīng)用程序中實(shí)現(xiàn)路由。它將在網(wǎng)頁(yè)上顯示的信息提供給瀏覽器中的同步URL。它主要用于創(chuàng)建單頁(yè)web應(yīng)用程序，并保留應(yīng)用程序的常規(guī)結(jié)構(gòu)和功能。

　　15.ReactJS應(yīng)用程序中的錯(cuò)誤處理和調(diào)試

　　前端開(kāi)發(fā)人員經(jīng)常忽略錯(cuò)誤處理和日志記錄。但是，任何拋出錯(cuò)誤的代碼段都必須得到正確處理。此外，根據(jù)具體情況，React中有許多處理和記錄故障的方法。以下是開(kāi)發(fā)人員可以用來(lái)處理和調(diào)試錯(cuò)誤的一些實(shí)踐：

　　類組件的錯(cuò)誤邊界

　　嘗試-捕捉超越界限的捕捉

　　反應(yīng)誤差邊界庫(kù)

　　總結(jié)

　　為了確保React項(xiàng)目可維護(hù)、高效且易于理解，在使用React進(jìn)行開(kāi)發(fā)時(shí)遵循最佳實(shí)踐非常重要。你可以使用它們來(lái)更快地編寫React代碼。