🤚

在React中過度使用<div>的問題及其他常用HTML標籤的介紹

に公開
React
HTML 5
tech

前言

作為一個前端新手有點太過依賴 <div> 了，所以這篇文章會說說在 React 中太過使用<div> 會有的一些問題，再來介紹其他會用的 HTML tag。

在 React 中 使用 <div> 的優缺點？

缺點

  1. 會在 DOM 中產生不必要的節點。
import "./styles.css";

export default function App() {
  const hasActiveSubscription = true;
  return (
    <div className="buttonContainer">
      <button>Vince</button>
      <div>
        <button>Chandler</button>
        <button>Monkey</button>
      </div>
    </div>
  );
}

截圖 2023-08-21 上午10.34.38.png

  1. 特定情況會發生錯誤。
    • 比如在繪製 table 表格 的時候，像以下程式碼提供的例子，會造成 <tr> 有子元素 <div> 這樣的 HTML 錯誤結構。
export default function App() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

優點

  1. 使用 <React.Fragment> 會直接返回一組元素，不會再產生如上圖所示的不必要 DOM 節點。
  2. 增加效能。
  3. 清晰、好閱讀的結構。

使用方式

  1. 可以簡寫成 <>…</> 的方式，差別在於 <React.Fragment> 可以加入 key attributes。
  2. 也可以單純用 <Fragment>
    • import {Fragment} from ‘react’;

使用 Semantic tags 的理由？

  1. 清晰的程式碼，使得結構更為清楚。
  2. 增加 SEO 效能。

常用的 Semantic tags

<body>

內有 <header> , <main> & <footer>，這三個部分可以分別打包成 Component。

<header>

  • <nav> 導航列
  • <ul> 無序 & <ol> 有序
    • <li>
  • <Link> 像是 HTML 的 <a> ，點擊後會轉跳為 to 後面輸入的 location 。

<main>

段落

  • <section> 段落 & <div>
    • <section> 跟 <div> 不同的地方在於在 <section> 裡面的東西是互相有關連的。
  • <article> 主要文章
  • <aside> 非主文的側欄

輸入

  • <textarea />
  • <input />

圖片

  • <img>
    • title 鼠標停留在圖片上的提示文字
    • alt 圖片連結失效的替代文字

文字

  • <figcaption> 圖片的說明文字
  • <p>
  • <span> 是inline 的性質，可以寫在 <p> 內，用來做區塊內的細部變化。
  • <em> 斜體
  • <strong> 粗體

連結

  • <a>
    • 連結
      • href 填網址
      • target
        • _self 在同一個頁面跳轉
        • _blank 另開網頁
    • 錨點
      • href 填 #id，可以用來轉跳到某個 tag 上。

其他

  • <video> 影片
  • <audio> 聲音
  • <code> 程式碼
  • <time> 時間相關
  • <br /> 換行
  • <hr /> 分隔線

文章參考

[進階指南] Fragments（ Day23 ）

React Fragment（by Fooish 程式技術）

[第六週] HTML - tag 基礎標籤介紹

Stop using div in React (+ Fragment, Semantic Tags)

Discussion