作者 | Siradji Awoual

譯者 |?蘇本如，責(zé)編 |?屠敏

頭圖 | CSDN 下載自東方 IC

出品 | CSDN（ID：CSDNnews）

大家好！希望你們?cè)谝咔槠陂g平平安安。

今天，我想在這里談?wù)劜煌膬?nèi)容。我想分享一些React的開發(fā)技巧和策略，以幫助你們?cè)赗eact中編寫更干凈、更好的代碼。

大部分我已經(jīng)分享的或者將要分享的內(nèi)容，都是關(guān)于我在學(xué)習(xí)編碼的過程中遇到的難題。

作為一個(gè)沒有導(dǎo)師指導(dǎo)的自學(xué)型的開發(fā)人員，我發(fā)現(xiàn)有一件事很難做好，那就是在React中編寫干凈的代碼。

我知道我必須變得更好,但是怎么做呢？

所以我想出了一個(gè)解決辦法。我先找到5個(gè)深受大家尊敬的專業(yè)React開發(fā)人員，然后我去到他們的GitHub代碼庫中，從他們的React項(xiàng)目的代碼中找到一些共同的東西或/和模式。

我并沒有試圖將我的代碼與任何人的代碼進(jìn)行比較，我只是想知道這些被大家稱為“專家”的開發(fā)人員到底在他們的代碼中添加了什么，他們是如何實(shí)現(xiàn)某些功能的、他們采用了什么方法、以及為什么要采用這些方法。

正如預(yù)期的那樣，我開始有了一些發(fā)現(xiàn)，我發(fā)現(xiàn)我的代碼中缺少的東西，在所有這五個(gè)人的代碼中都出現(xiàn)了。這些發(fā)現(xiàn)對(duì)我來說很有意義，因?yàn)樗梢越忉屢郧暗囊恍┳龇恕１热缯f，為什么在需要prop-type時(shí)不將其添加到工作流中呢。

從那一天起，我開始把我學(xué)到的東西納入到我的工作流程中。相信我，這有助于我理解React，并且讓我的代碼看上來不像新手寫出來的。

閑話不再贅述。接下來我將分享一些我學(xué)到的技巧，這些技巧有些是從我的個(gè)人研究中得到的，也有些是通過項(xiàng)目和經(jīng)驗(yàn)學(xué)到的。

注：下面技巧的重要性不以先后次序決定。

prop-type

如果你對(duì)React來說是新手，你可能不知道什么是prop-type。但是，如果你一直在使用React,那么你至少有幾次機(jī)會(huì)見過或者使用過React。

什么是prop-type？

基本上，你可以把將prop-type視為一個(gè)模塊、包、或者其他任何東西，它的作用是對(duì)父組件傳遞過來的值/參數(shù)（prop）作類型檢查。

比如說，你希望從父組件中傳來一個(gè)對(duì)象值，但是由于某種原因，你接收到的是一個(gè)數(shù)組，這會(huì)導(dǎo)致你的應(yīng)用程序無法工作，不是嗎？

下面是prop-type使用場(chǎng)景的一個(gè)例子。你定義了你期望的參數(shù)類型，如果你接收到了不同類型的參數(shù)/值，那么它就會(huì)拋出一個(gè)錯(cuò)誤。

Const?App?=?({title,?id,?isCompleted})?=>?{ // }App.propTypes?=?{ Id:?PropTypes.number.isRequired, title:?PropTypes.string.isRequired, isCompleted:?PropTypes.bool.isRequired}

在上面的代碼塊中，我們先定義了一個(gè)名為App的組件，它接收三個(gè)參數(shù)（prop）：title、isCompleted和id。接著我們定義了參數(shù)類型（prop-type），參數(shù)title應(yīng)該是一個(gè)字符串，參數(shù)id應(yīng)該是一個(gè)數(shù)字，而參數(shù)isCompleted應(yīng)該是一個(gè)布爾值。

如果我們接收到的參數(shù)類型和我們定義的不一致，我們就會(huì)得到一個(gè)錯(cuò)誤。這是prop-type的基本用例。它的用法可能會(huì)有點(diǎn)復(fù)雜，但隨著時(shí)間的推移你會(huì)學(xué)會(huì)如何使用它。

如果你想了解更多關(guān)于prop-type的內(nèi)容，可以參考這個(gè)prop-type文檔的鏈接：https://github.com/facebook/prop-types。

在類上使用函數(shù)組件（functional component）和鉤子（hook）

這個(gè)話題有點(diǎn)爭(zhēng)議。有些人可能同意我的觀點(diǎn)，而另一些人可能不同意。我已經(jīng)使用過類和生命周期方法，如果我對(duì)這些有什么看法的話，那也應(yīng)該是正面的。

然而，函數(shù)組件（functional component）和鉤子（hook）是React的未來。React現(xiàn)在的一切變化都是為了更方便地使用hook（React的開發(fā)工具也支持這一變化）。

我個(gè)人認(rèn)為，如果你開始一個(gè)新的項(xiàng)目，你應(yīng)該使用鉤子和函數(shù)組件，但是對(duì)于已有的使用類構(gòu)建的代碼庫，建議不要進(jìn)行重構(gòu)。

我個(gè)人喜歡函數(shù)組件。我的意思是說，它們更干凈，優(yōu)雅而且更簡單。將其添加到你的工作流中可以顯著地讓你的代碼變得干凈，并且使你成為更好的開發(fā)人員。

使用函數(shù)組件和鉤子表明開發(fā)人員可以很好地適應(yīng)生態(tài)系統(tǒng)。幾個(gè)月前，我申請(qǐng)工作的公司給了我一個(gè)非現(xiàn)場(chǎng)編碼測(cè)試。我用鉤子完成了整個(gè)項(xiàng)目，面試官很高興，因?yàn)槿绻抑肋@意味著什么的話，那么說明我“可以順應(yīng)潮流”。

