Vue渲染函式與JSX指南

Amd794發表於2024-06-03
Vue函式JS

title: Vue渲染函式與JSX指南
date: 2024/6/3 下午6:43:53
updated: 2024/6/3 下午6:43:53
categories:

  • 前端開發
    tags:
  • Vue渲染
  • JSX基礎
  • 效能最佳化
  • 元件對比
  • React JSX
  • 大專案
  • 測試策略

image

第1章：Vue.js入門

Vue.js的歷史和背景

Vue.js是一個用於構建使用者介面的JavaScript框架，旨在提供簡單但功能強大的方法來構建動態Web應用程式。Vue.js最初於2014年由尤雨溪（Evan
You）釋出，後來在GitHub上獲得了大量關注和支援。Vue.js的設計靈感來自Angular和React，但Vue.js的核心目標是易於學習和使用。

安裝和配置Vue開發環境

要開始使用Vue.js，首先需要安裝Vue.js的開發環境。可以從Vue.js的官方網站下載和安裝最新版本的Vue.js。

在安裝Vue.js後，可以透過以下方式在HTML檔案中使用Vue.js：

  1. 在HTML檔案的<head>部分引入Vue.js：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  1. 在HTML檔案的<body>部分建立一個<div>元素，用於掛載Vue.js例項：
<div id="app">
  {{ message }}
</div>
  1. 在HTML檔案的<script>部分建立一個Vue.js例項，並將其掛載到<div>元素上：
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>

Vue元件的基本概念

Vue.js的核心是元件化程式設計。元件是可重用的、可組合的、自包含的Vue.js例項。元件可以包含自己的資料、計算屬性、方法、生命週期鉤子函式以及模板。

在Vue.js中，可以使用<template>標籤來定義元件的模板。元件的資料可以透過data選項來定義，計算屬性可以透過computed
選項來定義，方法可以透過methods選項來定義。

元件可以透過props選項來接收外部資料。props選項是一個陣列或物件，包含了元件可以接收的資料項。

Vue例項的生命週期

Vue.js例項和元件在被建立和銷燬時會經過一系列的生命週期階段。這些生命週期階段可以透過生命週期鉤子函式來監聽和操作。

在Vue.js中，可以透過以下生命週期鉤子函式來監聽生命週期事件：

  • beforeCreate：在資料觀測和初始化事件或 watches 時呼叫。
  • created：在例項建立完成後立即呼叫。
  • beforeMount：在掛載開始之前被呼叫。
  • mounted：在例項被掛載後呼叫。
  • beforeUpdate：在資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。
  • updated：在由於資料更改導致的虛擬 DOM 重新渲染和打補丁之後呼叫。
  • beforeDestroy：在例項銷燬之前呼叫。
  • destroyed：在例項銷燬後呼叫。

第2章：模板語法

插值表示式

插值表示式用於將文字與資料繫結在一起。在Vue.js中，使用雙花括號{{ }}包裹的表示式會被當作 JavaScript 表示式進行插值。例如：

<div>{{ message }}</div>

這裡的message是Vue例項的一個資料屬性。當message的值發生變化時，插值表示式所在的內容也會相應更新。

指令

Vue.js提供了多種指令，用於執行不同的任務。指令是以v-開頭的行為動詞。

  • v-bind：用於動態繫結一個或多個屬性值到表示式。
  • v-model：用於在表單輸入和應用狀態之間建立雙向繫結。
  • v-for：用於基於一個陣列渲染一個列表。
  • v-if、v-else-if、v-else：用於條件渲染。
  • v-on：用於監聽DOM事件。

例如，使用v-bind指令繫結一個類名：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

條件渲染

條件渲染用於根據條件顯示或隱藏元素。

  • v-if：條件為真時渲染元素，為假時跳過。
  • v-else-if：當v-if的條件為假，且v-else-if的條件為真時渲染元素。
  • v-else：當v-if和v-else-if的條件都為假時渲染元素。

例如，根據一個布林值渲染不同的內容：

<p v-if="isTrue">這是真的</p>
<p v-else-if="isFalse">這是假的</p>
<p v-else>條件未知</p>

列表渲染

列表渲染用於遍歷陣列或物件，並生成列表。

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.text }}
  </li>
</ul>

在這個例子中，v-for指令遍歷items陣列，為每個元素生成一個li元素。:key是一個特殊的屬性，它幫助Vue追蹤每個節點的身份，從而重用和重新排序現有元素。

