譯者 | 布加迪

審校 | 孫淑娟?

React是流行的JavaScript前端框架之一。不像Angular之類的其他框架，它非常地unopinionated（不自成一體）。因此，得由您來(lái)決定自己想要如何編寫React代碼或設(shè)計(jì)架構(gòu)。?

下面介紹了您為了提升應(yīng)用程序性能應(yīng)該遵循的React優(yōu)秀實(shí)踐。?

1. 使用函數(shù)組件和鉤子而不是類

在React中，您可以使用帶有鉤子的類或函數(shù)組件。然而，您應(yīng)該更經(jīng)常地使用函數(shù)組件和鉤子，因?yàn)榕c類相比，它們會(huì)生成更簡(jiǎn)潔更可讀的代碼。?

考慮以下顯示來(lái)自NASA API的數(shù)據(jù)的類組件。

class NasaData extends React.Component {
??constructor(props) {
????super(props);

????this.state = {
??????data: [],
????};
??}

??componentDidMount() {
????fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
??????.then((res) => res.json())
??????.then((json) => {
????????this.setState({
??????????data: json,
????????});
??????});
??}

??render() {
????const { data } = this.state;

????if (!data.length)
??????return (
????????<div>
??????????<h1> Fetching data.... </h1>{" "}
????????</div>
??????);

????return (
??????<>
????????<h1> Fetch data using Class component </h1>{" "}
????????{data.map((item) => (
??????????<div key={item.id}>{item.title}</div>
????????))}
??????</>
????);
??}
}

您可以使用鉤子來(lái)編寫相同的組件：?

const NasaData = () => {
??const [data, setdata] = useState(null);

??useEffect(() => {
????fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
??????.then((res) => res.json())
??????.then((json) => {
????????setdata(json);
??????});
??}, [data]);

??return (
????<>
??????<h1> Fetch data using Class component </h1>{" "}
??????{data.map((item) => (
????????<div key={item.id}>{item.title}</div>
??????))}
????</>
??);
};

盡管上面的代碼塊執(zhí)行與類組件同樣的任務(wù)，但比較簡(jiǎn)單、簡(jiǎn)潔且易于理解。?

2. 盡量避免使用狀態(tài)

React狀態(tài)跟蹤數(shù)據(jù)；數(shù)據(jù)一發(fā)生變化，會(huì)觸發(fā)React組件重新渲染。在構(gòu)建React應(yīng)用程序時(shí)，盡可能避免使用狀態(tài)，因?yàn)槟褂玫臓顟B(tài)越多，應(yīng)用程序中要跟蹤的數(shù)據(jù)就越多。?

盡量減少使用狀態(tài)的一種方法是僅在必要時(shí)聲明它。比如說(shuō)，如果您從API獲取用戶數(shù)據(jù)，將整個(gè)用戶對(duì)象存儲(chǔ)在狀態(tài)中，而不是存儲(chǔ)單個(gè)屬性。?

不要這么做：?

const [username, setusername] = useState(’’)
const [password, setpassword] = useState(’’)

應(yīng)該這么做：?

const [user, setuser] = useState({})

3.將與同一組件相關(guān)的文件存儲(chǔ)在一個(gè)文件夾中

在決定React應(yīng)用程序的文件夾結(jié)構(gòu)時(shí)，應(yīng)選擇以組件為中心的結(jié)構(gòu)。這意味著將有關(guān)一個(gè)組件的所有文件存儲(chǔ)在一個(gè)文件夾中。?

比如說(shuō)，如果您在創(chuàng)建Navbar組件，應(yīng)創(chuàng)建一個(gè)名為Navbar的文件夾，其中含有組件文件、樣式表以及組件中使用的其他JavaSript和資產(chǎn)文件。?

含有組件所有文件的單個(gè)文件夾使用戶易于重用、共享和調(diào)試。如果您需要查看一個(gè)組件如何工作，只需打開一個(gè)文件夾。?

React文件夾的其他優(yōu)秀實(shí)踐如下：?

• 使用索引文件來(lái)抽取組件文件的實(shí)現(xiàn)細(xì)節(jié)。拿Navbar例子來(lái)說(shuō)，創(chuàng)建Navbar文件夾，并在該文件夾中添加一個(gè)名為index.js（或.ts）文件的組件文件。?
• 將可重用組件保存在一個(gè)單獨(dú)的文件夾中。如果您的組件被應(yīng)用程序的多個(gè)部分使用，請(qǐng)考慮將它們保存在一個(gè)名為components的文件夾中。這可以幫助您更容易找到它們。?
• 將實(shí)用程序函數(shù)保存在一個(gè)單獨(dú)的文件夾中，比如lib或helpers文件夾。這將使以后更容易管理和重用這些函數(shù)。?

4. 避免使用索引作為鍵道具

React使用鍵以獨(dú)特方式標(biāo)識(shí)數(shù)組中的項(xiàng)。使用鍵，React可以精確地指出哪些項(xiàng)已更改、添加或從數(shù)組中刪除。?

在渲染數(shù)組時(shí)，可以使用索引作為鍵。?

