如果您是一名從事構建高度互動式用戶界面的前端開發人員，那麼您很可能在工具箱中獲得了React。在使用React驅動的創作時，您應該小心處理與React最佳實踐相符的事情。這有助於保持代碼更有條理。
如您所知，React是一個由Facebook創建的庫，它允許與許多有趣的組件集成。實際上，任何開發人員都可以創建自己的組件並使其可供社區訪問。
今天，我們主題並向您展示React最基本的最佳實踐：
?1。保持組件小巧且功能特定
眾所周知，使用React，可以擁有執行大量任務的巨大組件。但是設計組件的更好方法是將它們保持為小，以便一個組件對應於一個功能。理想情況下，單個組件應呈現頁面的特定位或修改特定行為。這有很多好處：
- 功能特定的組件可以是獨立的，這使得測試和維護更容易。
- 每個小組件都可以在多個項目中重用。
- 執行常規功能的組件可供社區使用。
- 使用更小的組件，可以更輕鬆地實現性能優化。
- 更新更小的組件更容易。
- 更大的組件必須更難以執行並且可能難以維護。
創建一個簡潔組件和創建多個功能特定組件之間的平衡可能因組織而異。畢竟，您可以擁有任意數量的組件，並以任何您希望獲得相同最終結果的方式重新組合它們。
♻️2。可重用性很重要，因此請將新組件的創建保持在最低要求
通過堅持一個函數=一個組件的規則，您可以提高組件的可重用性。這意味著如果已經存在該函數的組件，則應該跳過嘗試為函數構建新組件。
通過在項目中或在任意數量的項目中重用組件，您不僅可以實現一致性，還可以為社區做出貢獻。
另一方面，如果任何組件變得龐大，笨重且難以維護，最好將其分解為所需的更小的組件。
例如，您甚至可以進一步創建可以處理圖標的Button組件。然後，每當您需要一個按鈕時，您將擁有一個要使用的組件。使其更加模塊化將允許您使用相同的代碼覆蓋許多情況。你必須瞄準中間的某個地方。您的組件應該足夠抽象，但不應過於複雜。
class IconButton擴展了React.Component {（…）render（）{return（ ）; 3.鞏固重複的代碼 – 幹掉你的代碼
所有代碼的通用規則是儘可能簡潔明了。
這裡也沒有什麼不同，因為React最佳實踐也指示您保持代碼簡潔和精確。一種方法是避免重複 – 不要重複自己（干）。
您可以通過仔細檢查代碼的模式和相似性來實現這一點。如果您發現任何問題，您可能會重複編碼，並且可以消除重複。最有可能的是，一點改寫可以使它更簡潔。
這在很大程度上依賴於React中的可重用性原則。假設您要添加包含圖標的多個按鈕，而不是為每個按鈕添加標記，您只需使用我們上面顯示的IconButton組件即可。您甚至可以將所有內容映射到數組中。
const buttons =（'facebook'，'twitter'，'youtube'）;回來（
）; ?4。僅在必要時進行評論
僅在必要時將注釋附加到代碼。這不僅符合React的最佳實踐，同時還有兩個目的：
- 這將使代碼視覺上完全無雜亂。
- 如果您碰巧在稍後的某個時間更改了代碼，則可以避免注釋和代碼之間發生潛在衝突。
?5。在功能後命名組件
在執行它的函數之後命名一個組件是一個好主意，這樣它很容易識別。
例如，ProductTable – 它可以立即傳達組件的功能。另一方面，如果您根據代碼的需要命名組件，則可能會在將來的某個時間點混淆您。
另一個例子，最好將組件命名為Avatar，以便它可以在任何地方使用 – 對於作者，用戶或評論。相反，如果我們在其使用的上下文中命名組件AuthorAvatar，我們將限制該組件的實用程序。
此外，在函數之後命名組件使其對社區更有用，因為它更有可能被發現。
?6。使用大寫字母表示組件名稱
如果像大多數人一樣使用JSX（JavaScript擴展），那麼您創建的組件的名稱需要以大寫字母開頭。例如，您將組件命名為SelectButton而不是selectbutton，或Menu而不是menu。我們這樣做是為了讓JSX能夠以與默認HTML標籤不同的方式識別它們。
早期的React版本維護了所有內置名稱的列表，以區別於自定義名稱。但由於名單需要不斷更新，因此被廢棄，資本成為常態。
如果JSX不是您選擇的語言，您可以使用小寫字母。但是，這可能會降低項目之外的組件的可重用性。
?7。將有狀態方面與渲染分開
React中的組件可以是有狀態的或無狀態的。有狀態組件存儲有關組件狀態的信息並提供必要的上下文。相比之下，無狀態組件沒有內存，也無法為UI的其他部分提供上下文。它們只從父組件接收道具（輸入）並返回JSX元素。它們具有可擴展性和可重用性，與JavaScript中的純函數類似。
React最佳實踐之一是將有狀態數據載入邏輯與渲染無狀態邏輯分開。最好有一個有狀態組件來載入數據，另一個無狀態組件來顯示這些數據。這降低了組件的複雜性。
後來的React版本v16.8有一個新功能 – React Hooks，它編寫有狀態的功能相關組件。這可能最終消除對基於類的組件的需求。
例如，您的應用程序正在mount上獲取一些數據。您要做的是管理主組件中的數據，並將複雜的渲染任務作為道具傳遞給子組件。
從'./RenderTable'導入RenderTable; class Table extends Component {state = {loading：true}; render（）{const {loading，tableData} = this.state;返回載入？
真的，這個規則不需要解釋。您編寫的代碼應該按預期運行，並且可以輕鬆快速地進行測試。將測試文件命名為與.test後綴的源文件相同是一種很好的做法。然後很容易找到測試文件。
您可以使用JEST來測試您的React代碼。
?9。與任何一個組件相關的所有文件都應該在一個文件夾中
將與任何一個組件相關的所有文件保存在一個文件夾中，包括樣式文件。
如果只有特定組件使用的任何小組件，則將這些較小的組件保存在該組件文件夾中是有意義的。然後，層次結構將易於理解 – 大型組件具有自己的文件夾，所有較小的部件都分成子文件夾。這樣，您可以輕鬆地將代碼提取到任何其他項目，甚至可以隨時修改代碼。
例如，對於Form組件，CSS文件，圖標，圖像，測試和與Form相關的任何其他子組件等所有部分都應駐留在同一文件夾中。如果您明智地命名文件，並將相關文件邏輯地保存在一起，那麼以後找到它們將不會有任何困難。
?10。使用比特等工具
有助於組織所有React組件的React最佳實踐之一是使用Bit等工具。
這些工具有助於維護和重用代碼。除此之外，它還有助於代碼變得可被發現，並促進團隊協作構建組件。此外，代碼可以跨項目同步。
?11。使用代碼段庫
代碼段可幫助您跟上最佳和最新語法。它們還有助於保持代碼相對無bug，因此這是您不應錯過的React最佳實踐之一。
您可以使用許多代碼段庫，例如ES7 React，Redux，JS Snippets等。
?12。遵循linting規則，分解太長的線條
Linting是一個過程，我們運行一個程序來分析潛在錯誤的代碼。
大多數情況下，我們將其用於與語言相關的問題。但它也可以自動修復許多其他問題，特別是代碼風格。在React代碼中使用linter有助於保持代碼相對錯誤和無錯誤。
關於React最佳實踐的最後一句話
我希望這個React最佳實踐列表能夠幫助您將項目放在正確的軌道上，並避免在未來的任何潛在問題。
如果您有任何與React相關的問題，請隨時在下面的評論中提交。
AndreiBăicuş的代碼示例。
…
不要忘記加入我們的速成課程，以加快您的WordPress網站。通過一些簡單的修復，您可以將載入時間減少50-80％：