作者 | Siradji Awoual
譯者 | 蘇本如，責編 | 屠敏
頭圖 | CSDN 下載自東方 IC
出品 | CSDN（ID：CSDNnews）
以下為譯文：
大家好！希望你們在疫情期間平平安安。
今天，我想在這裡談談不同的內容。我想分享一些React的開發技巧和策略，以幫助你們在React中編寫更乾淨、更好的代碼。
大部分我已經分享的或者將要分享的內容，都是關於我在學習編碼的過程中遇到的難題。
作為一個沒有導師指導的自學型的開發人員，我發現有一件事很難做好，那就是在React中編寫乾淨的代碼。
我知道我必須變得更好,但是怎麼做呢？
所以我想出了一個解決辦法。我先找到5個深受大家尊敬的專業React開發人員，然後我去到他們的GitHub代碼庫中，從他們的React項目的代碼中找到一些共同的東西或/和模式。
我並沒有試圖將我的代碼與任何人的代碼進行比較，我只是想知道這些被大家稱為“專家”的開發人員到底在他們的代碼中添加了什麼，他們是如何實現某些功能的、他們採用了什麼方法、以及為什麼要採用這些方法。
正如預期的那樣，我開始有了一些發現，我發現我的代碼中缺少的東西，在所有這五個人的代碼中都出現了。這些發現對我來說很有意義，因為它可以解釋以前的一些做法了。比如說，為什麼在需要prop-type時不將其添加到工作流中呢。
從那一天起，我開始把我學到的東西納入到我的工作流程中。相信我，這有助於我理解React，並且讓我的代碼看上來不像新手寫出來的。
閒話不再贅述。接下來我將分享一些我學到的技巧，這些技巧有些是從我的個人研究中得到的，也有些是通過項目和經驗學到的。
注：下面技巧的重要性不以先後次序決定。
prop-type
如果你對React來說是新手，你可能不知道什麼是prop-type。但是，如果你一直在使用React,那麼你至少有幾次機會見過或者使用過React。
什麼是prop-type？
基本上，你可以把將prop-type視為一個模塊、包、或者其他任何東西，它的作用是對父組件傳遞過來的值/參數（prop）作類型檢查。
比如說，你希望從父組件中傳來一個對象值，但是由於某種原因，你接收到的是一個數組，這會導致你的應用程序無法工作，不是嗎？
下面是prop-type使用場景的一個例子。你定義了你期望的參數類型，如果你接收到了不同類型的參數/值，那麼它就會拋出一個錯誤。
<code>Const App =({title, id, isCompleted})
=> {//
}
App.propTypes = {
Id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
isCompleted: PropTypes.bool.isRequired
}/<code>
在上面的代碼塊中，我們先定義了一個名為App的組件，它接收三個參數（prop）：title、isCompleted和id。接著我們定義了參數類型（prop-type），參數title應該是一個字符串，參數id應該是一個數字，而參數isCompleted應該是一個布爾值。
如果我們接收到的參數類型和我們定義的不一致，我們就會得到一個錯誤。這是prop-type的基本用例。它的用法可能會有點複雜，但隨著時間的推移你會學會如何使用它。
在類上使用函數組件（functional component）和鉤子（hook）
這個話題有點爭議。有些人可能同意我的觀點，而另一些人可能不同意。我已經使用過類和生命週期方法，如果我對這些有什麼看法的話，那也應該是正面的。
然而，函數組件（functional component）和鉤子（hook）是React的未來。React現在的一切變化都是為了更方便地使用hook（React的開發工具也支持這一變化）。
我個人認為，如果你開始一個新的項目，你應該使用鉤子和函數組件，但是對於已有的使用類構建的代碼庫，建議不要進行重構。
我個人喜歡函數組件。我的意思是說，它們更乾淨，優雅而且更簡單。將其添加到你的工作流中可以顯著地讓你的代碼變得乾淨，並且使你成為更好的開發人員。
使用函數組件和鉤子表明開發人員可以很好地適應生態系統。幾個月前，我申請工作的公司給了我一個非現場編碼測試。我用鉤子完成了整個項目，面試官很高興，因為如果我知道這意味著什麼的話，那麼說明我“可以順應潮流”。
使你的組件小而且可重用，但不要過於抽象
React的主要特徵之一是將所有內容都包含在一個組件中。React中的組件相當於樂高積木 - 構建應用程序的小代碼塊。
組件應該相對較小。舉個例子，WhatsApp的send部分是一個組件，對嗎？
在該組件內部，有send button組件、voice message組件和text area組件。
所有的功能都被分解成短小而簡單的代碼塊。
組件不僅要小，而且要可重用。我並不是說所有的組件都應該是可重用的，但是如果你知道你會在你的應用程序的另一部分中再次使用一個組件，那麼這個組件就應該是可重用的。可重用組件的一個很好的例子是button（按鈕）組件。
如果我想創建一個按鈕組件，我會讓它儘可能地通用。按鈕的大小、顏色、邊框半徑都將作為參數（prop）進行傳遞。
話雖如此，你也不應該過度抽象你的組件。而過度抽象會不必要地使得所有的組件或大部分組件都成為通用組件。
記住，只有在你確信一個組件會在多個地方使用，它才應該成為通用組件。
解構參數（Destructure prop），不要使用prop.{whatever}這樣的代碼了
這是我在研究過程中的發現之一。所以在我做這些研究之前，我的代碼是這個樣子的：
<code>const
myApp = (props) =>{
/<code>
是的，我知道上面的代碼很難看。不過，我已經想不起來上次這樣寫是什麼時候的事了。現在我是這樣寫的。
如果參數（prop）只有一層深，我的代碼是這個樣子的：
<code>const
myApp = ({title, onChange}) =>{
/<code>
如果它是嵌套的，例如redux state，我會這樣寫：
<code>const
myApp = ({chat:{messages}, settings:{themes}}) =>{
/<code>
顯然，解構參數比用prop.title這樣的寫法，看上去更漂亮、更乾淨。
參數解構可以讓你的React代碼變得乾淨，使其可讀性更強，並有助於再次清理。
以上是我想在這篇文章和大家分享的內容。希望你能喜歡，並從中學到一些有用的知識。
原文：
https://dev.to/siradji/how-to-be-a-better-react-developer-3je9
本文為 CSDN 翻譯，轉載請註明來源出處。
☞阿里雲加碼 2000 億，再“出征”新基建！
☞程序員會懂的冷笑話：各大編程語言的內心獨白
☞打造金融科技銀行，招行的底氣源自……
☞5分鐘！就能學會以太坊 JSON API 基礎知識！
☞架構師前輩告訴你：代碼該如何才能自己寫得容易，別人看得也不痛苦
☞“我想玩遊戲！” 大佬：玩啥遊戲，教你做一個智能貪吃蛇遊戲！
