10 petua praktikal untuk menulis kod React yang lebih bersih
Artikel ini akan berkongsi dengan anda 10 petua praktikal untuk menulis kod React yang lebih mudah saya harap ia akan membantu anda!
1. Singkatan JSX
Bagaimana untuk menghantar nilai sebenar kepada prop yang diberikan? [Cadangan berkaitan: Tutorial video Redis, Video pengaturcaraan]
Dalam contoh berikut, prop showTitle
digunakan untuk memaparkan tajuk aplikasi dalam navigasi komponen bar:
export default function App() { return ( <main> <Navbar showTitle={true} /> </main> ); } function Navbar({ showTitle }) { return ( <div> {showTitle && <h1>标题</h1>} </div> ) }
Di sini showTitle
ditetapkan secara eksplisit kepada nilai boolean true
, yang tidak diperlukan kerana mana-mana prop
yang disediakan pada komponen akan mempunyai nilai lalai true
. Oleh itu, anda hanya perlu menghantar showTitle
apabila memanggil komponen:
export default function App() { return ( <main> <Navbar showTitle /> </main> ); } function Navbar({ showTitle }) { return ( <div> {showTitle && <h1>标题</h1>} </div> ) }
Selain itu, apabila anda perlu menghantar rentetan sebagai props
, tidak perlu menggunakan pendakap kerinting {}
untuk membungkusnya, anda boleh menghantarnya melalui dua kali ganda Hanya balut kandungan rentetan dalam petikan dan hantarkannya:
export default function App() { return ( <main> <Navbar title="标题" /> </main> ); } function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ) }
2. Alihkan kod yang tidak berkaitan ke komponen yang berasingan
Tulis kod React yang lebih ringkas Cara paling mudah dan paling penting ialah pandai mengabstrakkan kod anda ke dalam komponen React yang berasingan.
Mari kita lihat contoh akan terdapat bar navigasi di bahagian atas aplikasi dan data dalam posts
akan dilalui untuk menjadikan tajuk artikel:
export default function App() { const posts = [ { id: 1, title: "标题1" }, { id: 2, title: "标题2" } ]; return ( <main> <Navbar title="大标题" /> <ul> {posts.map(post => ( <li key={post.id}> {post.title} </li> ))} </ul> </main> ); } function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ); }
Jadi bagaimana kita boleh membuatnya Adakah kod ini lebih bersih? Kita boleh mengabstrakkan kod dalam gelung (tajuk artikel) ke dalam komponen yang berasingan dan memanggilnya FeaturedPosts
. Kod yang diekstrak adalah seperti berikut:
export default function App() { return ( <main> <Navbar title="大标题" /> <FeaturedPosts /> </main> ); } function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ); } function FeaturedPosts() { const posts = [ { id: 1, title: "标题1" }, { id: 2, title: "标题2" } ]; return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
Seperti yang anda lihat, dalam komponen Apl, melalui nama komponen: Navbar
dan FeaturedPosts
, anda boleh melihat peranan aplikasi dengan cepat.
3. Cipta fail berasingan untuk setiap komponen
Dalam contoh di atas, kami melaksanakan tiga komponen dalam satu fail. Jika logik komponen kecil, tiada masalah dalam menulis ini Namun, jika logik komponen lebih kompleks, kebolehbacaan kod yang ditulis dengan cara ini akan menjadi sangat lemah. Untuk menjadikan fail apl anda lebih mudah dibaca, letakkan setiap komponen ke dalam fail yang berasingan.
Ini membantu kami memisahkan kebimbangan dalam permohonan kami. Ini bermakna setiap fail bertanggungjawab untuk hanya satu komponen, jadi jika anda ingin menggunakannya semula dalam aplikasi anda, anda tidak akan mengelirukan sumber komponen:
// src/App.js import Navbar from './components/Navbar.js'; import FeaturedPosts from './components/FeaturedPosts.js'; export default function App() { return ( <main> <Navbar title="大标题" /> <FeaturedPosts /> </main> ); }
// src/components/Navbar.js export default function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ); }
// src/components/FeaturedPosts.js export default function FeaturedPosts() { const posts = [ { id: 1, title: "标题1" }, { id: 2, title: "标题2" } ]; return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
Selain itu , dengan meletakkan Mengandungi komponen dalam fail mereka sendiri menghalang satu fail daripada menjadi terlalu kembung.
4. Alihkan fungsi kongsi ke dalam React hook
Dalam komponen FeaturedPosts, katakan anda ingin mendapatkan data siaran daripada API dan bukannya menggunakan data palsu. Anda boleh menggunakan API pengambilan untuk mencapai ini:
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> ); }
Tetapi bagaimana jika anda mahu melaksanakan permintaan data ini pada berbilang komponen?
Andaikan bahawa sebagai tambahan kepada komponen FeaturedPosts, terdapat satu lagi komponen bernama Posts yang mengandungi data yang sama. Kita perlu menyalin logik untuk mendapatkan data dan menampalnya ke dalam komponen. Untuk mengelakkan kod pendua, anda boleh menentukan cangkuk React baharu, yang anda boleh panggil useFetchPosts:
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; }
Dengan cara ini anda boleh menggunakannya semula dalam mana-mana komponen, termasuk komponen FeaturedPosts:
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> ); }
5 Alih keluar JS daripada JSX
Cara lain untuk memudahkan komponen anda ialah mengalih keluar JavaScript sebanyak mungkin daripada JSX. Lihat contoh berikut:
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> ); }
Di sini kami cuba mengendalikan acara klik artikel itu, dan anda dapat melihat bahawa JSX kami menjadi lebih sukar untuk dibaca. Memandangkan fungsi itu disertakan sebagai fungsi sebaris, ia mengaburkan tujuan komponen ini dan fungsi berkaitannya.
Bagaimana untuk menyelesaikan masalah ini? Anda boleh mengekstrak fungsi sebaris yang mengandungi onClick ke dalam fungsi pengendali yang berasingan dan memberikannya nama handlePostClick. Dengan cara ini, kebolehbacaan JSX menjadi lebih tinggi:
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> ); }
6 Memformat gaya sebaris
Menulis terlalu banyak gaya sebaris dalam JSX akan Menjadikan kod lebih sukar untuk dilakukan. dibaca dan kembung:
export default function App() { return ( <main style={{ textAlign: 'center' }}> <Navbar title="大标题" /> </main> ); } function Navbar({ title }) { return ( <div style={{ marginTop: '20px' }}> <h1 style={{ fontWeight: 'bold' }}>{title}</h1> </div> ) }
Kami mahu mengalihkan gaya sebaris ke dalam helaian gaya CSS apabila boleh. Atau susunkannya ke dalam objek:
export default function App() { const styles = { main: { textAlign: "center" } }; return ( <main style={styles.main}> <Navbar title="大标题" /> </main> ); } function Navbar({ title }) { const styles = { div: { marginTop: "20px" }, h1: { fontWeight: "bold" } }; return ( <div style={styles.div}> <h1 style={styles.h1}>{title}</h1> </div> ); }
Secara amnya, adalah lebih baik untuk menulis gaya ini dalam helaian gaya CSS Jika gaya perlu dijana secara dinamik, ia boleh ditakrifkan dalam objek.
7. Menggunakan operator rantaian pilihan
Dalam JavaScript, kita perlu terlebih dahulu memastikan objek wujud sebelum kita boleh mengakses sifatnya. Jika nilai objek tidak ditentukan atau batal, ralat jenis akan terhasil.
Berikut ialah contoh di mana pengguna boleh mengedit siaran mereka yang diterbitkan. Komponen EditButton hanya akan dipaparkan jika isPostAuthor adalah benar, iaitu, jika id pengguna yang disahkan adalah sama dengan id pengarang siaran.
export default function EditButton({ post }) { const user = useAuthUser(); const isPostAuthor = post.author.userId !== user && user.userId; return isPostAuthor ? <EditButton /> : null; }
这段代码的问题是 user 可能是 undefined. 这就是为什么我们必须在尝试获取 userId 属性之前使用 && 运算符来确保 user 是一个对象。如果我要访问一个对象中的另一个对象,就不得不再包含一个 && 条件。 这会导致代码变得复杂、难以理解。
JavaScript 可选链运算符(?.)允许我们在访问属性之前检查对象是否存在。用它来简化上面的代码:
export default function EditButton({ post }) { const user = useAuthUser(); const isPostAuthor = post.author.userId !== user?.userId; return isPostAuthor ? <EditButton /> : null; }
这样将防止任何类型错误,并允许我们编写更清晰的条件逻辑。
8. 带括号的隐式返回
在 React 应用中可以使用 function 关键字的函数声明语法编写组件,也可以使用设置为变量的箭头函数。使用 function 关键字的组件必须在返回任何 JSX 之前使用 return 关键字。
export default function App() { return ( <Layout> <Routes /> </Layout> ); }
通过将返回的代码包裹在一组括号中,可以通过隐式返回(不使用 return 关键字)从函数返回多行 JavaScript 代码。
对于使用箭头函数的组件,不需要包含 return 关键字,可以只返回带有一组括号的 JSX。
const App = () => ( <Layout> <Routes /> </Layout> ); export default App;
此外,当使用 .map()
迭代元素列表时,还可以跳过 return
关键字并仅在内部函数的主体中使用一组括号返回 JSX。
function PostList() { const posts = usePostData(); return posts.map(post => ( <PostListItem key={post.id} post={post} /> )) }
9. 使用空值合并运算符
在 JavaScript 中,如果某个值是假值(如 null、undefined、0、''、NaN),可以使用 || 条件来提供一个备用值。
例如,在产品页面组件需要显示给定产品的价格,可以使用 || 来有条件地显示价格或显示文本“产品不可用”。
export default function ProductPage({ product }) { return ( <> <ProductDetails /> <span> {product.price || "产品不可用"} </span> </> ); }
现有的代码存在一个问题,如果商品的价格为0,也不会显示产品的价格而显示"产品不可用"。如果左侧为null
或者undefined
,而不是其他假值,就需要一个更精确的运算符来仅返回表达式的右侧。
这时就可以使用空值合并运算符,当左侧操作数为null或者 undefined 时,将返回右侧操作数。 否则它将返回其左侧操作数:
null ?? 'callback'; // "callback" 0 ?? 42; // 0
可以使用空值合并运算符来修复上面代码中的问题:
export default function ProductPage({ product }) { return ( <> <ProductDetails /> <span>{product.price ?? "产品不可用"} </> ); }
10. 使用三元表达式
在 React 组件中编写条件时,三元表达式是必不可少的,经常用于显示或隐藏组件和元素。
当然,我们用可以使用三元表达式和模板字符串来给 React 元素动态添加或删除类名。
export default function App() { const { isDarkMode } = useDarkMode(); return ( <main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}> <Routes /> </main> ); }
这种条件逻辑也可以应用于任何 props:
export default function App() { const { isMobile } = useDeviceDetect(); return ( <Layout height={isMobile ? '100vh' : '80vh'}> <Routes /> </Layout> ); }
【推荐学习:javascript视频教程】
Atas ialah kandungan terperinci 10 petua praktikal untuk menulis kod React yang lebih bersih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Dalam era perkembangan pesat Internet hari ini, pembangunan bahagian hadapan telah menjadi semakin penting. Memandangkan pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk pengalaman tapak web dan aplikasi, pembangun bahagian hadapan perlu menggunakan alat yang lebih cekap dan fleksibel untuk mencipta antara muka yang responsif dan interaktif. Sebagai dua teknologi penting dalam bidang pembangunan bahagian hadapan, PHP dan Vue.js boleh dianggap sebagai alat yang sempurna apabila digandingkan bersama. Artikel ini akan meneroka gabungan PHP dan Vue, serta contoh kod terperinci untuk membantu pembaca memahami dan menggunakan kedua-dua ini dengan lebih baik.

