深入解析React DnD拖拽原理，輕鬆掌握拖放技巧！

来源:https://www.cnblogs.com/dtux/archive/2023/06/09/17468866.html
-Advertisement-
Play Games

>我們是[袋鼠雲數棧 UED 團隊](http://ued.dtstack.cn/)，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。 >本文作者：霽明 # 一、背景 ## 1、業務背景 業務中會有一些需要實現拖拽的場景，尤其是偏視覺方向以及移動端 ...


我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。

本文作者：霽明

一、背景

1、業務背景

業務中會有一些需要實現拖拽的場景，尤其是偏視覺方向以及移動端較多。拖拽在一定程度上能讓交互更加便捷，能大大提升用戶體驗。以業務中心子產品配置功能為例，產品模塊通過拖拽來調整順序，的確會更加方便一些。

file

2、React DnD 介紹

引用官網介紹：
React DnD 是一組 React 實用程式，可幫助您構建複雜的拖放界面，同時保持組件分離。 它非常適合 Trello 和 Storify 等應用程式，在應用程式的不同部分之間拖動可以傳輸數據，組件會根據拖放事件更改其外觀和應用程式狀態。
React-DnD 特點：

  • 使用包裹及註入的方式使組件實現拖拽
  • 可用於構建複雜的拖放界面，同時保持組件分離
  • 採用單向數據流
  • 抹平了不同瀏覽器平臺的差異
  • 可擴展可測試
  • 支持觸屏操作

二、使用方式

1、安裝

安裝 react-dnd, react-dnd-html5-backend

npm install react-dnd react-dnd-html5-backend

2、DndProvider

將需要拖拽的組件使用DndProvider進行包裹

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import Container from '../components/container';

export default function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <Container />
    </DndProvider>
  );
}

看下Container組件，主要是管理數據，並渲染Card列表

function Container() {
  // ...
  return (
    <div style={{ width: 400 }}>
      {cards.map((card, index) => (
        <Card
          key={card.id}
          index={index}
          id={card.id}
          text={card.text}
          moveCard={moveCard}
        />
      ))}
    </div>
  );
}

3、useDrag和useDrop

接下來看下Card組件，

import { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import styles from '../styles/home.module.css';

function Card({ id, text, index, moveCard }: ICardProps) {
  const ref = useRef<HTMLDivElement>(null);

  const [{ handlerId }, drop] = useDrop({
    accept: CARD,
    collect(monitor) {
      return {
        handlerId: monitor.getHandlerId(),
      };
    },
    hover(item: IDragItem, monitor) {
      if (!ref.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;
      // ...
      // 更新元素的位置
      moveCard(dragIndex, hoverIndex);
      // ...
    },
  });

  const [{ isDragging }, drag] = useDrag({
    type: CARD,
    item: { id, index },
    collect: (monitor: any) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  drag(drop(ref));
  const opacity = isDragging ? 0 : 1;

  return (
    <div
      ref={ref}
      className={styles.card}
      style={{ opacity }}
      data-handler-id={handlerId}
    >
      {text}
    </div>
  );
}

至此一個簡單的拖拽排序列表就實現了，實現的效果類似於React DnD官網的這個示例：https://react-dnd.github.io/react-dnd/examples/sortable/simple，接下來我們來看看實現原理。

三、原理解析

1、總體架構

主要代碼代碼目錄結構

file

核心代碼主要分三個部分：

  • dnd-core：核心邏輯，定義了拖拽介面、管理方式、數據流向
  • backend：抽象出來的後端概念，主要處理DOM事件
  • react-dnd：封裝React組件，提供api，相當於接入層

核心實現原理：
dnd-core向backend提供數據的更新方法，backend在拖拽時更新dnd-core中的數據，dnd-core通過react-dnd更新業務組件。

file

2、DndProvider

先看一下源碼

/**
 * A React component that provides the React-DnD context
 */
export const DndProvider: FC<DndProviderProps<unknown, unknown>> = memo(
  function DndProvider({ children, ...props }) {
    const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
    // ...
    return <DndContext.Provider value={manager}>{children}</DndContext.Provider>
  },
)

從以上代碼可以看出，生成了一個manager，並將其放到DndContext.Provider中。先看下DndContext的代碼：

import { createContext } from 'react'
// ...
export const DndContext = createContext<DndContextType>({
  dragDropManager: undefined,
})

就是使用 React 的createContext創建的上下文容器組件。

接下來看下這個manager，主要是用來控制拖拽行為，通過Provider讓子節點也可以訪問。我們看下創建manager的getDndContextValue方法：

import type { BackendFactory, DragDropManager } from 'dnd-core'
import { createDragDropManager } from 'dnd-core'
// ...
function getDndContextValue(props: DndProviderProps<unknown, unknown>) {
  if ('manager' in props) {
     const manager = { dragDropManager: props.manager }
     return [manager, false]
  }

   const manager = createSingletonDndContext(
     props.backend,
     props.context,
     props.options,
     props.debugMode,
    )
   const isGlobalInstance = !props.context

   return [manager, isGlobalInstance]
}

function createSingletonDndContext<BackendContext, BackendOptions>(
   backend: BackendFactory,
   context: BackendContext = getGlobalContext(),
   options: BackendOptions,
   debugMode?: boolean,
) {
   const ctx = context as any
   if (!ctx[INSTANCE_SYM]) {
     ctx[INSTANCE_SYM] = {
       dragDropManager: createDragDropManager(
        backend,
	context,
	options,
	debugMode,
       ),
     }
   }
   return ctx[INSTANCE_SYM]
}

從以上代碼可以看出，getDndContextValue方法又調用了createSingletonDndContext方法，並傳入了backend、context、options、debugMode這幾個屬性，然後通過dnd-core中的createDragDropManager來創建manager。

3、DragDropManager

看下createDragDropManager.js中的主要代碼

import type { Store } from 'redux'
import { createStore } from 'redux'
// ...
import { reduce } from './reducers/index.js'

export function createDragDropManager(
  backendFactory: BackendFactory,
  globalContext: unknown = undefined,
  backendOptions: unknown = {},
  debugMode = false,
): DragDropManager {
  const store = makeStoreInstance(debugMode)
  const monitor = new DragDropMonitorImpl(store, new HandlerRegistryImpl(store))
  const manager = new DragDropManagerImpl(store, monitor)
  const backend = backendFactory(manager, globalContext, backendOptions)
  manager.receiveBackend(backend)
  return manager
}

function makeStoreInstance(debugMode: boolean): Store<State> {
  // ...
  return createStore(
    reduce,
    debugMode &&
    reduxDevTools &&
    reduxDevTools({
      name: 'dnd-core',
      instanceId: 'dnd-core',
    }),
  )
}

可以看到使用了redux的createStore創建了store，並創建了monitor和manager實例，通過backendFactory創建backend後端實例並安裝到manager總實例。

看一下DragDropManagerImpl的主要代碼

export class DragDropManagerImpl implements DragDropManager {
  private store: Store<State>
  private monitor: DragDropMonitor
  private backend: Backend | undefined
  private isSetUp = false

  public constructor(store: Store<State>, monitor: DragDropMonitor) {
    this.store = store
    this.monitor = monitor
    store.subscribe(this.handleRefCountChange)
   }

   // ...

  public getActions(): DragDropActions {
  /* eslint-disable-next-line @typescript-eslint/no-this-alias */
    const manager = this
    const { dispatch } = this.store

    function bindActionCreator(actionCreator: ActionCreator<any>) {
      return (...args: any[]) => {
        const action = actionCreator.apply(manager, args as any)
        if (typeof action !== 'undefined') {
          dispatch(action)
        }
      }
  }

  const actions = createDragDropActions(this)

  return Object.keys(actions).reduce(
    (boundActions: DragDropActions, key: string) => {
      const action: ActionCreator<any> = (actions as any)[
        key
      ] as ActionCreator<any>
      ;(boundActions as any)[key] = bindActionCreator(action)
        return boundActions
      },
      {} as DragDropActions,
    )
  }

  public dispatch(action: Action<any>): void {
    this.store.dispatch(action)
  }

  private handleRefCountChange = (): void => {
    const shouldSetUp = this.store.getState().refCount > 0
    if (this.backend) {
      if (shouldSetUp && !this.isSetUp) {
	this.backend.setup()
	this.isSetUp = true
      } else if (!shouldSetUp && this.isSetUp) {
	this.backend.teardown()
	this.isSetUp = false
      }
    }
  }
}

先說一下這個handleRefCountChange方法，在構造函數里通過store進行訂閱，在第一次使用useDrop或useDrag時會執行setup方法初始化backend，在拖拽源和放置源都被卸載時則會執行teardown銷毀backend。

接下來看一下createDragDropActions方法

export function createDragDropActions(
  manager: DragDropManager,
): DragDropActions {
  return {
    beginDrag: createBeginDrag(manager),
    publishDragSource: createPublishDragSource(manager),
    hover: createHover(manager),
    drop: createDrop(manager),
    endDrag: createEndDrag(manager),
  }
}

可以看到綁定一些action：

  • beginDrag（開始拖動）
  • publishDragSource（發佈當前拖動源）
  • hover（是否經過）
  • drop（落下動作）
  • endDrag（拖拽結束）

manager包含了之前生成的 monitor、store、backend，manager 創建完成，表示此時我們有了一個 store 來管理拖拽中的數據，有了 monitor 來監聽數據和控制行為，能通過 manager 進行註冊，可以通過 backend 將 DOM 事件轉換為 action。接下來便可以註冊拖拽源和放置源了。

4、useDrag

/**
 * useDragSource hook
 * @param sourceSpec The drag source specification (object or function, function preferred)
 * @param deps The memoization deps array to use when evaluating spec changes
 */
export function useDrag<
  DragObject = unknown,
  DropResult = unknown,
  CollectedProps = unknown,
>(
  specArg: FactoryOrInstance<
    DragSourceHookSpec<DragObject, DropResult, CollectedProps>
  >,
  deps?: unknown[],
): [CollectedProps, ConnectDragSource, ConnectDragPreview] {
  const spec = useOptionalFactory(specArg, deps)
  invariant(
    !(spec as any).begin,
    'useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)',
  )

  const monitor = useDragSourceMonitor<DragObject, DropResult>()
  const connector = useDragSourceConnector(spec.options, spec.previewOptions)
  useRegisteredDragSource(spec, monitor, connector)

  return [
    useCollectedProps(spec.collect, monitor, connector),
    useConnectDragSource(connector),
    useConnectDragPreview(connector),
  ]
}

可以看到useDrag方法返回了一個包含3個元素的數組，CollectedProps（collect方法返回的對象）、ConnectDragSource（拖拽源連接器）、ConnectDragPreview（拖拽源預覽）。

monitor是從前面Provider中的manager中獲取的，主要看下connector

export function useDragSourceConnector(
  dragSourceOptions: DragSourceOptions | undefined,
  dragPreviewOptions: DragPreviewOptions | undefined,
): SourceConnector {
  const manager = useDragDropManager()
  const connector = useMemo(
    () => new SourceConnector(manager.getBackend()),
    [manager],
  )
  // ...
  return connector
}

可以看到connector獲取了manager.getBackend後端的數據。

useRegisteredDragSource方法會對拖動源進行註冊，會保存拖動源實例，並記錄註冊的數量。

5、useDrop

看下useDrop源碼

/**
 * useDropTarget Hook
 * @param spec The drop target specification (object or function, function preferred)
 * @param deps The memoization deps array to use when evaluating spec changes
 */
export function useDrop<
  DragObject = unknown,
  DropResult = unknown,
  CollectedProps = unknown,
>(
  specArg: FactoryOrInstance<
    DropTargetHookSpec<DragObject, DropResult, CollectedProps>
  >,
  deps?: unknown[],
): [CollectedProps, ConnectDropTarget] {
  const spec = useOptionalFactory(specArg, deps)
  const monitor = useDropTargetMonitor<DragObject, DropResult>()
  const connector = useDropTargetConnector(spec.options)
  useRegisteredDropTarget(spec, monitor, connector)

  return [
    useCollectedProps(spec.collect, monitor, connector),
    useConnectDropTarget(connector),
  ]
}

useDrop返回了一個包含2個元素的數組，CollectedProps（collect方法返回的對象）, ConnectDropTarget（放置源連接器），monitor和connector的獲取都和useDrag類似。

6、HTML5Backend

HTML5Backend使用了HTML5 拖放 API，先瞭解下HTML拖拽事件：

file

一個簡單拖拽操作過程，會依次觸發拖拽事件：dragstart -> drag -> dragenter -> dragover (-> dragleave) -> drop -> dragend。

drag事件會在dragstar觸發後持續觸發，直至drop。

dragleave事件會在拖拽元素離開一個可釋放目標時觸發。

接下來介紹一下HTML5Backend，是React DnD 主要支持的後端，使用HTML5 拖放 API，它會截取拖動的 DOM 節點並將其用作開箱即用的“拖動預覽”。React DnD 中以可插入的方式實現 HTML5 拖放支持，可以根據觸摸事件、滑鼠事件或其他完全不同的事件編寫不同的實現，這種可插入的實現在 React DnD 中稱為後端。官網提供了HTML5Backend和TouchBackend，分別用來支持web端和移動端。

後端擔任與 React 的合成事件系統類似的角色：它們抽象出瀏覽器差異並處理原生DOM 事件。儘管有相似之處，但 React DnD 後端並不依賴於 React 或其合成事件系統。在後臺，後端所做的就是將 DOM 事件轉換為 React DnD 可以處理的內部 Redux 操作。

前面給DndProvider傳遞的HTML5backend，看一下其代碼實現：

export const HTML5Backend: BackendFactory = function createBackend(
  manager: DragDropManager,
  context?: HTML5BackendContext,
  options?: HTML5BackendOptions,
): HTML5BackendImpl {
  return new HTML5BackendImpl(manager, context, options)
}

可以看到其實是個返回HTML5BackendImpl實例的函數，在創建manager實例時會執行createBackend方法創建真正的backend。

如下是 Backend 需要被實現的方法：

export interface Backend {
  setup(): void
  teardown(): void
  connectDragSource(sourceId: any, node?: any, options?: any): Unsubscribe
  connectDragPreview(sourceId: any, node?: any, options?: any): Unsubscribe
  connectDropTarget(targetId: any, node?: any, options?: any): Unsubscribe
  profile(): Record<string, number>
}

setup 是 backend 的初始化方法，teardown 是 backend 銷毀方法。connectDragSource方法將元素轉換為可拖拽元素，並添加監聽事件。connectDropTarget方法會給元素添加監聽事件，connectDragPreview方法會將preview元素保存以供監聽函數使用，profile方法用於返回一些簡要的統計信息。

以上這幾個方法都在HTML5BackendImpl中，我們先看一下setup方法：

public setup(): void {
  const root = this.rootElement as RootNode | undefined
  if (root === undefined) {
    return
  }

  if (root.__isReactDndBackendSetUp) {
    throw new Error('Cannot have two HTML5 backends at the same time.')
  }
  root.__isReactDndBackendSetUp = true
  this.addEventListeners(root)
}

root預設是windows，通過addEventListeners方法把監聽事件都綁定到windows上，這提高了性能也降低了事件銷毀的難度。

看下addEventListeners方法：

private addEventListeners(target: Node) {
  if (!target.addEventListener) {
    return
  }
  target.addEventListener(
    'dragstart',
    this.handleTopDragStart as EventListener,
  )
  target.addEventListener('dragstart', this.handleTopDragStartCapture, true)
  target.addEventListener('dragend', this.handleTopDragEndCapture, true)
  target.addEventListener(
    'dragenter',
    this.handleTopDragEnter as EventListener,
  )
  target.addEventListener(
    'dragenter',
    this.handleTopDragEnterCapture as EventListener,
    true,
  )
  target.addEventListener(
    'dragleave',
    this.handleTopDragLeaveCapture as EventListener,
    true,
  )
  target.addEventListener('dragover', this.handleTopDragOver as EventListener)
  target.addEventListener(
    'dragover',
    this.handleTopDragOverCapture as EventListener,
    true,
  )
  target.addEventListener('drop', this.handleTopDrop as EventListener)
  target.addEventListener(
    'drop',
    this.handleTopDropCapture as EventListener,
    true,
  )
}

以上代碼中監聽了一些拖拽事件，這些監聽函數會獲得拖拽事件的對象、拿到相應的參數，並執行相應的action方法。HTML5Backend 通過 manager 拿到一個 DragDropActions 的實例，執行其中的方法。DragDropActions 本質就是根據參數將其封裝為一個 action，最終通過 redux 的 dispatch 將 action 分發，改變 store 中的數據。

export interface DragDropActions {
  beginDrag(
    sourceIds?: Identifier[],
    options?: any,
  ): Action<BeginDragPayload> | undefined
    publishDragSource(): SentinelAction | undefined
    hover(targetIds: Identifier[], options?: any): Action<HoverPayload>
    drop(options?: any): void
    endDrag(): SentinelAction
}

最後我們再看下connectDragSource方法：

public connectDragSource(
  sourceId: string,
  node: Element,
  options: any,
): Unsubscribe {
  // ...
  node.setAttribute('draggable', 'true')
  node.addEventListener('dragstart', handleDragStart)
  node.addEventListener('selectstart', handleSelectStart)

  return (): void => {
    // ...
    node.removeEventListener('dragstart', handleDragStart)
    node.removeEventListener('selectstart', handleSelectStart)
    node.setAttribute('draggable', 'false')
  }
}

可以看到主要是把節點的draggable屬性設置為true，並添加監聽事件，返回一個Unsubscribe函數用於執行銷毀。

綜上，HTML5Backend 在初始化的時候在 window 對象上綁定拖拽事件的監聽函數，拖拽事件觸發時執行對應action，更新 store 中的數據，完成由 Dom 事件到數據的轉變。

7、TouchBackend

HTML5 後端不支持觸摸事件，因此它不適用於平板電腦和移動設備。可以使用react-dnd-touch-backend來支持觸摸設備，簡單看下ToucheBackend。

ToucheBackend主要是為了支持移動端，也支持web端，在web端可以使用 mousedown、mousemove、mouseup，在移動端則使用 touchstart、touchmove、touchend，下麵是ToucheBackend中對事件的定義：

const eventNames: Record<ListenerType, EventName> = {
  [ListenerType.mouse]: {
    start: 'mousedown',
    move: 'mousemove',
    end: 'mouseup',
    contextmenu: 'contextmenu',
  },
  [ListenerType.touch]: {
    start: 'touchstart',
    move: 'touchmove',
    end: 'touchend',
  },
  [ListenerType.keyboard]: {
    keydown: 'keydown',
  },
}

8、主要拖拽過程

file

四、總結

React-DnD 採用了分層設計，react-dnd充當接入層，dnd-core實現拖拽介面、定義拖拽行為、管理數據流向，backend將DOM事件通過redux action轉換為數據。

使用可插入的方式引入backend，使拖拽的實現可擴展且更加靈活。

使用了單向數據流，在拖拽時不用處理中間狀態，不用額外對DOM事件進行處理，只需專註於數據的變化。
React-DnD對backend的實現方式、數據的管理方式，以及整體的設計都值得借鑒。

五、參考鏈接：

最後

歡迎關註【袋鼠雲數棧UED團隊】~
袋鼠雲數棧UED團隊持續為廣大開發者分享技術成果，相繼參與開源了歡迎star


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

-Advertisement-
Play Games
更多相關文章
  • oracle 之存儲過程 begin ...... ; ...... end
    點擊查看代碼 ``` begin merge into ly_yjs_hxsj.T_XSGL_XSXX_CZRZ rz using ( select a.XS_ID xsid, xh, xm, '02' as bglx,'修改學生：'||xm||':學位操作撤銷學位證書號，原學位證書號：'|| BJ ...
  • 分散式資料庫 Join 查詢設計與實現淺析
    本文記錄 Mysql 分庫分表 和 Elasticsearch Join 查詢的實現思路，瞭解分散式場景數據處理的設計方案。文章從常用的關係型資料庫 MySQL 的分庫分表Join 分析，再到非關係型 ElasticSearch 來分析 Join 實現策略。逐步深入Join 的實現機制。 ...
  • openEuler22+GreatSQL+dbops玩轉MGR
    > 芬達，《芬達的資料庫學習筆記》公眾號作者，開源愛好者，擅長 MySQL、ansible。 ## 背景 ### openEuler 是什麼 openEuler22.03 LTS 是 openEuler 社區於 2022 年 3 月發佈的開源操作系統（從系統版本的命名不難發現吧）。openEuler ...
  • es索引數據複製並增加條件和修改目標數據值
    es操作同一個索引里數據的複製語法 複製數據： POST _reindex { "source": { "index": "source_index" }, "dest": { "index": "destination_index" } } 欄位值修改： POST source_index/_up ...
  • Oracle的PDB資料庫創建DIRECTORY時遇到ORA-65254
    在Oracle 19c多租戶環境的PDB資料庫下麵創建一個DIRECTORY時，遇到了“ORA-65254: invalid path specified for the directory”，下麵簡單演示一下所遇到的這個案例 SQL> CREATE PLUGGABLE DATABASE PDB6  ...
  • 擁抱jsx，開啟vue3用法的另一種選擇
    📝背景 公司高級表單組件ProForm高階組件都建立在jsx的運用配置上，項目在實踐落地過程中積累了豐富的經驗，也充分感受到了jsx語法的靈活便捷和可維護性強大，享受到了用其開發的樂趣，獨樂樂不如眾樂樂，為了幫助大家更好的運用jsx，開發提效，特此總結分享。 💎效果對比 以前 以往我們開發一個列 ...
  • 記錄--開始使用Vue 3時應避免的10個錯誤
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 Vue 3 穩定已經有一段時間了。許多代碼庫正在生產中使用它，其他人最終也必須進行遷移。我有機會與它一起工作，並記錄了我的錯誤，這可能是你想避免的。 1.使用響應式助手聲明基本類型 數據聲明曾經很簡單，但現在有多個輔助工具可用。現在的一般 ...
  • JavaScript語法學習
    # JS語法學習 **Javascript：客戶端的腳本語言** ## **1. JavaScript數據類型** ![](https://img2023.cnblogs.com/blog/3008601/202306/3008601-20230607170622855-1334758269.png ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類