事件處理

事件處理指令用於監聽DOM事件，並執行相應的JavaScript程式碼。

<button v-on:click="handleClick">點選我</button>

在這個例子中，當按鈕被點選時，handleClick方法會被呼叫。Vue.js還提供了其他事件修飾符，如.stop、.prevent、.capture
和.self，用於控制事件冒泡、阻止預設行為等。

第3章：渲染函式簡介

什麼是渲染函式

渲染函式是一個用於生成 VNode（虛擬 DOM 節點）的函式。它是 Vue.js 中一種底層的 API，用於渲染檢視。

渲染函式的作用

渲染函式的主要作用是讓我們可以更加靈活地控制 Vue.js 的渲染過程。在某些情況下，使用渲染函式可以更好地最佳化效能，或者更好地實現複雜的
UI 結構。

如何在 Vue 中使用渲染函式

在 Vue 中使用渲染函式需要使用render函式屬性。render函式接收一個createElement函式作為引數，用於建立 VNode。

例如，建立一個簡單的渲染函式：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  render(createElement) {
    return createElement('h1', this.message)
  }
}
</script>

在這個例子中，我們使用render函式代替了模板。createElement函式接收三個引數：標籤名、資料物件和子節點。在這個例子中，我們只使用了標籤名和資料物件。

資料物件可以包含以下屬性：

  • class：用於設定元素的類名。
  • style：用於設定元素的內聯樣式。
  • props：用於設定元素的屬性。
  • domProps：用於設定原生 DOM 屬性。
  • on：用於設定事件監聽器。

第4章：建立渲染函式

基本渲染函式的實現

在 Vue 中，你可以透過定義render函式來自定義元件的渲染行為。以下是一個基本渲染函式的例子：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count += 1
    }
  },
  render(createElement) {
    return createElement('div', [
      createElement('h1', this.message),
      createElement('p', this.count),
      createElement('button', {
        on: { click: this.increment }
      }, 'Increment')
    ])
  }
}
</script>

在這個例子中，render函式使用createElement方法來建立 DOM 元素。createElement接受三個引數：標籤名、屬性物件和一個子節點陣列。

使用渲染函式最佳化效能

渲染函式允許你直接操作虛擬
DOM，因此你可以利用它來最佳化效能。例如，透過避免不必要的渲染來提高效能。你可以使用shouldComponentUpdate生命週期鉤子來控制元件是否應該更新：

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count += 1
    }
  },
  render(createElement) {
    return createElement('div', [
      createElement('h1', this.message),
      createElement('p', this.count)
    ])
  },
  shouldComponentUpdate(nextProps, nextState) {
    // 只有當 message 或 count 發生變化時才更新元件
    return nextProps.message !== this.message || nextState.count !== this.count
  }
}

函式式渲染與普通渲染的比較

函式式渲染與普通渲染（使用模板）的主要區別在於靈活性和控制能力。函式式渲染提供了更多的控制權，允許你手動管理元件的更新，從而在某些情況下可以實現更高的效能最佳化。

普通渲染（模板）更加直觀和易用，大多數情況下可以滿足開發需求。它提供了資料繫結和元件化的便利，使得開發更加快速。

函式式渲染（render函式）適合於：

  • 需要深度定製渲染邏輯的情況。
  • 需要手動最佳化渲染效能的情況。
  • 需要從底層的虛擬 DOM 操作中獲益的情況。

普通渲染（模板）適合於：

  • 大多數標準的元件開發。
  • 當渲染邏輯相對簡單時。
  • 當效能不是主要考慮因素時。

在選擇函式式渲染還是普通渲染時，需要根據具體的需求和場景來決定。

第5章：渲染函式與元件

如何在元件中使用渲染函式

在 Vue 元件中使用渲染函式，你需要在元件的選項中定義一個render函式。這個函式將替代模板，直接返回虛擬 DOM
結構。以下是如何在元件中使用渲染函式的示例：

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count += 1
    }
  },
  render(createElement) {
    return createElement('div', [
      createElement('h1', this.message),
      createElement('p', this.count),
      createElement('button', {
        on: { click: this.increment }
      }, 'Increment')
    ])
  }
}

在這個例子中，render函式接收一個createElement方法作為引數，這個方法用於建立虛擬 DOM 元素。createElement
方法的第一個引數是標籤名，第二個引數是屬性物件，第三個引數是子元素陣列。

元件內的渲染函式

