如何在React中寫出更好的代碼
點擊上方關(guān)注 TianTianUp，一起學(xué)習(xí)，天天進步
在React中編寫更好的代碼的提示，關(guān)于Linting、propTypes、PureComponent和其他幾個點，幫你編寫更好的代碼。
正文
React使創(chuàng)建交互式UI變得不費力。為你的應(yīng)用程序中的每個狀態(tài)設(shè)計簡單的視圖，當(dāng)你的數(shù)據(jù)發(fā)生變化時，React會有效地更新和渲染正確的組件。
在這篇文章中，我將向你展示一些提示，以幫助你成為一個更好的React開發(fā)者。
我將涵蓋從工具到實際代碼風(fēng)格的一系列東西，這可以幫助你提高你的React技能??
主要有以下幾個方面：
代碼提示。 使用propTypes和defaultProps。 知道什么時候要創(chuàng)建新的組件。 知道何時編寫Component、PureComponent和無狀態(tài)功能組件。 使用React開發(fā)工具。 在你的代碼中使用內(nèi)聯(lián)條件語句。 使用Snippet，代碼片段庫。 了解React如何工作。
代碼提示
對于編寫更好的代碼來說，有一件事是非常重要的，那就是良好的提示。
因為如果我們有一套好的Linting規(guī)則，你的代碼編輯器將能夠捕捉到任何有可能導(dǎo)致你的代碼出現(xiàn)問題的東西。但不僅僅是捕捉問題，你的ES Lint設(shè)置將不斷使你了解React的最佳實踐。
import react from 'react';
/* Other imports */
/* Code */
export default class App extends React.Component {
render() {
const {userIsLoaded, user} = this.props;
if (!userIsLoaded) return <Loader />;
return (
/* Code */
)
}
}
以上面的代碼片段為例。假設(shè)你想在render()函數(shù)中引用一個名為this.props.hello的新屬性。你的linter會立即變紅并說：
'hello' is missing in props validation (react/prop-types)
Linting將幫助你意識到React中的最佳實踐，并塑造你對代碼的理解。很快，你就會開始避免在寫代碼時犯錯。
你可以去ESLint，為JavaScript設(shè)置一個品頭論足的工具，或者你可以使用Airbnb的JavaScript風(fēng)格指南。你也可以安裝React ESLint軟件包。
基本上這些代碼提示都會幫助你糾正寫代碼時遇到的問題。
propTypes and defaultProps
在前面的章節(jié)中，我談到了當(dāng)我試圖傳遞一個未經(jīng)驗證的props時，我的linter是如何表現(xiàn)的：
static propTypes = {
userIsLoaded: PropTypes.boolean.isRequired,
user: PropTypes.shape({
_id: PropTypes.string,
)}.isRequired,
}
在這里，如果我們說userIsLoaded不是必需的，那么我們就需要在代碼中加入這個：
static defaultProps = {
userIsLoaded: false,
}
所以，無論何時我們的組件中使用了一個PropType，我們都需要為它設(shè)置一個propType。
例如，我們需要告訴React，userIsLoaded總是一個布爾值。
確保你在每一個使用props的組件上都設(shè)置了propTypes和defaultProps，將有很大的幫助。
當(dāng)這些props沒有得到它們所期望的數(shù)據(jù)時，你的錯誤日志會讓你知道，你要么傳入的東西不正確，要么期望的東西不存在，這使得錯誤的查找變得更加容易，特別是當(dāng)你正在編寫大量的可重復(fù)使用的組件時。這也使它們更有自我記錄的能力。
注意:
與早期版本的React不同，proptypes不再包含在React內(nèi)部，你必須將其作為一個依賴項單獨添加到你的項目中。
點擊這里了解更多:
https://www.npmjs.com/package/prop-types
知道何時創(chuàng)建新組件
export default class Profile extends PureComponent {
static propTypes = {
userIsLoaded: PropTypes.bool,
user: PropTypes.shape({
_id: PropTypes.string,
}).isRequired,
}
static defaultProps = {
userIsLoaded: false,
}
render() {
const { userIsLoaded, user } = this.props;
if (!userIsLoaded) return <Loaded />;
return (
<div>
<div className="two-col">
<section>
<MyOrders userId={user.id} />
<My Downloads userId={user._id} />
</section>
<aside>
<MySubscriptions user={user} />
<MyVotes user={user} />
</aside>
</div>
<div className="one-col">
{isRole('affiliate', user={user._id} &&
<MyAffiliateInfo userId={user._id} />
}
</div>
</div>
)
}
}
在這里，我有一個名為Profile的組件。在這個組件中還有其他組件，如MyOrder和MyDownloads。
現(xiàn)在我可以把所有這些組件都寫在這里，因為我只是從同一個地方（用戶）提取數(shù)據(jù)，把所有這些小組件變成一個巨大的組件。
雖然沒有任何硬性規(guī)定何時將你的代碼移到一個組件中，但是不是存在一些問題:
你的代碼的功能是否變得笨重了？ 它是否代表它自己的東西？ 你是否打算重復(fù)使用你的代碼？
如果這些問題中的任何一個答案是肯定的，那么你就需要把你的代碼移到一個組件中去。
請記住，任何人都不希望在你的代碼中看到一個巨大的200-300行的組件，里面充滿了。。。
組件 VS 純組件 VS 無狀態(tài)功能組件
對于一個React開發(fā)者來說，知道什么時候在代碼中使用Component、PureComponent和無狀態(tài)功能組件是非常重要的。
你可能已經(jīng)注意到在上面的代碼片段中，我沒有將Profile聲明為Component，而是將其稱為PureComponent。
首先，讓我們來看看無狀態(tài)功能組件。
無狀態(tài)的功能組件
const Billboard = () => (
<ZoneBlack>
<Heading>React</Heading>
<div className="billboard_product">
<Link className="billboard_product-image" to="/">
<img alt="#" src="#">
</Link>
<div className="billboard_product-details">
<h3 className="sub">React</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</ZoneBlack>
);
無狀態(tài)功能組件是你庫中最常見的組件類型之一。它們?yōu)槲覀兲峁┝艘环N很好的、簡潔的方式來創(chuàng)建不使用任何種類的狀態(tài)或生命周期方法的組件。
無狀態(tài)函數(shù)式組件的理念是，它是無狀態(tài)的，只是一個函數(shù)。這樣做的好處是，你將你的組件定義為一個返回一些數(shù)據(jù)的恒定函數(shù)。
簡單地說，無狀態(tài)的功能組件只是返回JSX的函數(shù)。
純組件
通常情況下，當(dāng)一個組件得到一個新的props時，React會重新渲染這個組件。但有時，一個組件得到的新props并沒有真正改變，但React仍然會觸發(fā)重新渲染。
使用PureComponent將幫助你防止這種浪費的重新渲染。例如，如果一個props是字符串或布爾值，并且它發(fā)生了變化，PureComponent就會識別出來，但如果一個對象內(nèi)的屬性發(fā)生了變化，PureComponent就不會觸發(fā)重新渲染。
那么，你如何知道React何時會觸發(fā)不必要的重新渲染？你可以看看這個神奇的React包，叫做Why Did You Update。這個包會在潛在的不必要的重新渲染發(fā)生時在控制臺中通知你。
一旦你認識到一個不必要的重新渲染，你可以使用PureComponent而不是Component來防止事情發(fā)生不必要的重新渲染。
Why Did You Update 點這里：
https://github.com/maicki/why-did-you-update
使用React Dev Tools
如果你真的想成為一個專業(yè)的React開發(fā)者，那么使用React開發(fā)工具應(yīng)該是你開發(fā)過程中的常規(guī)做法。
React Dev Tools讓你可以訪問你的React應(yīng)用的整個結(jié)構(gòu)，讓你看到應(yīng)用中使用的所有道具和狀態(tài)。
React Dev Tools是探索我們的React組件的一個很好的方法 組成部分，并幫助診斷你的應(yīng)用程序中的任何問題。
使用內(nèi)聯(lián)條件語句
這個觀點可能會引起一些人的不滿，但我發(fā)現(xiàn)，使用內(nèi)聯(lián)條件語句可以大大清理我的React代碼。
看一下這個代碼片段：
<div className="one-col">
{isRole('affiliate', user._id) &&
<MyAffiliateInfo userId={user._id} />
}
</div>
在這里，我有一個基本的函數(shù)被調(diào)用，檢查一個人是否是 "affiliate"，然后是一個名為 < MyAffiliateInfo/ > 的組件。
這一點的好處是:
我不需要寫一個單獨的函數(shù)。 我不需要在我的渲染函數(shù)中再寫一個 "if "語句。 我不需要在組件中創(chuàng)建一個 "鏈接 "到其他地方。
編寫內(nèi)聯(lián)條件語句是非常簡單的。你首先要寫出你的條件語句。你可以說 "true"，這樣就會一直顯示**< MyAffiliateInfo/ >**組件。
接下來，我們用&&將這個條件語句與**< MyAffiliateInfo/ >**連接起來。這樣，只有當(dāng)條件語句返回 "真 "時，該組件才會被顯示出來。
使用代碼片段庫
打開一個代碼編輯器（我使用VS Code），并創(chuàng)建一個.js文件。
在這個文件中，當(dāng)你輸入rc時，你會看到類似這樣的東西。
點擊進入，你會立即得到下面這段代碼：
這些代碼片段的好處是，它們不僅能幫助你潛在地保存錯誤，而且還能幫助你識別最新的語法。
有許多不同的代碼片段庫，可以安裝在你的代碼編輯器中。我在VS Code中使用的是ES7 React/Redux/React-Native/JS Snippets。
了解React如何工作
React Internals是一個由五部分組成的系列，它幫助我理解了React的最基本的知識，并最終幫助我成為一個更好的React開發(fā)者！它是一個很好的例子。
如果你遇到一些你可能沒有完全理解的問題，或者你了解React是如何工作的，那么React Internals將幫助你理解在React中何時和如何正確做事。
這對那些有想法但不太知道在哪里執(zhí)行代碼的人特別有幫助。
了解React工作原理的基礎(chǔ)知識將幫助你成為一個更好的React開發(fā)者。
點擊鏈接：
https://mattgreer.dev/articles/react-internals-part-one-basic-rendering/
最后
面試交流群持續(xù)開放，分享了近 許多 個面經(jīng)。
加我微信: DayDay2021，備注面試，拉你進群。
我是 TianTian，我們下篇見~
