譯者 | 布加迪

審校 | 孫淑娟?

React是流行的JavaScript前端框架之一。不像Angular之類的其他框架，它非常地unopinionated（不自成一體）。因此，得由您來決定自己想要如何編寫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ì)生成更簡潔更可讀的代碼。?

考慮以下顯示來自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 (
????????

??????????
 Fetching data.... 
{" "}
????????

??????);

????return (
??????<>
????????
 Fetch data using Class component 
{" "}
????????{data.map((item) => (
??????????
{item.title}

????????))}
??????
????);
??}
}

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

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 (
????<>
??????
 Fetch data using Class component 
{" "}
??????{data.map((item) => (
????????
{item.title}

??????))}
????
??);
};

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

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í)聲明它。比如說，如果您從API獲取用戶數(shù)據(jù)，將整個(gè)用戶對象存儲(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è)文件夾中。?

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

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

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

• 使用索引文件來抽取組件文件的實(shí)現(xiàn)細(xì)節(jié)。拿Navbar例子來說，創(chuàng)建Navbar文件夾，并在該文件夾中添加一個(gè)名為index.js（或.ts）文件的組件文件。?
• 將可重用組件保存在一個(gè)單獨(dú)的文件夾中。如果您的組件被應(yīng)用程序的多個(gè)部分使用，請考慮將它們保存在一個(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) => {
????????
{elem}
;
??????})}
????
??);
};

雖然這有時(shí)切實(shí)可行，但使用索引作為鍵可能會(huì)帶來問題，當(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)記通常是

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

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

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

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

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

const List = () => {
??return (
????

??????
Item1

??????
Item2

??????
Item3

??????
Item4

??????
Item5

????

??);
};