Dalam temu bual pembangunan bahagian hadapan, soalan lazim merangkumi pelbagai topik, termasuk asas HTML/CSS, asas JavaScript, rangka kerja dan perpustakaan, pengalaman projek, algoritma dan struktur data, pengoptimuman prestasi, permintaan merentas domain, kejuruteraan bahagian hadapan, corak reka bentuk, dan teknologi dan trend baharu. Soalan penemuduga direka bentuk untuk menilai kemahiran teknikal calon, pengalaman projek dan pemahaman tentang trend industri. Oleh itu, calon harus bersedia sepenuhnya dalam bidang ini untuk menunjukkan kebolehan dan kepakaran mereka.

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Django ialah rangka kerja aplikasi web yang ditulis dalam Python yang menekankan pembangunan pesat dan kaedah bersih. Walaupun Django ialah rangka kerja web, untuk menjawab soalan sama ada Django ialah front-end atau back-end, anda perlu mempunyai pemahaman yang mendalam tentang konsep front-end dan back-end. Bahagian hadapan merujuk kepada antara muka yang pengguna berinteraksi secara langsung, dan bahagian belakang merujuk kepada program bahagian pelayan Mereka berinteraksi dengan data melalui protokol HTTP. Apabila bahagian hadapan dan bahagian belakang dipisahkan, program bahagian hadapan dan bahagian belakang boleh dibangunkan secara bebas untuk melaksanakan logik perniagaan dan kesan interaktif masing-masing, dan pertukaran data.

Apakah itu ESM bahagian hadapan? Contoh kod khusus diperlukan Dalam pembangunan bahagian hadapan, ESM merujuk kepada ECMAScriptModules, kaedah pembangunan modular berdasarkan spesifikasi ECMAScript. ESM membawa banyak faedah, seperti organisasi kod yang lebih baik, pengasingan antara modul dan kebolehgunaan semula. Artikel ini akan memperkenalkan konsep asas dan penggunaan ESM dan menyediakan beberapa contoh kod khusus. Konsep asas ESM Dalam ESM, kita boleh membahagikan kod kepada berbilang modul, dan setiap modul mendedahkan beberapa antara muka untuk modul lain kepada

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
