如何編寫Cleaner React代碼
點(diǎn)擊上方關(guān)注 TianTianUp，一起學(xué)習(xí)，天天進(jìn)步
大家好，我是小弋。
今天分享的內(nèi)容是如何編寫干凈的React代碼。
正文
作為React開(kāi)發(fā)者，我們都希望寫出更干凈的代碼，更簡(jiǎn)單，更容易閱讀。
在本指南中，我把一些編寫更干凈的React代碼的七個(gè)頂級(jí)方法放在一起，使得構(gòu)建React項(xiàng)目和審查你的代碼更容易。
總的來(lái)說(shuō)，學(xué)習(xí)如何編寫更干凈的React代碼將使你成為一個(gè)更有價(jià)值的、整體上更快樂(lè)的React開(kāi)發(fā)者，所以讓我們馬上開(kāi)始吧!
主要涉及以下幾個(gè)點(diǎn)：
合理使用jsx。 把不相關(guān)的代碼移到一個(gè)獨(dú)立的組件中。 為每個(gè)組件創(chuàng)建單獨(dú)的文件。 將共享功能移入React hooks。 盡可能多地從你的JSX中刪除JavaScript。 格式化內(nèi)聯(lián)樣式，減少臃腫的代碼。 合理使用React context。
合理使用JSX
你如何向一個(gè)給定的prop傳遞一個(gè)true的值？
在下面的例子中，我們使用showTitle在Navbar組件中顯示我們應(yīng)用程序的標(biāo)題。
// src/App.js
export default function App() {
return (
<main>
<Navbar showTitle={true} />
</main>
);
}
function Navbar({ showTitle }) {
return (
<div>
{showTitle && <h1>My Special App</h1>}
</div>
)
}
我們是否需要明確地將showTitle設(shè)置為布爾值true？我們不需要!
一個(gè)快速的速記方法是，在一個(gè)組件上提供的任何prop的默認(rèn)值都是true。
因此，如果我們?cè)贜avbar上添加showTitle，我們的標(biāo)題元素就會(huì)顯示出來(lái)。
// src/App.js
export default function App() {
return (
<main>
<Navbar showTitle />
</main>
);
}
function Navbar({ showTitle }) {
return (
<div>
{showTitle && <h1>My Special App</h1>} // title shown!
</div>
)
}
另一個(gè)要記住的有用的速記法涉及到傳遞字符串prop。
當(dāng)你傳遞一個(gè)字符串的值時(shí)，你不需要用大括號(hào)把它包起來(lái)。
如果我們要設(shè)置導(dǎo)航條的標(biāo)題，使用title的prop時(shí)，我們可以把它的值放在雙引號(hào)中。
// src/App.js
export default function App() {
return (
<main>
<Navbar title="My Special App" />
</main>
);
}
function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
)
}
把不相關(guān)的代碼移到一個(gè)獨(dú)立的組件中
可以說(shuō)，編寫更干凈的React代碼的最簡(jiǎn)單和最重要的方法是善于將我們的代碼抽象成獨(dú)立的React組件。
讓我們看一下下面的例子：
// src/App.js
export default function App() {
const posts = [
{
id: 1,
title: "How to Build YouTube with React"
},
{
id: 2,
title: "How to Write Your First React Hook"
}
];
return (
<main>
<Navbar title="My Special App" />
<ul>
{posts.map(post => (
<li key={post.id}>
{post.title}
</li>
))}
</ul>
</main>
);
}
function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
);
}
我們的應(yīng)用程序正在顯示一個(gè)導(dǎo)航條組件。我們正在用.map()遍歷一個(gè)帖子數(shù)組，并在頁(yè)面上顯示其標(biāo)題。
我們思考一個(gè)問(wèn)題，我們?cè)鯓硬拍苁顾蓛裟兀?/p>
我們?yōu)槭裁床话盐覀冋谘h(huán)的代碼，抽象化，并在一個(gè)單獨(dú)的組件中顯示它們，我們稱之為FeaturePosts。
讓我們看看改進(jìn)后的結(jié)果：
// src/App.js
export default function App() {
return (
<main>
<Navbar title="My Special App" />
<FeaturedPosts />
</main>
);
}
function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
);
}
function FeaturedPosts() {
const posts = [
{
id: 1,
title: "How to Build YouTube with React"
},
{
id: 2,
title: "How to Write Your First React Hook"
}
];
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
正如你所看到的，我們現(xiàn)在可以只看我們的App組件。
通過(guò)閱讀其中的組件名稱，即Navbar和FeaturePosts，我們可以準(zhǔn)確地看到我們的應(yīng)用程序所顯示的內(nèi)容。
為每個(gè)組件創(chuàng)建單獨(dú)的文件
從我們之前的例子來(lái)看，我們把所有的組件都放在一個(gè)文件里，即app.js文件。
類似于我們將代碼抽象成獨(dú)立的組件以使我們的應(yīng)用程序更具可讀性，為了使我們的應(yīng)用程序文件更具可讀性，我們可以將我們擁有的每個(gè)組件放在一個(gè)單獨(dú)的文件中。
這又一次幫助我們?cè)趹?yīng)用程序中分離關(guān)注點(diǎn)。這意味著每個(gè)文件只負(fù)責(zé)一個(gè)組件，如果我們想在我們的應(yīng)用程序中重復(fù)使用一個(gè)組件，就不會(huì)混淆它的來(lái)源了。
// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';
export default function App() {
return (
<main>
<Navbar title="My Special App" />
<FeaturedPosts />
</main>
);
}
我們來(lái)看看Navbar中的代碼：
// src/components/Navbar.js
export default function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
);
}
接著我們看看FeaturedPosts中代碼：
// src/components/FeaturedPosts.js
export default function FeaturedPosts() {
const posts = [
{
id: 1,
title: "How to Build YouTube with React"
},
{
id: 2,
title: "How to Write Your First React Hook"
}
];
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
此外，通過(guò)將每個(gè)單獨(dú)的組件包含在自己的文件中，我們可以避免一個(gè)文件變得過(guò)于臃腫。如果我們想把所有的組件都加入到app.js文件中，我們很容易看到我們的app.js文件變得非常大。
將共享功能移入React hooks
看看我們的FeaturePosts組件，假設(shè)我們不是顯示靜態(tài)的帖子數(shù)據(jù)，而是想從一個(gè)API中獲取我們的帖子數(shù)據(jù)。
我們可以用fetch API來(lái)做。你可以看到下面這個(gè)結(jié)果:
// src/components/FeaturedPosts.js
import React from 'react';
export default function FeaturedPosts() {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(data => setPosts(data));
}, []);
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
然而，如果我們想在多個(gè)組件中執(zhí)行這一數(shù)據(jù)請(qǐng)求，該怎么辦？
比方說(shuō)，除了FeaturePosts組件外，我們還想創(chuàng)建一個(gè)具有相同數(shù)據(jù)的Post組件。我們將不得不復(fù)制我們用來(lái)獲取數(shù)據(jù)的邏輯，并將其粘貼到該組件中。
為了避免這樣做，我們?yōu)槭裁床皇褂靡粋€(gè)新的React鉤子，我們可以稱之為useFetchPosts:
// src/hooks/useFetchPosts.js
import React from 'react';
export default function useFetchPosts() {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(data => setPosts(data));
}, []);
return posts;
}
一旦我們?cè)谝粋€(gè)專門的 "鉤子 "文件夾中創(chuàng)建了這個(gè)鉤子，我們就可以在任何我們喜歡的組件中重復(fù)使用它，包括我們的FeaturePosts組件:
// src/components/FeaturedPosts.js
import useFetchPosts from '../hooks/useFetchPosts.js';
export default function FeaturedPosts() {
const posts = useFetchPosts()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
盡可能多地從你的JSX中刪除JavaScript
另一個(gè)非常有用的，但經(jīng)常被忽視的清理組件的方法是盡可能多地從我們的JSX中刪除JavaScript。
讓我們看一下下面的例子:
// src/components/FeaturedPosts.js
import useFetchPosts from '../hooks/useFetchPosts.js';
export default function FeaturedPosts() {
const posts = useFetchPosts()
return (
<ul>
{posts.map((post) => (
<li onClick={event => {
console.log(event.target, 'clicked!');
}} key={post.id}>{post.title}</li>
))}
</ul>
);
}
我們正試圖處理一個(gè)帖子的點(diǎn)擊事件。你可以看到，我們的JSX變得更加難以閱讀。鑒于我們的函數(shù)是作為一個(gè)內(nèi)聯(lián)函數(shù)包含的，它掩蓋了這個(gè)組件的目的，以及它的相關(guān)函數(shù)。
我們能做什么來(lái)解決這個(gè)問(wèn)題呢？我們可以把與onClick相連的內(nèi)聯(lián)函數(shù)提取出來(lái)，變成一個(gè)單獨(dú)的處理程序，我們可以給它一個(gè)合適的名字，如handlePostClick。
一旦我們這樣做，我們的JSX就會(huì)再次變得可讀。
// src/components/FeaturedPosts.js
import useFetchPosts from '../hooks/useFetchPosts.js';
export default function FeaturedPosts() {
const posts = useFetchPosts()
function handlePostClick(event) {
console.log(event.target, 'clicked!');
}
return (
<ul>
{posts.map((post) => (
<li onClick={handlePostClick} key={post.id}>{post.title}</li>
))}
</ul>
);
}
格式化內(nèi)聯(lián)樣式，減少臃腫的代碼
React開(kāi)發(fā)者經(jīng)常會(huì)在他們的JSX中寫內(nèi)聯(lián)樣式。
但是，這使我們的代碼更難閱讀，更難寫出額外的JSX。
// src/App.js
export default function App() {
return (
<main style={{ textAlign: 'center' }}>
<Navbar title="My Special App" />
</main>
);
}
function Navbar({ title }) {
return (
<div style={{ marginTop: '20px' }}>
<h1 style={{ fontWeight: 'bold' }}>{title}</h1>
</div>
)
}
我們想把這種關(guān)注點(diǎn)分離的概念應(yīng)用到我們的JSX樣式中，把我們的內(nèi)聯(lián)樣式移到一個(gè)CSS樣式表中，我們可以把它導(dǎo)入我們喜歡的任何組件。
另一種重寫內(nèi)聯(lián)樣式的方法是將它們組織成對(duì)象。你可以看到這種模式是什么樣子的:
// src/App.js
export default function App() {
const styles = {
main: { textAlign: "center" }
};
return (
<main style={styles.main}>
<Navbar title="My Special App" />
</main>
);
}
function Navbar({ title }) {
const styles = {
div: { marginTop: "20px" },
h1: { fontWeight: "bold" }
};
return (
<div style={styles.div}>
<h1 style={styles.h1}>{title}</h1>
</div>
);
}
合理使用React context
在你的React項(xiàng)目中，另一個(gè)必不可少的模式是使用React Context（特別是如果你有共同的屬性，你想在你的組件中重復(fù)使用，而你發(fā)現(xiàn)自己寫了很多重復(fù)的props）。
例如，如果我們想在多個(gè)組件之間共享用戶數(shù)據(jù)，而不是多個(gè)重復(fù)的props（一種叫做props drilling的模式），我們可以使用React庫(kù)中的context功能。
在我們的例子中，如果我們想在我們的Navbar和FeaturePosts組件中重復(fù)使用用戶數(shù)據(jù)，我們所需要做的就是把我們的整個(gè)應(yīng)用包裹在一個(gè)提供者組件中。
接下來(lái)，我們可以在值prop上傳遞用戶數(shù)據(jù)，并在useContext鉤子的幫助下，在我們的各個(gè)組件中消費(fèi)該上下文。
// src/App.js
import React from "react";
const UserContext = React.createContext();
export default function App() {
const user = { name: "Reed" };
return (
<UserContext.Provider value={user}>
<main>
<Navbar title="My Special App" />
<FeaturedPosts />
</main>
</UserContext.Provider>
);
}
// src/components/Navbar.js
function Navbar({ title }) {
const user = React.useContext(UserContext);
return (
<div>
<h1>{title}</h1>
{user && <a href="/logout">Logout</a>}
</div>
);
}
// src/components/FeaturedPosts.js
function FeaturedPosts() {
const posts = useFetchPosts();
const user = React.useContext(UserContext);
if (user) return null;
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
總結(jié)
我希望當(dāng)你試圖改進(jìn)你自己的React代碼，使其更干凈，更容易閱讀，并最終更愉快地創(chuàng)建你的React項(xiàng)目時(shí)，你會(huì)發(fā)現(xiàn)這個(gè)指南很有用。
最后
面試交流群持續(xù)開(kāi)放，分享了近 許多 個(gè)面經(jīng)。
加我微信: DayDay2021，備注面試，拉你進(jìn)群。
我是 小弋，我們下篇見(jiàn)~
2021-05-26
2021-05-25
2021-05-24
