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