HsienLu's Blog

2024/1/2

React JavaScript

Day 29 React的本質-Library

雖然 React 現在被稱作 3 大框架其中之一，但是如果現在打開 React 的官網，會發現它的定位是一個 Library，而不是一個 Framework，事實上 React 確實保持著高度靈活性，讓開發者可以自由的選擇其他的 Library 來搭配使用，這也是為什麼 React 能夠在短短幾年內就成為主流的原因之一。甚至在搭配的套件上也有許多不同的選擇，像是 Redux、React-Router、React-Bootstrap 等等，這些套件都是為了滿足不同的需求而生的，而且都是由社群開發的，這也意味著 React 的生態系非常的豐富，而且也有許多的資源可以參考，這也是 React 能夠快速成長的原因之一。今天就來試著用一個簡單的例子來說明 React 的本質吧!

使用 CDN 引用 React

跟許多其他的 Library 一樣，React 也可以透過 CDN 的方式來引用，這樣就不需要透過 npm 或是 yarn 來安裝，，只需要在 HTML 中引用 React 的 CDN 就可以使用了，以下是範例，可以直接複製貼上到 HTML 中，然後用套件 liveserver 打開就可以看到 console 結果了。可以看到 React 跟 ReactDOM 可以是使用的方法，而且還有 babel，這是因為 React 的語法是 JSX，所以需要 babel 來轉換成 JavaScript 才能執行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="rrot"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      console.log(React, ReactDOM);
    </script>
  </body>
</html>

React CDN 使用範例

接續上一個例子，這次就來試著使用 React 的元件吧!首先要先創造一個元件，然後再把它渲染到 root 根元素上，以下是範例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      // 創造元件
      const App = () => &#123;
        return (
          <div>
            <h1>Hello World</h1>
          </div>
        );
      &#125;;
      // 把App元件渲染至root根元素
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

總結

大家可以發現，我這裡只是單純的使用 HTML 而已，並沒有使用太複雜的環境建置工具，雖然實務上不會這樣使用，但是我這裡只是想要表達 React 並不是那麼的難以接近，在官方定義成 library 的前提下，至少在一開始的學習上心態上可以抱持輕鬆一點的態度，不用太過於緊張。

2023/12/29

html

window&body

文字版

在 JavaScript 中，window 和 document.body 是兩個重要的全局物件，它們代表瀏覽器視窗和網頁文件的主體部分。讓我們來看一下它們之間的差異：

window：

window 是瀏覽器中的全局物件，代表整個瀏覽器視窗。
它是所有全局變數和函式的最高級別的容器，可以透過它來訪問和操作全局範圍的變數和函式。
它提供了許多瀏覽器相關的屬性和方法，比如 window.location 可以用來獲取當前網址，window.alert() 可以用來顯示警告對話框，等等。

document.body：

document.body 是 document 物件的一部分，代表 HTML 文件的主體部分。
它表示網頁中的元素，即網頁中的主要內容區域。 *透過 document.body 可以訪問和操作網頁主體中的元素，例如透過 document.body.appendChild(element) 可以將元素添加到主體中。

總結來說，window 是瀏覽器視窗的全局物件，而 document.body 是 HTML 文件的主體部分。它們都提供了許多功能來處理瀏覽器和網頁的相關操作。在網頁開發中，你會經常使用這兩個物件來操作網頁和處理事件。

表格整理版

當前瀏覽器視窗和網頁文件主體的差異如下：

特性	`window`	`document.body`
定義位置	全局範圍（在所有地方可訪問）	`document` 物件的一部分（HTML 文件內）
代表的物件	瀏覽器視窗	HTML 文件的主體部分（`<body>` 元素）
功能	提供瀏覽器相關的屬性和方法	提供操作網頁主體內容的屬性和方法
例子	`window.location`	`document.body.appendChild(element)`
使用場景	瀏覽器操作、全局變數和函式	操作網頁內容、處理網頁事件

window 物件是瀏覽器中的全局物件，它提供了許多瀏覽器相關的屬性和方法，可以在任何地方訪問。而 document.body 則是 document 物件的一部分，代表 HTML 文件的主體部分，主要用於操作網頁主體內容，例如添加元素或處理事件。在網頁開發中，你會經常使用這兩個物件來處理瀏覽器和網頁的相關操作。

2023/12/29

ejs

在 html 使用 ejs 的方法

ejs 常用簡單語法介紹

1.撰寫程式邏輯

<% "這裡寫程式邏輯" %>

2.傳遞參數

<%= "傳遞參數" %>

3.傳遞 HTML 語法

<%- "傳遞HTML語法" %>

<%= %> 和 <%- %>差別
“=”:會完整傳遞
“-“:它看得懂 HTML 語法

4.匯入 ejs:有兩個參數
第一個參數是路徑
第二個參數是要傳進去的變數要用物件包起來，有點像 React 的 Props

