譯者 | 布加迪

審校 | 孫淑娟?

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

下面介紹了您為了提升應用程序性能應該遵循的React優秀實踐。?

1. 使用函數組件和鉤子而不是類

在React中，您可以使用帶有鉤子的類或函數組件。然而，您應該更經常地使用函數組件和鉤子，因為與類相比，它們會生成更簡潔更可讀的代碼。?

考慮以下顯示來自NASA API的數據的類組件。

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>
????????))}
??????</>
????);
??}
}

您可以使用鉤子來編寫相同的組件：?

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>
??????))}
????</>
??);
};

盡管上面的代碼塊執行與類組件同樣的任務，但比較簡單、簡潔且易于理解。?

2. 盡量避免使用狀態

React狀態跟蹤數據；數據一發生變化，會觸發React組件重新渲染。在構建React應用程序時，盡可能避免使用狀態，因為您使用的狀態越多，應用程序中要跟蹤的數據就越多。?

盡量減少使用狀態的一種方法是僅在必要時聲明它。比如說，如果您從API獲取用戶數據，將整個用戶對象存儲在狀態中，而不是存儲單個屬性。?

不要這么做：?

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

應該這么做：?

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

3.將與同一組件相關的文件存儲在一個文件夾中

在決定React應用程序的文件夾結構時，應選擇以組件為中心的結構。這意味著將有關一個組件的所有文件存儲在一個文件夾中。?

比如說，如果您在創建Navbar組件，應創建一個名為Navbar的文件夾，其中含有組件文件、樣式表以及組件中使用的其他JavaSript和資產文件。?

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

React文件夾的其他優秀實踐如下：?

• 使用索引文件來抽取組件文件的實現細節。拿Navbar例子來說，創建Navbar文件夾，并在該文件夾中添加一個名為index.js（或.ts）文件的組件文件。?
• 將可重用組件保存在一個單獨的文件夾中。如果您的組件被應用程序的多個部分使用，請考慮將它們保存在一個名為components的文件夾中。這可以幫助您更容易找到它們。?
• 將實用程序函數保存在一個單獨的文件夾中，比如lib或helpers文件夾。這將使以后更容易管理和重用這些函數。?

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

React使用鍵以獨特方式標識數組中的項。使用鍵，React可以精確地指出哪些項已更改、添加或從數組中刪除。?

在渲染數組時，可以使用索引作為鍵。?

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

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

雖然這有時切實可行，但使用索引作為鍵可能會帶來問題，當列表預計發生變化時更是如此。考慮這個列表。?

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

目前，第一個列表項“Item1”位于索引0，但如果您在列表開頭添加了另一個項，“Item1”索引就會變成1，這將改變數組的行為。?

解決辦法就是使用唯一值作為索引，以確保列表項的標識得到維護。?

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

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

使用<div>會增加DOM大小，尤其是在大型項目中，因為您擁有的標記或DOM節點越多，網站需要的內存就越多，瀏覽器加載網站所花的開銷就越大。這會導致頁面打開速度較慢、用戶體驗可能很差。?

消除不必要的<div>標記的一個例子是在返回單個元素時不使用<div>標記。?

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

6. 遵循命名約定

在命名組件時，您應該始終使用PascalCase，以便將它們與其他非組件JSX文件區分開來，比如TextField、NavMenu和SuccessButton。?

對于在React組件中聲明的函數，比如handleInput()或showElement()，應使用camelCase。?

7. 避免重復代碼

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

比如說，為導航菜單創建一個組件比在每個需要菜單的組件中重復編寫代碼更明智。?

這就是基于組件的架構具有的優勢。您可以將項目分解成能夠在整個應用程序中重用的小組件。?

8. 為道具使用對象解構

不要傳遞道具對象，而是使用對象解構來傳遞道具名稱。這樣避免了每次需要使用道具對象時都要引用它。?

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

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

使用對象解構，您直接引用文本。?

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

9. 使用Map動態渲染數組

使用map()動態渲染重復的HTML塊。比如說，您可以使用map()渲染<li>標記中的項列表。?

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

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

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

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

10. 為每個React組件編寫測試

為您創建的組件編寫測試，因為這樣做就可以減少出錯的可能性。測試確保組件的行為符合您的預期。最常用的React測試框架之一是Jest，它提供了可以執行測試的環境。?

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

在遵循這些技巧時，應牢記您的特定項目和目標，因為不同的React優秀實踐可能在不同的環境下更重要。比如說，團隊規模小、范圍有限的項目可能不需要與多個團隊一起工作的大型項目同樣級別的文件夾組織管理。?

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