js && jsx

GJ504b發表於2024-10-19
JS

初始化
useState 是React的一個鉤子（Hook），用於在函式元件中新增狀態。
currentTodoItem：當前輸入框中的待辦事項文字【字串】。
todoList：待辦事項列表，包含多個【陣列】待辦事項物件。

sortTodo
這個函式用於比較兩個待辦事項，並決定它們的順序。如果兩個待辦事項的完成狀態不同，已完成的待辦事項會排在後面。如果完成狀態相同，則按照它們的 id 排序。

handleAddTodo
這個函式在使用者點選新增按鈕時被呼叫。它會檢查輸入框是否為空，如果不為空，則建立一個新的待辦事項並新增到列表中，然後更新狀態。

handleDeleteTodo(id)
這個函式接收一個 id 作為引數，並從待辦事項列表中刪除具有該 id 的待辦事項。然後對更新後的列表進行排序並更新狀態。

handleToggleTodo(id)
這個函式用於切換待辦事項的完成狀態。它透過 map 方法遍歷待辦事項列表，找到具有指定 id 的待辦事項，並切換其 isCompleted 屬性。

元件是什麼？

元件（Component）是一個可重用的介面元素，它封裝了特定的功能和行為。

  1. 定義
    元件 是一個獨立的、可複用的程式碼塊，它描述了介面的一部分。
    在React中，元件可以是類（Class Component）或函式（Functional Component）。
  2. 功能
  • 元件負責渲染UI的一部分，並且可以管理自己的狀態和屬性（props）。
  • 元件可以接收輸入（通常是透過props），並根據這些輸入渲染輸出（UI元素）
  • 元件可以包含其他元件，從而構建出複雜的UI結構。
  1. 分類
  2. 函式元件：使用JavaScript函式來建立的元件，它接受一個props物件作為引數並返回一個React元素。
  3. 類元件：使用ES6類來建立的元件，它具有更多的特性，如內部狀態（state）和生命週期方法。
  4. 例子
    以下是一個簡單的React函式元件的例子：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

在這個例子中，Welcome是一個元件，它接受一個名為props的引數，並返回一個包含問候語的h1元素。

  1. 特點
    可複用性：元件可以在不同的地方多次使用，只需傳入不同的props。
    封裝性：元件內部的狀態和行為被封裝起來，對外只暴露必要的介面。
    組合性：元件可以巢狀使用，即元件內部可以包含其他元件，形成元件樹。
  2. 優勢
    模組化：元件化使得程式碼更加模組化，易於管理和維護。
    可讀性：元件化的程式碼結構清晰，易於其他開發者理解和接手。
    可測試性：獨立的元件可以單獨測試，提高了測試的效率和覆蓋率。

jsx中狀態表示式長什麼樣子？

在 JSX 中，你可以使用各種表示式來展示或操作狀態。以下是一些常見的使用狀態的表示式示例：

  • 顯示狀態值:
<p>The count is: {count}</p>
  • 條件渲染:
{isShown && <div>The content is shown.</div>}

isShown 是一個布林值變數。它可能是 true 或 false。
後者 是一個 JSX 元素，你想要根據條件渲染它。
isShown === true ==>結果是後者得到渲染
反之，結果是 isShown === false，啥也不展示


或者

{isShown ? <div>The content is shown.</div> : <div>The content is hidden.</div>}

三元運算子（A?B :C）運算子根據 A 的值來決定渲染哪個 JSX 元素[B or C]。

  • 三元運算子:

Status: {isOnline ? 'Online' : 'Offline'}

  • 陣列方式渲染列表
{items.map(item => (
  <li key={item.id}>{item.name}</li>
// 對於陣列中的每個元素（我們稱之為 item），建立一個 <li> 標籤。
// 給每個 <li> 標籤設定一個 key 屬性，這個屬性的值是 item 的 id。
// 在 <li> 標籤內部顯示 item 的 name
// const items = [
//   { id: 1, name: '蘋果' },
//   { id: 2, name: '香蕉' },
//   { id: 3, name: '橘子' }
// ];
// 使用 {items.map(item => (<li key={item.id}>{item.name}</li>))} 後，你將得到以下 HTML：
// <ul>
//   <li key="1">蘋果</li>
//   <li key="2">香蕉</li>
//   <li key="3">橘子</li>
// </ul>

))}
// items 是一個陣列，假設它包含了多個物件，每個物件代表一個項（item）。
// 這個箭頭函式為每個陣列元素返回一個 JSX 元素。