元件內的渲染函式允許你完全控制元件的渲染邏輯。你可以根據元件的狀態和屬性來動態生成虛擬 DOM。這種方式提供了極高的靈活性，但同時也要求開發者對
Vue 的虛擬 DOM 系統有深入的理解。

渲染函式與虛擬DOM

渲染函式與虛擬 DOM 緊密相關。在 Vue 中，渲染函式返回的是虛擬 DOM 節點，這些節點是由createElement方法建立的。虛擬 DOM
是一種程式設計概念，它允許你在記憶體中以 JavaScript 物件的形式表示 DOM 結構，而不是直接操作真實的 DOM。

使用虛擬 DOM 的好處包括：

  1. 效能最佳化：透過比較新舊虛擬 DOM 樹的差異，Vue 可以最小化實際 DOM 操作，從而提高效能。
  2. 跨平臺能力：虛擬 DOM 可以被渲染到不同的環境中，如瀏覽器、移動端或桌面應用，甚至可以用於伺服器端渲染。
  3. 開發效率：虛擬 DOM 允許開發者以宣告式的方式編寫應用，而不是直接操作 DOM，這通常使得程式碼更易於理解和維護。

在渲染函式中，你可以直接操作這些虛擬 DOM 節點，建立、修改或刪除它們，而不必擔心直接操作真實 DOM 帶來的效能開銷。

第6章：JSX基礎

JSX的介紹

JSX 是 JavaScript 的一種語法擴充套件，它允許在 JavaScript 程式碼中編寫 HTML 樣式的標記。JSX 的主要目的是使元件的開發更加簡單和直觀。

JSX 的基本語法如下：

const element = <h1>Hello, world!</h1>;

上面的程式碼建立了一個h1標籤，並將其渲染為一個 React 元素。

JSX與HTML的比較

JSX 與 HTML 在語法上有一些區別，以下是它們之間的主要差異：

  1. 標籤名：JSX 標籤名使用駝峰命名法，例如<div>在 JSX 中寫作<Div>。
  2. 屬性：JSX 屬性使用駝峰命名法，例如class在 JSX 中寫作className。
  3. 自閉合標籤：JSX 中的所有標籤都必須有一個閉合標籤，即使它們在 HTML 中可以省略閉合標籤，例如<br>在 JSX
    中寫作<br />。
  4. 子元素：JSX 中的子元素可以是任意型別的 JavaScript 表示式，包括陣列、函式、變數等。

第7章：JSX語法

JSX標籤與屬性

JSX 標籤在語法上類似於 HTML 標籤，但它們是 React 元件的語法糖。在 JSX 中，你可以使用表示式來建立動態內容，這些表示式會在渲染時求值。

示例：

const message = 'Hello, world!';

function getGreeting() {
  return 'Hello';
}

const element = (
  <h1>
    {getGreeting()}, {message}
  </h1>
);

在這個例子中，getGreeting()是一個函式呼叫，message是一個變數，它們都包含在{}內，這表示它們將在渲染時求值。

JSX表示式

JSX 表示式可以是任何有效的 JavaScript 表示式。它們可以包含運算子、函式呼叫、變數等。JSX 表示式會在元件渲染時求值。

示例：

const count = 42;
const element = <h1>The answer to life, the universe, and everything is {count}</h1>;

在這個例子中，count是一個變數，它的值將會在渲染時插入到h1標籤中。

JSX與Vue資料繫結

Vue 中的資料繫結是透過v-model、v-bind、v-if、v-for等指令實現的。在 JSX 中，你可以使用類似的語法來實現相同的功能。

示例：

const App = {
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  render(h) {
    return (
      <div>
        <h1>{this.message}</h1>
        <input type="text" value={this.message} onInput={(event) => { this.message = event.target.value; }} />
      </div>
    );
  }
};

在這個 Vue JSX 示例中，我們使用了this.message來訪問 Vue 例項的資料。value={this.message}相當於 Vue 中的v-model
，它建立了輸入框和資料之間的雙向繫結。onInput屬性是一個事件處理器，它監聽輸入框的輸入事件，並更新this.message的值。
AD：漫畫首頁

需要注意的是，在 Vue 中使用 JSX 時，你需要確保render函式接收到了h函式作為引數，因為h函式是建立虛擬 DOM 元素的關鍵。同時，Vue
的資料繫結和事件處理在 JSX 中遵循 React 的語法習慣，但背後的機制是由 Vue 的響應式系統支援的。

