部落格

不定期分享技術文章

  • article-Day 26 React 的多重渲染-列表與 Key

    2023/10/10

    React JavaScript
    Day 26 React 的多重渲染-列表與 Key

    在 react 使用遍歷陣列的方法來呈現畫面是挺常見的，我們今天想要呈現一個陣列裡面的資料如下:

      const tasks = [
    { id: 1, text: "看完 React的文件 " },
    { id: 2, text: "寫一篇部落格文章" },
    { id: 3, text: "學習 JavaScript" },
  ];

    基本上我們不可能一個一個複製貼上，所以會利用 JSX 的 JavaScript 方法，去讀取資料並呈現畫面，有點像是 PHP 那樣的感覺。看範例寫法如下:

    function App() {
  const tasks = [
    {id: 1, text: "看完 React的文件 "},
    {id: 2, text: "寫一篇部落格文章"},
    {id: 3, text: "學習 JavaScript"},
  ];

  return (
    <div>
      <h1>我的任務清單</h1>
      <ul>
        &#123;tasks.map((task) => (
          <li key=&#123;task.id&#125;>&#123;task.text&#125;</li>
        ))&#125;
      </ul>
    </div>
  );
&#125;
export default App;

    上面的範例是使用 map 的方法，不過這裡使用 forEach 也可以，差異是 map 會回傳新陣列但是 forEach 不會，至於 React 中為什麼會慣用 map 的原因與 hook 中的 useState 有關，這裡就先不多做贅述。

    key 值的作用

    仔細看上述的程式碼，會發現與正常遍歷陣列的方法不同的是多了一個 Key 值，它的作用是讓 react 能區別每一筆資料，雖然如果不給 key 值 react 會預設 index 當作 key 值，但是這不是一個好的寫法，因為可能會產生不穩定性(像是在對陣列操作增加、刪除之類的)，造成渲染畫面的不確定性。

    所以設定 key 值需要注意以下條件: 1.唯一性 2.必須從外部設定，不要再遍歷函示產生 3.不能隨意地被改變

    總結

    以上就是渲染陣列物件基本的方法，而且會與後續在使用 Hook 的順暢度會有直接的關係。

    參考資料

    React 官方網站

  • article-Day 25 React 的選擇渲染-JSX 與條件控制的關係

    2023/10/8

    React JavaScript
    Day 25 React 的選擇渲染-JSX 與條件控制的關係

    說到 JavaScript 的流程控制大家很容易聯想到 if…else…或是三元運算子，在 JSX 裡面可以利用這些流程控制來選選擇性的呈現想要渲染的畫面。

    官網分別介紹三種:
    1.if..else 2.三元運算子(條件式 ? True 的結果 :False 的結果) 3.邏輯運算子(&&)

    用 if…else..控制元件出現

    這我相信能看到這裡的，大家都對這個語法很熟，但在 React 寫法就變成下面這樣，如果 number=”A”就會 return 並渲染 “AAA”，除此之外會 return 並渲染 “BBB”。

    export default function App() &#123;
  let number = "123";

  if (number === "A") &#123;
    return (
      <>
        <h1>AAA</h1>
      </>
    );
  &#125; else &#123;
    return (
      <>
        <h1>BBB</h1>
      </>
    );
  &#125;