const Items = () => {
??const arr = ["item1", "item2", "item3", "item4", "item5"];

??return (
????<>
??????{arr.map((elem, index) => {
????????<li key={index}>{elem}</li>;
??????})}
????</>
??);
};

雖然這有時(shí)切實(shí)可行，但使用索引作為鍵可能會(huì)帶來(lái)問題，當(dāng)列表預(yù)計(jì)發(fā)生變化時(shí)更是如此?？紤]這個(gè)列表。?

const arr = ["item1", "item2", "item3", "item4", "item5"];

目前，第一個(gè)列表項(xiàng)“Item1”位于索引0，但如果您在列表開頭添加了另一個(gè)項(xiàng)，“Item1”索引就會(huì)變成1，這將改變數(shù)組的行為。?

解決辦法就是使用唯一值作為索引，以確保列表項(xiàng)的標(biāo)識(shí)得到維護(hù)。?

5. 盡可能選擇片斷而不是Divs

React組件需要返回用單個(gè)標(biāo)記包裝的代碼，這標(biāo)記通常是<div>或React片段（fragment）。您應(yīng)該盡可能選擇片段。?

使用<div>會(huì)增加DOM大小，尤其是在大型項(xiàng)目中，因?yàn)槟鷵碛械臉?biāo)記或DOM節(jié)點(diǎn)越多，網(wǎng)站需要的內(nèi)存就越多，瀏覽器加載網(wǎng)站所花的開銷就越大。這會(huì)導(dǎo)致頁(yè)面打開速度較慢、用戶體驗(yàn)可能很差。?

消除不必要的<div>標(biāo)記的一個(gè)例子是在返回單個(gè)元素時(shí)不使用<div>標(biāo)記。?

const Button = () => {
??return <button>Display</button>;
};

6. 遵循命名約定

在命名組件時(shí)，您應(yīng)該始終使用PascalCase，以便將它們與其他非組件JSX文件區(qū)分開來(lái)，比如TextField、NavMenu和SuccessButton。?

對(duì)于在React組件中聲明的函數(shù)，比如handleInput()或showElement()，應(yīng)使用camelCase。?

7. 避免重復(fù)代碼

如果您注意到自己在編寫重復(fù)的代碼，將其轉(zhuǎn)換成可重用的組件。?

比如說(shuō)，為導(dǎo)航菜單創(chuàng)建一個(gè)組件比在每個(gè)需要菜單的組件中重復(fù)編寫代碼更明智。?

這就是基于組件的架構(gòu)具有的優(yōu)勢(shì)。您可以將項(xiàng)目分解成能夠在整個(gè)應(yīng)用程序中重用的小組件。?

8. 為道具使用對(duì)象解構(gòu)

不要傳遞道具對(duì)象，而是使用對(duì)象解構(gòu)來(lái)傳遞道具名稱。這樣避免了每次需要使用道具對(duì)象時(shí)都要引用它。?

比如說(shuō)，下面是按原樣使用道具的組件。?

const Button = (props) => {
??return <button>{props.text}</button>;
};

使用對(duì)象解構(gòu)，您直接引用文本。?

const Button = ({text}) => {
??return <button>{text}</button>;
};

9. 使用Map動(dòng)態(tài)渲染數(shù)組

使用map()動(dòng)態(tài)渲染重復(fù)的HTML塊。比如說(shuō)，您可以使用map()渲染<li>標(biāo)記中的項(xiàng)列表。?

const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];

??return (
????<>
??????{arr.map((elem, index) => {
????????<li key={elem+index}>{elem}</li>;
??????})}
????</>
??);
};

為了進(jìn)行比較，下面是在沒有map()的情況下渲染列表的方法。這種方法非常重復(fù)。?

const List = () => {
??return (
????<ul>
??????<li>Item1</li>
??????<li>Item2</li>
??????<li>Item3</li>
??????<li>Item4</li>
??????<li>Item5</li>
????</ul>
??);
};

10. 為每個(gè)React組件編寫測(cè)試

為您創(chuàng)建的組件編寫測(cè)試，因?yàn)檫@樣做就可以減少出錯(cuò)的可能性。測(cè)試確保組件的行為符合您的預(yù)期。最常用的React測(cè)試框架之一是Jest，它提供了可以執(zhí)行測(cè)試的環(huán)境。?

React是一款功能強(qiáng)大的工具，但您必須遵循某些實(shí)踐。雖然React在您使用它的方面非常靈活，但遵循特定的實(shí)踐將幫助您最大限度地改善體驗(yàn)。?

在遵循這些技巧時(shí)，應(yīng)牢記您的特定項(xiàng)目和目標(biāo)，因?yàn)椴煌腞eact優(yōu)秀實(shí)踐可能在不同的環(huán)境下更重要。比如說(shuō)，團(tuán)隊(duì)規(guī)模小、范圍有限的項(xiàng)目可能不需要與多個(gè)團(tuán)隊(duì)一起工作的大型項(xiàng)目同樣級(jí)別的文件夾組織管理。?

原文標(biāo)題：??10 React Best Practices You Need to Follow In 2023??，作者：Mary Gathoni?