<%- include("./layout/test",&#123;element,id&#125;) %>

範例

1.ejs 模板

//檔名:test.ejs
<h1>hello world <%= element %><%= id %></h1>

2.要寫的 html，只列 body

<% let name=["Robin","Amy","Ann"] %>//這裡是定義變數，未來可能會打API存在這
<% name.map((element,id)=> &#123; %>//因為中間要塞這個可以轉譯HTML的語法，所以拆開來寫
<%- include("./layout/test",&#123;element,id&#125;) %>//匯入剛剛的ejs模板並帶入變數
<% &#125;); %>//因為中間要塞這個可以轉譯HTML的語法，所以拆開來寫

3.完成結果如下

2023/12/29

部落格介紹

關於我

剛踏入前端職場的小菜雞，平常喜歡看看技術文章，順便做做筆記，有時候也會寫一些奇怪的東西，歡迎來到我的部落格。

article-Day 28 React 的 Hello World-Hook-useState

2023/10/12

React JavaScript

Day 28 React 的 Hello World-Hook-useState

要說 React 有什麼特別的地方我覺得應該就是 HooK 了吧!Hook 是在 React 16.8 版中加入的，hook 有很多種，每一種的功能都不太一樣，甚至還可以自定義，簡單來說它就是函式，然後可以重複一直使用。但其實這是一個有點抽象的概念，所以就直接從實際的例子來了解吧!

什麼是 useState?

這是 React 最基本的一個 hook 之一，它的作用是儲存某個變數的狀態；並設定更新它的方法，基本寫法如下:

const [變數名稱, set變數名稱] = useState(初始值);

有三點需要注意: 1.需要依照小駝峰的規則撰寫 2.盡量給初始值，也就是變數名稱最一開始的狀態 3.變數只能被 set 變數做改變，使用方法就是在裡面塞一個更新後的數值

以下舉個例子:

宣告一個名為 count 的變數，此變數只能透過 setCount 做改變，且初始值為 0

const [count, setCount] = useState(0);
setCount(1); //更新此變數為1

useState 的作用?

因為在 React 中，不應該直接修改元件函式內部的變數，因為這不會觸發重新渲染元件。必須要使用 React 提供的狀態管理來處理這類情況，所以下面的例子:來展示其中差異

1.沒使用 useState:畫面的按鈕會沒有作用

function App() &#123;
  let a = 0;
  return (
    <>
      <button
        onClick=&#123;() => &#123;
          a = a + 1;
        &#125;&#125;
      >
        按鈕
      </button>
      <h1>現在數值:&#123;a&#125;</h1>
    </>
  );
&#125;

export default App;

2.使用 useState:才能改變狀態

function App() &#123;
  const [a, setA] = useState(0);

  const handleIncrement = () => &#123;
    setA(a + 1);
  &#125;;

  return (
    <>
      <button onClick=&#123;handleIncrement&#125;>按鈕</button>
      <h1>現在數值: &#123;a&#125;</h1>
    </>
  );
&#125;

export default App;

總結

在 React 中與畫面有關的變數都需要 useState 來做一個所謂的狀態管理，才能觸發重新渲染畫面，而且這個變數只能透過跟它同組宣告變數的方法做改變。

2023/10/11

React JavaScript

Day 27 React 的純函數元件

今天要解釋的東西會比較無聊乏味一點，但在 React 元件化導向的框架裡卻是一個很重要的概念，因為元件具有可以重複使用的特性，所以如果不是純函示會有一些 Bug 存在。

純函式的特性

純函式是一個在軟體開發中的重要概念，它有以下主要特點：

相同的輸入始終產生相同的輸出： 當你將相同的輸入值傳遞給一個純函式時，它始終會返回相同的輸出，不受外部狀態的影響。這種可預測性對於測試和除錯非常重要，因為你可以確信函式的行為不會因為外部狀態的改變而變化。
不會修改外部狀態： 純函式不會修改或影響除了它的輸入參數以外的任何狀態。這意味著它不會修改全域變數、不會修改傳遞給它的物件或陣列，也不會修改任何外部狀態。
沒有副作用： 純函式不會引起任何副作用，如改變資料庫的數據、發送 HTTP 請求、修改文件系統等。它僅僅是通過計算返回一個值。
可組合性： 由於純函式不依賴於外部狀態，它們非常容易組合在一起建構更複雜的邏輯。這種特性使得代碼更容易維護、測試和重用。

解釋了那麼多，我相信大家看了眼睛都花了而且一頭霧水，簡單舉例如下:
這就是一個純函式，不會修改外部狀態、沒有副作用、相同輸入有相同輸出

function add(a, b) &#123;
  return a + b;
&#125;

這個 add 函式是純函式，因為它始終返回相同的輸出（兩個數字的和），不修改外部狀態，也不產生副作用。

那不是純函式又會發生什麼事呢?範例如下:

let total = 0;

function addToTotal(num) &#123;
  total += num;
  return total;
&#125;

console.log(addToTotal(3)); // 第一次呼叫，返回 3
console.log(addToTotal(3)); // 第二次呼叫，返回 6

這就不是一個純函式，因為它會改變外部狀態而且，相同的輸入得到不同的輸出。

那想一想如果它是一個元件，我們重複使用三次會發生什麼事?
範例如下:

let total = 0;

function AddToTotal() &#123;
  total += 1;
  return <h2>&#123;total&#125;</h2>;
&#125;

function App() &#123;
  return (
    <div>
      <h1>引入第一次</h1>
      <AddToTotal /> //2
      <h1>引入第二次</h1>
      <AddToTotal /> //4
      <h1>引入第三次</h1>
      <AddToTotal /> //6
    </div>
  );
&#125;

export default App;

就會發現明明就是引入同一個元件，但是會產生不同的結果，這會在重複使用這個元件特性上，造成無法預期的錯誤，所以 react 會鼓勵元件的寫法都要以純函式為主。

總結

雖然無聊或是繁瑣，但是如果發生想不到的錯誤就來檢查看看是不是純函式的問題，但後續其實有相對應的解法，但也續本系列不會提到，但是不純的函式在 react 元件中應該盡量被避免的。