&#125;

    條件運算子

    ES6 的語法，簡單來說就是 if else 的簡化版，但是略有些差異以及特性，這裡就不先多提，因為在這裡兩者幾乎是等效的。
    它由一個?和:組成基本架構如下:

    條件式 ? 條件式為真要輸出的結果 : 條件式為假的時候要輸出的結果;

    如果更改上述的範例為三元運算子的寫法如下:

    export default function App() {
  let number = "A";
  return number === "A" ? <h1>AAA</h1> : <h1>BBB</h1>;
}

    或是這樣

    export default function App() {
  let number = "A";
  return (
  <>
  {number === "A" ? <h1>AAA</h1> : <h1>BBB</h1>}
  </>
  )

    看起來更為簡單一點，可是在對於剛接觸的人比較不容易閱讀，要注意的一點

    三元運算子是運算子它不是陳述式所以可以寫在 jsx 的{}裡，但是 if…else 則不行

    邏輯運算子(&&)

    這部分的寫法就更為簡單一點，但是適用的情況也不太一樣，比較適用決定是否要呈現元件，而不是選擇性呈現，寫法如下

    export default function App() {
  return <>{true && <h1>AAA</h1>} </>;
}

    總結

    雖然這三種寫法都是在做元件的選擇性渲染，但其實每一種方法適用的情境略有不同，需要依照適合的狀況，選擇適合的寫法:

    • 使用 if…else 時，可以處理較複雜的條件邏輯。
    • 三元運算子 提供了簡潔的寫法，適用於簡單的條件選擇。
    • 邏輯運算子 (&&) 適合單一條件，不需要額外 else 或 return null。

    參考資料

    React 官方網站

  • article-Day 23 React 中的 JavaScript

    2023/10/7

    React JavaScript
    Day 23 React 中的 JavaScript

    今天要介紹的是 JSX 重要的部分，就是如何在 JSX 中寫 JavaScript，其實很理所當然的 JSX 來就是 JavaScript，所以能寫 JavaScript 是一件蠻合理的一件事情，但依然有些規則需要遵守。接下來就依序來介紹吧!

    1.使用大括號{}處理 Javascript

    (1) 像是變數或是函式都可以在大括號裡被使用舉例如下:

    function App() &#123;
  const name = "AAA";

  return (
    <>
      <p>My name is &#123;name&#125; </p>
    </>
  );
&#125;

export default App;

    (2) 大括號的使用範圍

    • 標籤內的文本
    <p>My name is &#123;name&#125; </p>
    • 在=後面的屬性
    <src=&#123;picture&#125; img/>//pictrue可能為一個變數

    2.使用 CSS inline styles

    需要使用兩層大括號，第一層是 JSX 要使用 JavaScript 規定的;第二層是因為 inline styles 被當作一個物件傳遞所以有大括號

    <p style=&#123;&#123;color: "white", backgroundColor: "black"&#125;&#125;>My name is &#123;name&#125; </p>

    3.在大括弧中放表達式，不能陳述式

    首先來複習一下什麼式表達式，可回傳一個結果的程式片斷就是一個表達式簡單來說，下列就是一個表達式，因為 console.log 會回傳 3

    1 + 2;

    為什麼會突然提這個呢?因為常用流程控制 if else 就是陳述式，所以這樣寫會報錯的喔!下面就是一個很經典的例子，這裡先留一個梗後續的文章會在說明，簡單來說三元運算子不是陳述式。

    • 錯誤示範
    function App() &#123;
  const a = "true";
  const b ="false"
const judge = true;
  return (
    <>
      &#123;if(judge)&#123;
        &#123;a&#125;
      &#125;else&#123;
        &#123;b&#125;
      &#125;&#125;
    </>
  );
&#125;
export default App;
    • 正確示範
    function App() &#123;
  const a = "true";
  const b = "false";
  const judge = true;

  return <>&#123;judge ? a : b&#125;</>;
&#125;

export default App;

    總結

    今天的重點其實很簡單，要寫 JavaScript 就在{}裡面寫就對了，但不能寫陳述式。

  • article-Day 24 React 的橋樑-Prpos

    2023/10/7

    React JavaScript
    Day 24 React 的橋樑-Prpos

    Day24 React 的橋樑-Prpos

    Props 是一個元件之間傳遞資料的手段，它其實有點像是 HTML 標籤的屬性，實際上很多像是 HTML 標籤的屬性也被預設為 Props，例如 img 標籤的 src,alt 等等，但也可以自定義，有點像是 data-set 那樣，接下來就開始今天的主題吧!

    Props 的特性

    1.只能允許單向資料流

    簡單來說就是只能從父元件傳到子元件，要從子元件傳回去需要用其它特殊方法

    2.資料類型為物件

    3.不可被元件本身自己改變

    4.但可以被父元件改變

    5.可以自訂預設值，父元件如果沒給定值會自行套用

    範例

    1.將 props 傳給子元件

    <Child test="AAA" num=&#123;100&#125; />

    2.在子元件讀取傳遞的值

    Child(&#123;test, num&#125;);

    3.可以自訂預設參數

    <Child test="AAA" num=&#123;100&#125; />

    總結程式

    父元件

    import Child from "./child";

export default function Parent() &#123;
  return (
    <>
      <h2>啟用預設值</h2>
      <Child />
      <h2>父元件改變props</h2>
      <Child test="AAA" num=&#123;100&#125; />
    </>
  );
&#125;

    子元件

    export default function Child(&#123; test = "BBB", num = 10//自訂預設值&#125;) &#123;
  return (
    <>
      <h4>Child</h4>
      <p>text: &#123;test&#125;</p>
      <p>num: &#123;num&#125;</p>
    </>
  );
&#125;

    props 傳遞參數的解構賦值

    事實上，上述的範例已經也在使用了，在一開始就提到 Props 是一個物件，如果照最原始的寫法應該如下，所以重頭到尾都只傳遞一個名為 props 物件的參數而已。

    export default function Child(props) &#123;
  return (
    <>
      <h4>Child</h4>
      <p>text: &#123;props.test&#125;</p>
      <p>num: &#123;props.num&#125;</p>
    </>
  );
&#125;

    ESLint 處理

    PS:如果遇到”is missing in props validation”
    在.eslintrc.cjs 的 rules 加上下面這段

    "react/prop-types": "off",

    總結

    props 使用起來蠻直覺的，但是有其限制所在，如果需要更進一步的活用，要了解更後面的內容包刮 Hook 之類的內容，基本上在這著系列應該沒有什麼機會介紹到，畢竟是入門向的文章，如果有機會後續再作補充，明天就會介紹到比較偏向實作的內容了。

    參考資料

    React 官方網站

  • article-Day 22 React 的語法-JSX

    2023/10/6

    React JavaScript
    Day 22 React 的語法-JSX

    JSX 為 React 的語法，簡單的來說就是可以使用 JavaScript 來撰寫 HTML 標籤，然而官方文件也有提到，不用 JSX 也是可以，但多數的 React 開發者鑑於 JSX 便利性還是會選擇 JSX 語法，事實上也是如此 JSX 帶給我們許多方便的體驗，但相對的需要遵守一些規則。

    JSX 的規則

    1. JSX 的語法最外層只能有一個根元素

    這部份昨天也有稍微提到了，原因是因為到底 JSX 還是 JavaScript，而一個函式只能傳回一個東西而已。就像下面的例子，在怎麼樣複雜最外面一層等只會有一個根元素，通常是 div 標籤或是<></>(Fragment)

    <>
  <p>
    <ul>
      <li>132</li>
      <li>132</li>
      <li>123</li>
    </ul>
  </p>
  <p>
    <ul>
      <li>123</li>
      <li>123</li>
      <li>132</li>
    </ul>
  </p>
</>

    2.標籤需要自閉合

    說穿了就是在只有單一標籤的後方加上/這樣舉例如下:

    <img/>
<br/>
<input/>

    3.使用小駝峰式命名給標籤的屬性名稱，舉例如下的 className

    <img src=&#123;reactLogo&#125; className="logo react" alt="React logo" />

    Note:

    因為 class 為保留字，所以在 JSX 中 class 就寫成className;同理 for 寫成htmlFor

    4.布林值,null,undefined 不會被渲染

    <>
  不會被渲染
  <div></div>
  <div>&#123;false&#125;</div>
  <div>&#123;null&#125;</div>
  <div>&#123;undefined&#125;</div>
</>

    5.元件事件處理函式需要小駝峰

    <button onClick=&#123;&#125;><button>

    懶人包

    1.元件裡的最外層要長這樣子<></>

    return <>加小括弧是避免有自動加;出現</>;

    2.單標籤自閉合 3.小駝峰命名

    總結

    JSX 看似很囉唆但是裡面的每個規則都有相對的道理在，如果能去理解其實這些規則就相對應的記起來了。

    預告一下，明日就是介紹如何在 JSX 寫 JavaScript 囉~

    參考資料

    React 官方網站

  • article-Day 21 React 的元件形式

    2023/10/5

    React JavaScript
    Day 21 React 的元件形式

    元件(component)是 React 主要關鍵組成之一，它是一個可以被反覆利用的 UI 元素，不過說穿了 React 的文件中一直提到的元件，其實就是 function 每一個元件都是由一個 function 當然裡面內層可以有很多個但是最外層就是只有一個，所以元件就是 function，如此一來元件可以重複使用就合理許多了吧!因為 function 也可以一直重複使用。

    如何定義元件(component)

    這與其多說，不如來看範例吧!下列就是一個元件

    export default function Comp() &#123;
  return (
    <>
      <h1>我是一個元件</h1>
    </>
  );
&#125;

    是不是跟 function 一模一樣，只是在 React 規定中元件開頭一定要大寫，然後要return出來是因為需要給其他地方使用，所以也需要匯出模組(ESM)給其他檔案使用。其實還有一點，不過是 JSX 的語法問題，最上層需要有個這樣的<></>根元素包住，換句話說 JSX 只能返回一個跟元素。

    整理上述所說的 React 元件基本架構有那些呢?

    React 元件的基本架構

    1.元件開頭命名一定要大寫 2.裡面需要 return 返回 3.最外層要有唯一一個標籤包住通常是<></>，當然也可以是其它標籤 4.如果要給其它檔案使用一定要匯出

    補充:進入點

    說的直白點所謂的進入點，就是專案架構的最上層，但以剛入門 React 的人來說通常不會先理會這層，以 vite 而言所謂的進入點就是 main.js，初始設定長下面這樣。

    import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

    所以，通常在 React 匯出是一個必須的動作，因為以一個專案來說，再怎麼樣都會需要給進入點來使用，

    元件的引用

    通常都是一個檔案一個元件，所以在引用元件的時候會做一個匯入的動作，而 React 在 render 元件的形式上也很特別，是以標籤的形式呈現，範例如下:

    import Comp from "./Comp"; //引用元件從其他檔案

export default function App() &#123;
  return (
    <>
      &#123;/* 可以重複使用 */&#125;
      <Comp />
      <Comp />
      <Comp />
    </>
  );
&#125;
    ps:在 vite 寫元件副檔名需要用 jsx

    當然如果想偷懶一個檔案寫一堆元件也是可以，但是就不用做引入的動作了，範例如下:
    只是不建議這麼而已

    export default function App() &#123;
  return (
    <>
      &#123;/* 可以重複利用 */&#125;
      <Comp />
      <Comp />
      <Comp />
    </>
  );
&#125;

//React 的元件形式
function Comp() &#123;
  return (
    <>
      <h1>我是一個元件</h1>
    </>
  );
&#125;

    總結

    元件是 React 中基本的形式，整個架構幾乎都是由元件構成的，當然還有其中很重要的構成是 JSX 雖然一直提到，但還沒做詳細介紹，這部分明日會做比較詳細的介紹。

    參考資料

    React 官方網站