你可能需要的 React 開發小技巧！

大家好，我是 CUGGZ。

今天來分享 10 個編寫更簡潔 React 代碼的實用小技巧！

1. JSX 簡寫

如何將 true 值傳遞給給定的 props？

在下面的示例中，使用 prop showTitle 在導航欄組件中顯示應用的標題：

export default function App() {
  return (
    <main>
    <Navbar showTitle={true} />
  </main>
);
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>標題</h1>}
    </div>
  )
}

這裏將 showTitle 顯式設置爲布爾值 true，其實這是沒必要的，因爲組件上提供的任何 prop 都具有默認值 true。因此只需要在調用組件時傳遞一個 showTitle 即可：

export default function App() {
  return (
    <main>
      <Navbar showTitle />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>標題</h1>}
    </div>
  )
}

另外，當需要傳遞一個字符串作爲 props 時，無需使用花括號 {} 包裹，可以通過雙引號包裹字符串內容並傳遞即可：

export default function App() {
  return (
    <main>
      <Navbar title="標題" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

2. 將不相關代碼移動到單獨的組件中

編寫更簡潔的 React 代碼的最簡單和最重要的方法就是善於將代碼抽象爲單獨的 React 組件。

下面來看一個例子，應用中最上面會有一個導航欄，並遍歷 posts 中的數據將文章標題渲染出來：

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>
  );
}

那我們怎樣才能讓這段代碼更加清潔呢？我們可以抽象循環中的代碼（文章標題），將它們抽離到一個單獨的組件中，稱之爲 FeaturedPosts。抽離後的代碼如下：

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>
  );
}

如你所見，在 App 組件中，通過其中的組件名稱：Navbar 和 FeaturedPosts，就可以快速地看到應用的作用。

3. 爲每個組件創建單獨的文件

在上面的例子中，我們將三個組件在一個文件中實現。如果組件邏輯較少，這些寫還沒啥問題，但是如果組件邏輯較爲複雜，那這樣寫代碼的可讀性就很差了。爲了使應用文件更具可讀性，可以將每個組件放入一個單獨的文件中。

這可以幫助我們在應用中分離關注點。 這意味着每個文件只負責一個組件，如果想在應用中重用它，就不會混淆組件的來源：

// 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>
  );
}

此外，通過將每個單獨的組件包含在其自己的文件中，可以避免一個文件變得過於臃腫。

4. 將共享函數移動到 React hook 中

在 FeaturedPosts 組件，假設想要從 API 獲取文章數據，而不是使用假數據。可以使用 fetch API 來實現：

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>
  );
}

但是，如果想在多個組件執行這個數據請求怎麼辦？

假設除了 FeaturedPosts 組件之外，還又一個名爲 Posts 的組件，其中包含相同的數據。 我們必須複製用於獲取數據的邏輯並將其粘貼到該組件中。爲了避免重複編寫代碼，可以定義一個新的 React hook，可以稱之爲 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;
}

這樣就可以在任何組件中重用它，包括 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.  從 JSX 中刪除 JS

另一種簡化組件的方式就是從 JSX 中刪除儘可能多的 JavaScript。來看下面的例子：

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>
  );
}

這裏我們嘗試處理文章的點擊事件，可以看到我們的 JSX 變得更加難以閱讀。 鑑於函數是作爲內聯函數包含的，它掩蓋了這個組件的用途，以及它的相關函數。

那該如何來解決這個問題？可以將包含 onClick 的內聯函數提取到一個單獨的處理函數中，給它一個名稱 handlePostClick。這樣 JSX 的可讀性就變高了：

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. 格式化內聯樣式

在 JSX 中編寫過多的內聯樣式就會讓代碼更難閱讀並且變得臃腫：

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>
  )
}

我們要儘可能地將內聯樣式移動到 CSS 樣式表中。或者將它們組織成對象：

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>
  );
}

一般情況下，最好將這些樣式寫在 CSS 樣式表中，如果樣式需要動態生成，可以將其定義在一個對象中。

7. 使用可選鏈運算符

在 JavaScript 中，我們需要首先確保對象存在，然後才能訪問它的屬性。如果對象的值爲 undefined 或者 null，則會導致類型錯誤。

下面來看一個例子，用戶可以在其中編輯他們發佈的帖子。只有當 isPostAuthor 爲 true 時，也就是經過身份驗證的用戶的 id 與帖子作者的 id 相同時，纔會顯示該 EditButton 組件。

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>
  );
}

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/5vjCLn9Bu2SJsrhKIr2WOA