第8章：在元件中使用JSX

JSX元件定義

在 JSX 中，你可以使用函式或類來定義元件。這些元件可以接收引數（稱為 props），並可以渲染 JSX 元素。

示例：

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

const element = <Welcome name="Sara" />;

在這個例子中，我們定義了一個名為Welcome的函式元件，它接收一個名為props的引數，並渲染一個帶有文字的h1標籤。Welcome
元件的使用方式類似於 HTML 標籤，我們可以使用<Welcome name="Sara" />來渲染該元件。

JSX與元件狀態

在 JSX 中，你可以使用類中的state來管理元件的狀態。state是一個物件，它包含了元件的資料。你可以在建構函式中初始化state
，並在其他地方修改它。

示例：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

const element = <Timer />;

在這個例子中，我們定義了一個名為Timer的類元件。Timer元件有一個名為seconds的狀態，它是一個計數器，每秒遞增
1。componentDidMount生命週期方法用於設定計時器，componentWillUnmount生命週期方法用於清除計時器。render方法用於渲染當前計數器的值。

JSX與事件處理

在 JSX 中，你可以使用類中的onEvent屬性來處理事件。這些屬性可以接收一個函式，當事件發生時，該函式將會被呼叫。

示例：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

const element = <Toggle />;

在這個例子中，我們定義了一個名為Toggle的類元件。Toggle元件有一個名為isToggleOn
的狀態，它是一個布林值，表示按鈕是否處於啟用狀態。handleClick方法用於切換isToggleOn的值。render
方法用於渲染一個按鈕，該按鈕的文字取決於isToggleOn的值。當按鈕被點選時，handleClick方法將會被呼叫。
AD：專業搜尋引擎

第9章：自定義渲染函式與JSX

建立自定義渲染函式

在 React 中，除了使用類來定義元件，還可以使用函式來替代，這種函式被稱為渲染函式。它接收 props 和 state 作為引數，並返回一個
React 元素。函式元件沒有生命週期方法，但可以使用useRef、useState等 hooks 來實現更復雜的功能。

function CustomComponent({ name }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a custom component.</p>
    </div>
  );
}

const customElement = <CustomComponent name="John" />;

使用JSX進行復雜渲染

JSX 可以巢狀和包含複雜的結構，可以用來渲染列表、條件渲染、迴圈等。例如，渲染一個包含多個元素的列表：

function UserList(users) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}

const userList = <UserList users={[
  { id: 1, name: 'John', email: 'john@example.com' },
  { id: 2, name: 'Jane', email: 'jane@example.com' }
]} />;

渲染函式與JSX的組合使用

在函式元件中，你可以直接寫 JSX 程式碼，也可以在函式內部返回 JSX。這兩種方式可以混合使用，以實現更靈活的元件設計。

