10 個編寫更簡潔React程式碼的實用小技巧

這篇文章為大家整理分享 10 個寫更簡潔 React 程式碼的實用小技巧，希望對大家有幫助！

1. JSX 簡寫

如何將 true 值傳遞給給定的 props？ 【相關建議：Redis影片教學、程式影片】

在下面的範例中，使用prop showTitle# 在導覽列元件中顯示應用的標題：

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

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1 id="标题">标题</h1>}
    </div>
  )
}

這裡將showTitle 明確設定為布林值true，其實這是沒必要的，因為元件上提供的任何 prop 都具有預設值true。因此只需要在呼叫元件時傳遞一個showTitle 即可：

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

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1 id="标题">标题</h1>}
    </div>
  )
}

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

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

function Navbar({ title }) {
  return (
    <div>
      <h1 id="title">{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 id="title">{title}</h1>
    </div>
  );
}

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

export default function App() {
 return (
    <main>
      <Navbar title="大标题" />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1 id="title">{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 id="title">{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, &#39;clicked!&#39;);
        }} 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: &#39;center&#39; }}>
      <Navbar title="大标题" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: &#39;20px&#39; }}>
      <h1 id="title">{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 id="title">{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 ? &#39;100vh&#39; : &#39;80vh&#39;}>
      <Routes />
    </Layout>
  );
}

【推荐学习：javascript视频教程】

以上是10 個編寫更簡潔React程式碼的實用小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！