Vue渲染函數與JSX指南

来源:https://www.cnblogs.com/Amd794/p/18229472
-Advertisement-
Play Games

title: Vue渲染函數與JSX指南 date: 2024/6/3 下午6:43:53 updated: 2024/6/3 下午6:43:53 categories: 前端開發 tags: Vue渲染 JSX基礎 性能優化 組件對比 React JSX 大項目 測試策略 第1章：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/[email protected]/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: '[email protected]' },
  { id: 2, name: 'Jane', email: '[email protected]' }
]} />;

渲染函數與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. 測試：編寫單元測試和集成測試來確保代碼的質量和穩定性。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 鴻蒙HarmonyOS實戰-ArkTS語言基礎類庫（概述）
    一、概述 1.什麼是語言基礎類庫 語言基礎類庫，也稱為標準庫或核心庫，是編程語言提供的一組內置的基礎功能和常用工具的集合。它通常包含了各種數據結構、演算法、輸入輸出處理、字元串處理、日期時間處理、文件操作、網路通信等功能，為開發者提供了便捷的編程介面，以減少開發工作量並提高代碼的可讀性和可維護 ...
  • 鴻蒙HarmonyOS實戰-Web組件（請求響應和頁面調試）
    前言 請求響應是指客戶端發送請求給伺服器，伺服器接收到請求後返回的響應。響應包含了伺服器處理請求的結果，並將結果返回給客戶端。 頁面調試是指在開發過程中，通過調試工具分析頁面的運行狀況，查找問題和修複錯誤。常用的頁面調試工具包括瀏覽器的開發者工具和調試插件，可以檢查頁面的網路請求、HTML代碼、 ...
  • Android桌面Launcher源碼淺析
    在Android啟動過程-萬字長文(Android14)中介紹了Android系統的啟動過程，本篇文章將繼續介紹桌面應用Launcher。 一、Launcher介紹 在Android啟動過程-萬字長文(Android14)中提到Launcher是Android系統啟動後，由SystemServerA ...
  • 鴻蒙HarmonyOS實戰-Web組件（Cookie及數據存儲）
    前言 Cookie是一種存儲在用戶電腦上的小文本文件，用於在用戶訪問網站時存儲和提取信息。它由網站伺服器發送到用戶的瀏覽器，並存儲在用戶的電腦上。每當用戶訪問該網站時，瀏覽器將發送該Cookie回伺服器，以用於識別用戶和存儲用戶的首選項和其他信息。 Cookie可以用於跟蹤用戶的行為，例如記 ...
  • Flutter將視頻或圖文分享到抖音
    如何在 Flutter 中分享視頻到抖音 話不多說，先上效果： 原理 發佈內容至抖音 H5 場景_移動/網站應用_抖音開放平臺 (open-douyin.com) 本教程沒有接入抖音原生 SDK 以及任何第三方插件，使用抖音的 h5 分享介面配合 url_launcher 插件實現跳轉至抖音分享頁面 ...
  • 鴻蒙HarmonyOS實戰-Web組件（頁面跳轉和瀏覽記錄）
    前言 頁面跳轉是指在瀏覽器中從當前頁面跳轉到另一個頁面的操作。可以通過點擊鏈接、輸入網址、提交表單等方式實現頁面跳轉。 瀏覽記錄是指記錄用戶在瀏覽器中瀏覽過的頁面的歷史記錄。當用戶跳轉到一個新頁面時，該頁面會被加入瀏覽記錄中，用戶可以通過瀏覽器的後退按鈕或者瀏覽歷史列表來查看和訪問之前瀏覽過的頁 ...
  • Android啟動過程-萬字長文(Android14)
    在電腦啟動過程和Linux內核Kernel啟動過程介紹了電腦啟動和內核載入，本篇文章主要介紹Android系統是如何啟動的。 一、Android啟動流程 Android系統的啟動流程與Linux接近： sequenceDiagram participant Bootloader as 引導載入程 ...
  • 記錄：瀑布流最佳實現方案
    傳統實現方式 當前文章的gif文件較大，載入的時長可能較久 這裡我拿小紅書的首頁作為分析演示 可以看到他們的實現方式是傳統做法，把每個元素通過獲取尺寸，然後算出left、top的排版位置，最後在每個元素上設置偏移值，思路沒什麼好說的，就是算元素坐標。那麼這種做法有什麼缺點？請看下麵這張圖的操作 容器 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類