function DisplayData(data) {
  return (
    <div>
      {data && (
        <div>
          Name: {data.name}, Age: {data.age}
          {data.items && (
            <ul>
              {data.items.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

const displayElement = <DisplayData data={{ name: 'Alice', age: 30, items: [{ id: 1, name: 'Item1' }] }} />;

在這個例子中，DisplayData是一個函式元件，它接收一個dataprop。根據data
是否存在及其結構，它動態地渲染不同的內容，包括姓名、年齡以及可能的子項列表。AD：首頁 | 一個覆蓋廣泛主題工具的高效線上平臺

第10章：效能最佳化

渲染函式與JSX的效能考量

當使用渲染函式和JSX時，效能最佳化是一個重要的考慮因素。React 元件的效能主要受到以下因素的影響：

  1. 元件的複雜性：元件層次越深，渲染和更新時的工作量越大。
  2. 元件的大小：大元件會佔用更多記憶體，影響渲染速度。
  3. 渲染頻率：頻繁渲染會佔用CPU資源，影響效能。
  4. DOM操作：減少DOM操作可以提高效能。

最佳化技巧與策略

為了提高渲染函式和JSX的效能，可以採取以下最佳化措施：

  1. 使用懶載入：對於不立即需要的元件，可以使用動態匯入（Dynamic Imports）或懶載入（Lazy Loading）技術。
  2. 複用元件：建立可複用的元件可以減少程式碼量和重複渲染的工作。
  3. 最佳化元件結構：減少不必要的元件層級，簡化元件結構。
  4. 使用虛擬化：對於長列表等大量元素，使用虛擬滾動（Virtual Scroll）可以大幅提升效能。
  5. 剔除不可見內容：使用React.PureComponent或React.memo來避免不必要的渲染，或者使用useCallback和useMemo
    來最佳化函式和變數的傳遞。
  6. 合理使用 state 和 props：避免在渲染函式中直接修改 state 或 props，而是在元件內部使用setState或狀態提升。
  7. 最佳化事件處理：減少事件監聽器的數量，使用useEvent等鉤子來最佳化事件處理。
  8. 使用生產版本的庫檔案：開發時使用的是庫的開發版本，它包含了警告和完整的錯誤檢查。在生產環境中，應該使用壓縮和最佳化過的庫版本。

效能工具的使用

為了診斷和最佳化效能，React 提供了一些內建的工具和外部庫：

  1. React DevTools：React 的官方除錯工具，可以幫助你監控元件的渲染和狀態變化。
  2. performanceAPI：瀏覽器提供的API，可以用來分析和獲取頁面效能資訊。
  3. React Profiler：React 提供的效能分析工具，可以檢視元件的渲染時間和記憶體佔用。
  4. Craco（Config React App Configuration）：一個配置工具，可以幫助你定製 Create React App 的配置，包括效能配置。
  5. Webpack Bundle Analyzer：一個視覺化工具，可以幫助你分析打包後的檔案大小和依賴關係。

第11章：實戰案例

構建一個使用渲染函式與JSX的待辦事項應用

專案概述

我們將構建一個簡單的待辦事項應用，使用者可以新增、刪除和標記待辦事項為完成。這個應用將展示如何使用渲染函式和JSX來建立動態和互動式的使用者介面。

技術棧

  • React
  • React Hooks（如 useState, useEffect）
  • CSS 或 styled-components 用於樣式

步驟

  1. 設定專案：

    • 使用 Create React App 建立一個新的 React 專案。
    • 安裝必要的依賴，如 styled-components（如果選擇使用）。

  2. 建立元件：

    • 建立一個TodoList元件，用於顯示所有的待辦事項。
    • 建立一個TodoItem元件，用於顯示單個待辦事項的詳細資訊。
    • 建立一個AddTodo元件，用於新增新的待辦事項。

  3. 實現功能：

    • 在TodoList元件中，使用useState來管理待辦事項的狀態。
    • 在TodoItem元件中，使用props來接收待辦事項的資料，並實現刪除和標記完成的功能。
    • 在AddTodo元件中，使用表單和事件處理來新增新的待辦事項。

  4. 樣式設計：

    • 使用 CSS 或 styled-components 來設計應用的外觀和感覺。

  5. 測試和最佳化：

    • 測試應用的各個功能，確保沒有錯誤。
    • 最佳化效能，例如透過使用React.memo來避免不必要的渲染。

程式碼示例

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { text, completed: false }]);
  };

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <AddTodo onAdd={addTodo} />
      {todos.map((todo, index) => (
        <TodoItem
          key={index}
          text={todo.text}
          completed={todo.completed}
          onToggle={() => toggleTodo(index)}
          onRemove={() => removeTodo(index)}
        />
      ))}
    </div>
  );
}

function TodoItem({ text, completed, onToggle, onRemove }) {
  return (
    <div>
      <input type="checkbox" checked={completed} onChange={onToggle} />
      <span style={{ textDecoration: completed ? 'line-through' : 'none' }}>{text}</span>
      <button onClick={onRemove}>刪除</button>
    </div>
  );
}

function AddTodo({ onAdd }) {
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    if (text.trim()) {
      onAdd(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">新增</button>
    </form>
  );
}

export default TodoList;

渲染函式與JSX在大型專案中的應用

在大型專案中，渲染函式和JSX的應用更為複雜，需要考慮以下幾個方面：

  1. 元件拆分：將大型元件拆分為更小的、可複用的元件，以提高程式碼的可維護性和可讀性。
  2. 狀態管理：使用 Redux 或 Context API 等狀態管理工具來管理應用的狀態，確保狀態的一致性和可預測性。
  3. 效能最佳化：使用React.memo,useCallback,useMemo等最佳化技術來減少不必要的渲染。
  4. 程式碼分割：使用動態匯入（Dynamic Imports）和 React 的懶載入（Lazy Loading）功能來最佳化應用的載入時間。
  5. 測試：編寫單元測試和整合測試來確保程式碼的質量和穩定性。

相關文章