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, &#39;clicked!&#39;);
        }} 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: &#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>
  )
}

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 ? &#39;100vh&#39; : &#39;80vh&#39;}>
      <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!