Jadual Kandungan
1. Singkatan JSX
2. Alihkan kod yang tidak berkaitan ke komponen yang berasingan
3. Cipta fail berasingan untuk setiap komponen
4. Alihkan fungsi kongsi ke dalam React hook
5 Alih keluar JS daripada JSX
6 Memformat gaya sebaris
7. Menggunakan operator rantaian pilihan
8. 带括号的隐式返回
9. 使用空值合并运算符
10. 使用三元表达式
Rumah hujung hadapan web tutorial js 10 petua praktikal untuk menulis kod React yang lebih bersih

10 petua praktikal untuk menulis kod React yang lebih bersih

Jan 03, 2023 pm 08:18 PM
javascript hujung hadapan react.js

Artikel ini akan berkongsi dengan anda 10 petua praktikal untuk menulis kod React yang lebih mudah saya harap ia akan membantu anda!

10 petua praktikal untuk menulis kod React yang lebih bersih

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>
  )
}
Salin selepas log masuk

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>
  )
}
Salin selepas log masuk

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>
  )
}
Salin selepas log masuk

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>
  );
}
Salin selepas log masuk

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>
  );
}
Salin selepas log masuk

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 &#39;./components/Navbar.js&#39;;
import FeaturedPosts from &#39;./components/FeaturedPosts.js&#39;;

export default function App() {
  return (
    <main>
      <Navbar title="大标题" />
      <FeaturedPosts />
    </main>
  );
}
Salin selepas log masuk
// src/components/Navbar.js
export default function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}
Salin selepas log masuk
// 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>
  );
}
Salin selepas log masuk

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 &#39;react&#39;;

export default function FeaturedPosts() {
  const [posts, setPosts] = React.useState([]); 	
    
  React.useEffect(() => {
    fetch(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
Salin selepas log masuk

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 &#39;react&#39;;

export default function useFetchPosts() {
  const [posts, setPosts] = React.useState([]); 	
    
  React.useEffect(() => {
    fetch(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return posts;
}
Salin selepas log masuk

Dengan cara ini anda boleh menggunakannya semula dalam mana-mana komponen, termasuk komponen FeaturedPosts:

import useFetchPosts from &#39;../hooks/useFetchPosts.js&#39;;

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
Salin selepas log masuk

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 &#39;../hooks/useFetchPosts.js&#39;;

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={event => {
          console.log(event.target, &#39;clicked!&#39;);
        }} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
Salin selepas log masuk

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 &#39;../hooks/useFetchPosts.js&#39;;

export default function FeaturedPosts() {
  const posts = useFetchPosts()
  
  function handlePostClick(event) {
    console.log(event.target, &#39;clicked!&#39;);   
  }

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={handlePostClick} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
Salin selepas log masuk

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: &#39;center&#39; }}>
      <Navbar title="大标题" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: &#39;20px&#39; }}>
      <h1 style={{ fontWeight: &#39;bold&#39; }}>{title}</h1>
    </div>
  )
}
Salin selepas log masuk

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>
  );
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

这段代码的问题是 user 可能是 undefined. 这就是为什么我们必须在尝试获取 userId 属性之前使用 && 运算符来确保 user 是一个对象。如果我要访问一个对象中的另一个对象,就不得不再包含一个 && 条件。 这会导致代码变得复杂、难以理解。

JavaScript 可选链运算符(?.)允许我们在访问属性之前检查对象是否存在。用它来简化上面的代码:

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user?.userId;
    
  return isPostAuthor ? <EditButton /> : null;
}
Salin selepas log masuk

这样将防止任何类型错误,并允许我们编写更清晰的条件逻辑。

8. 带括号的隐式返回

在 React 应用中可以使用 function 关键字的函数声明语法编写组件,也可以使用设置为变量的箭头函数。使用 function 关键字的组件必须在返回任何 JSX 之前使用 return 关键字。

export default function App() {
  return (
    <Layout>
      <Routes />
    </Layout>
  );
}
Salin selepas log masuk

通过将返回的代码包裹在一组括号中,可以通过隐式返回(不使用 return 关键字)从函数返回多行 JavaScript 代码。

对于使用箭头函数的组件,不需要包含 return 关键字,可以只返回带有一组括号的 JSX。

const App = () => (
  <Layout>
    <Routes />
  </Layout>
);

export default App;
Salin selepas log masuk

此外,当使用 .map() 迭代元素列表时,还可以跳过 return 关键字并仅在内部函数的主体中使用一组括号返回 JSX。

function PostList() {
  const posts = usePostData();  
    
  return posts.map(post => (
    <PostListItem key={post.id} post={post} />  
  ))
}
Salin selepas log masuk

9. 使用空值合并运算符

在 JavaScript 中,如果某个值是假值(如 null、undefined、0、''、NaN),可以使用 || 条件来提供一个备用值。

例如,在产品页面组件需要显示给定产品的价格,可以使用 || 来有条件地显示价格或显示文本“产品不可用”。

export default function ProductPage({ product }) {    
  return (
     <>
       <ProductDetails />
       <span>
          {product.price || "产品不可用"}
       </span>
     </>
  );
}
Salin selepas log masuk

现有的代码存在一个问题,如果商品的价格为0,也不会显示产品的价格而显示"产品不可用"。如果左侧为null或者undefined,而不是其他假值,就需要一个更精确的运算符来仅返回表达式的右侧。

这时就可以使用空值合并运算符,当左侧操作数为null或者 undefined 时,将返回右侧操作数。 否则它将返回其左侧操作数:

null ?? &#39;callback&#39;;
// "callback"

0 ?? 42;
// 0
Salin selepas log masuk

可以使用空值合并运算符来修复上面代码中的问题:

export default function ProductPage({ product }) {    
  return (
     <>
       <ProductDetails />
       <span>{product.price ?? "产品不可用"}
     </>
  );
}
Salin selepas log masuk

10. 使用三元表达式

在 React 组件中编写条件时,三元表达式是必不可少的,经常用于显示或隐藏组件和元素。

当然,我们用可以使用三元表达式和模板字符串来给 React 元素动态添加或删除类名。

export default function App() {
  const { isDarkMode } = useDarkMode();
    
  return (
    <main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}>
      <Routes />
    </main>
  );
}
Salin selepas log masuk

这种条件逻辑也可以应用于任何 props:

export default function App() {
  const { isMobile } = useDeviceDetect();
    
  return (
    <Layout height={isMobile ? &#39;100vh&#39; : &#39;80vh&#39;}>
      <Routes />
    </Layout>
  );
}
Salin selepas log masuk

【推荐学习: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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

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 PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Mar 16, 2024 pm 12:09 PM

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.

Soalan yang sering ditanya oleh penemuduga front-end Soalan yang sering ditanya oleh penemuduga front-end Mar 19, 2024 pm 02:24 PM

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 Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

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 JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

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

Adakah Django bahagian hadapan atau belakang? semaklah! Adakah Django bahagian hadapan atau belakang? semaklah! Jan 19, 2024 am 08:37 AM

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 ESM modular bahagian hadapan? Apakah ESM modular bahagian hadapan? Feb 25, 2024 am 11:48 AM

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

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

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

See all articles