使你的組件小而且可重用，但不要過于抽象

React的主要特征之一是將所有內(nèi)容都包含在一個(gè)組件中。React中的組件相當(dāng)于樂高積木 - 構(gòu)建應(yīng)用程序的小代碼塊。

組件應(yīng)該相對(duì)較小。舉個(gè)例子，WhatsApp的send部分是一個(gè)組件，對(duì)嗎？

在該組件內(nèi)部，有send button組件、voice message組件和text area組件。

所有的功能都被分解成短小而簡單的代碼塊。

組件不僅要小，而且要可重用。我并不是說所有的組件都應(yīng)該是可重用的，但是如果你知道你會(huì)在你的應(yīng)用程序的另一部分中再次使用一個(gè)組件，那么這個(gè)組件就應(yīng)該是可重用的。可重用組件的一個(gè)很好的例子是button（按鈕）組件。

如果我想創(chuàng)建一個(gè)按鈕組件，我會(huì)讓它盡可能地通用。按鈕的大小、顏色、邊框半徑都將作為參數(shù)（prop）進(jìn)行傳遞。

話雖如此，你也不應(yīng)該過度抽象你的組件。而過度抽象會(huì)不必要地使得所有的組件或大部分組件都成為通用組件。

記住，只有在你確信一個(gè)組件會(huì)在多個(gè)地方使用，它才應(yīng)該成為通用組件。

解構(gòu)參數(shù)（Destructure prop），不要使用prop.{whatever}這樣的代碼了

這是我在研究過程中的發(fā)現(xiàn)之一。所以在我做這些研究之前，我的代碼是這個(gè)樣子的：

const?myApp?=?(props)?=>{///<h1>{props.title.heading}</h1>onChange={props.onChange}}

是的，我知道上面的代碼很難看。不過，我已經(jīng)想不起來上次這樣寫是什么時(shí)候的事了。現(xiàn)在我是這樣寫的。

如果參數(shù)（prop）只有一層深，我的代碼是這個(gè)樣子的：

const?myApp?=?({title,?onChange})?=>{///Const?{heading}=?title<h1>{heading}</h1>onChange={onChange}}

如果它是嵌套的，例如redux state，我會(huì)這樣寫：

const?myApp?=?({chat:{messages},?settings:{themes}})?=>{///Const?{sentMsg,?recievedMsg}=?messagesConst?{dark,?light}=?themes<h1>?Theme?color?{dark}</h1><li>?{sentMsg}?</li>}

顯然，解構(gòu)參數(shù)比用prop.title這樣的寫法，看上去更漂亮、更干凈。

參數(shù)解構(gòu)可以讓你的React代碼變得干凈，使其可讀性更強(qiáng)，并有助于再次清理。

以上是我想在這篇文章和大家分享的內(nèi)容。希望你能喜歡，并從中學(xué)到一些有用的知識(shí)。

原文：https://dev.to/siradji/how-to-be-a-better-react-developer-3je9

本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來源出處。

推薦閱讀

• 一文帶你認(rèn)識(shí)keepalived，再帶你通關(guān)LVS+Keepalived！

• 那個(gè)分分鐘處理 10 億節(jié)點(diǎn)圖計(jì)算的 Plato，現(xiàn)在怎么樣了？
  

• “谷歌殺手”發(fā)明者，科學(xué)天才 Wolfram

• 數(shù)據(jù)庫激蕩 40 年，深入解析 PostgreSQL、NewSQL 演進(jìn)歷程

• 超詳細(xì)！一文告訴你 SparkStreaming 如何整合 Kafka ！附代碼可實(shí)踐

• 5分鐘！就能學(xué)會(huì)以太坊 JSON API 基礎(chǔ)知識(shí)！

  真香，朕在看了！

總結(jié)

以上是生活随笔為你收集整理的​如何成为一个更好的 React 开发者？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。