在 React 中，當你有一個陣列，並且你想在 UI 中渲染這個陣列的每個元素時，你通常會使用 JavaScript 的 map 方法。map 方法遍歷陣列中的每個元素，並對每個元素執行一個函式，然後返回一個新的陣列，該陣列包含了每次函式呼叫的結果。

  • 字串模板:
<h1>Hello, {name}!</h1>
  • 計算屬性:
<p>Total: {count * price}</p>
// 建立一個 HTML 段落。
// 在這個段落中顯示文字 "Total: a*b"。
// 然後計算 count 和 price 的乘積，並將結果顯示在同一行上。
  • 樣式繫結:
<div style={{ color: isActive ? 'red' : 'blue' }}>This text color changes.</div>
  • 類名繫結:
<div className={classNames('btn', { 'btn-primary': isActive, 'btn-secondary': !isActive })}>
  Click me
</div>

建立一個 div 元素，並給它新增一個固定的類名 'btn'。
根據元件的狀態 isActive 動態地新增 'btn-primary' 或 'btn-secondary' 類名。如果 isActive 為 true，則新增 'btn-primary' 類名[前者]；如果為 false，則新增 'btn-secondary' 類名。
在 div 中顯示文字 “Click me”。

  • 事件處理:
<button onClick={() => setCount(count + 1)}>Increment</button>
  1. onClick：這是一個事件屬性，用於指定當按鈕被點選時要執行的 JavaScript 程式碼。
    () => setCount(count + 1)：這是一個箭頭函式，它不接受任何引數（()），並返回一個呼叫
  2. setCount 函式的表示式。setCount 函式通常是在使用 React 的 useState 鉤子時定義的，用於更新狀態變數 count 的值。
  3. 建立一個按鈕，並在使用者點選該按鈕時執行一個函式。
    該函式使用 setCount 更新狀態變數 count 的值，使其等於當前值加 1。
    按鈕上顯示的文字是 “Increment”，指示使用者點選這個按鈕將增加計數。
  • 解構狀態:
const { username, age } = user;
<p>{username} is {age} years old.</p>

這行 JSX 程式碼會渲染一個段落 ，其中包含使用者的名字和年齡。{username} 和 {age} 是 JSX 的表示式語法，它允許你在 JSX 中插入 JavaScript 表示式的值。

  • 屬性展開:
const props = { name: 'John', age: 30 };
<User {...props} />

<User {...props} /> 這行程式碼建立了一個 User 元件的例項，並將 props 物件中的所有屬性傳遞給它。這意味著 User 元件將接收 name 和 age 兩個屬性，它們分別被設定為 'John' 和 30。

這些表示式可以在 JSX 中直接使用，React 會計算表示式的結果並將其渲染到頁面上。需要注意的是，在 JSX 中，所有的表示式都必須用花括號 {} 包圍。

狀態（state）是如何影響元件的？

  1. 狀態定義元件的行為
    元件的狀態定義了它的行為和顯示內容。例如，在一個待辦事項列表元件中，狀態可能包含待辦事項的列表。當使用者新增、刪除或標記待辦事項為完成時，這些操作會更新狀態，從而改變元件的行為和顯示。

  2. 狀態的改變觸發元件的更新
    當元件的狀態透過setState（在類元件中）或setXxx（在函式元件中使用useState鉤子）函式更新時，React會重新渲染該元件。這是React響應式更新的核心機制。

  3. 狀態是元件私有的
    狀態是元件的私有資料，它只能在定義它的元件內部訪問和修改。這意味著元件的狀態不會直接影響其他元件，除非透過特定的方式（如props）傳遞。

以下是狀態影響元件的詳細過程：

狀態初始化

在元件建立時，狀態被初始化。對於函式元件，使用useState鉤子進行初始化：

const [count, setCount] = React.useState(0);

在這個例子中，count是元件的初始狀態，數字初始化 (0)
陣列初始化 ([])
字串初始化 ("")
當元件需要更新狀態時，可以使用setCount函式：

狀態更新

當元件需要更新狀態時，可以使用set--首字母大寫 函式：

function handleClick() {
  setCount(count + 1);
}

每次呼叫setCount時，React都會排程一個更新，這會導致元件重新渲染。

元件重新渲染

當狀態更新後，React會重新渲染元件。在這個過程中，React會使用新的狀態值來生成元件的輸出。這意味著任何依賴於狀態的資料或UI都會根據新的狀態進行更新。

響應式UI

因為元件在狀態更新後重新渲染，所以任何在渲染過程中使用狀態的表示式都會得到更新。
例如：

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在這個Counter元件中，每當點選按鈕時，count狀態會增加，然後元件會重新渲染，顯示新的點選次數

相關文章