React函數組件的“生活管家“——useEffect Hook詳解

🎯 React函數組件的"生活管家"——useEffect Hook詳解

1. 🌟 開篇：從生活中的"副作用"說起

嘿，各位掘友們！今天咱們來聊聊React函數組件里的一個“大管家”——useEffect Hook。你可能會問，這玩意兒是干啥的？別急，咱們先從生活中的“副作用”聊起。

想想看，你是不是有過這樣的經歷：感冒了吃藥，藥效是把感冒治好，但可能伴隨著“犯困”的副作用；或者，為了項目熬夜加班，項目是上線了，但黑眼圈和掉發也成了“副作用”。這些“副作用”雖然不是我們主要的目的，但它們確實在我們的“主線任務”完成后，或者在任務進行中，悄悄地發生了。

在React的世界里，也有類似的“副作用”。比如，我們更新了UI（主線任務），但可能需要同時做一些與UI渲染本身無關的事情，比如：

  • 數據獲取：組件渲染后，需要從服務器拉取數據。
  • 訂閱事件：組件掛載后，需要監聽一些全局事件（比如鼠標移動、鍵盤按下）。
  • 手動修改DOM：雖然React鼓勵我們聲明式地操作DOM，但有時候我們可能需要直接操作DOM（比如集成第三方庫）。
  • 定時器：設置一個定時器來更新組件狀態。

這些操作，就是React組件的“副作用”。在類組件中，我們有componentDidMount、componentDidUpdate和componentWillUnmount這些生命周期方法來處理這些副作用。但函數組件呢？它沒有這些生命周期方法啊！難道函數組件就不能有“副作用”了嗎？

當然不是！useEffect就是React為函數組件量身打造的“副作用管家”，它能讓我們在函數組件中也能優雅地處理各種副作用，讓函數組件也能像類組件一樣，擁有完整的“生命周期”體驗。是不是很神奇？接下來，咱們就一起揭開useEffect的神秘面紗！

在這里插入圖片描述

2. 🔄 React生命周期與useEffect的關系

在深入了解useEffect之前，我們先來快速回顧一下類組件的生命周期。如果你是React的老兵，這部分可以快速跳過；如果你是新手，這部分能幫你更好地理解useEffect的強大之處。

類組件的“一生”

類組件的生命周期就像一個人從出生、成長到離開的過程，主要分為三個階段：

  • 掛載階段（Mounting）：組件被創建并插入到DOM中。這個階段會依次調用constructor、static getDerivedStateFromProps、render和componentDidMount。
  • 更新階段（Updating）：組件的props或state發生變化時，組件會重新渲染。這個階段會依次調用static getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate。
  • 卸載階段（Unmounting）：組件從DOM中移除。這個階段會調用componentWillUnmount。

下圖展示了類組件的生命周期流程：

在這里插入圖片描述

useEffect：函數組件的“生命周期模擬器”

函數組件本身沒有這些生命周期方法，但useEffect的出現，讓函數組件也能擁有類似生命周期的能力。它就像一個多面手，能夠根據你的需求，扮演componentDidMount、componentDidUpdate和componentWillUnmount的角色。

1. 掛載時執行：componentDidMount的替代者

當你希望在組件首次渲染（掛載）后執行一些操作時，比如數據請求、事件監聽等，useEffect可以完美替代componentDidMount。你只需要給useEffect的第二個參數傳入一個空數組[]，它就會在組件掛載后執行一次，之后就不會再執行了。

2. 更新時執行：componentDidUpdate的替代者

當組件的某些狀態或屬性發生變化時，你希望執行一些操作，比如根據新的數據重新計算、更新DOM等，useEffect可以替代componentDidUpdate。你只需要把需要監聽的狀態或屬性放到useEffect的第二個參數（依賴數組）中，當這些依賴項發生變化時，useEffect就會重新執行。

3. 卸載時執行：componentWillUnmount的替代者

當組件即將從DOM中移除時，你可能需要做一些清理工作，比如清除定時器、取消事件監聽等，以防止內存泄漏。useEffect的回調函數可以返回一個清理函數，這個清理函數會在組件卸載時執行。這就像componentWillUnmount的作用。

是不是感覺useEffect很強大？它把類組件中分散在不同生命周期方法里的副作用邏輯，都集中到了一個API里，讓我們的代碼更加簡潔和易于維護。接下來，咱們就來看看useEffect的具體用法。

在這里插入圖片描述

3. ? useEffect基礎語法詳解

useEffect的語法非常簡潔，就像它的名字一樣，就是“使用效果”：

useEffect(() => {// 在這里執行副作用操作return () => {// 在這里執行清理操作};
}, [依賴項]);

它接收兩個參數：

第一個參數：回調函數（callback）

這個回調函數就是你放置副作用邏輯的地方。當組件渲染完成后，React會執行這個函數。你可以在這里進行數據請求、DOM操作、事件監聽等任何你需要的副作用操作。

小貼士：這個回調函數是同步執行的，但它會在瀏覽器完成布局和繪制之后，在一個單獨的“副作用階段”執行，所以它不會阻塞瀏覽器渲染。

第二個參數：依賴數組（array，可選）

這是一個可選的數組，用于控制useEffect的執行時機。它就像useEffect的“開關”和“過濾器”：

  • 如果你不提供這個參數：useEffect會在每次組件渲染后都執行。這就像一個“話癆”，組件一有風吹草動，它就出來“嘮叨”一番。
  • 如果你提供一個空數組[]：useEffect只會在組件首次掛載時執行一次，之后無論組件如何更新，它都不會再執行。這就像一個“專一”的管家，只在主人“入住”時忙活一次，之后就“退休”了。
  • 如果你提供一個包含依賴項的數組[dep1, dep2, ...]：useEffect會在組件首次掛載時執行一次，并且在數組中的任何一個依賴項發生變化時，它會重新執行。這就像一個“敏感”的管家，只對它“關心”的事情做出反應。

返回值：清理函數（cleanup function）

useEffect的回調函數可以返回一個函數，這個返回的函數就是“清理函數”。它的作用是在下一次useEffect執行之前，或者在組件卸載之前，執行一些清理工作。比如，清除定時器、取消事件監聽、取消網絡請求等。

為什么需要清理函數？

想象一下，你打開了一個水龍頭（設置了定時器），如果用完不關（不清除定時器），水就會一直流，造成浪費（內存泄漏）。清理函數就是那個幫你“關水龍頭”的。它能確保你的副作用操作不會留下“爛攤子”，避免不必要的資源占用和潛在的bug。

清理函數會在以下兩種情況下執行：

  1. 組件卸載時：當組件從DOM中移除時，清理函數會執行。
  2. 依賴項變化時：在useEffect重新執行之前（因為依賴項發生了變化），上一次的清理函數會先執行，然后再執行新的副作用函數。

理解了這些基礎概念，我們就可以開始探索useEffect的“三種人格”了！

4. 🎭 useEffect的三種"人格"

useEffect就像一個擁有多重人格的“演員”，它會根據你給它的“劇本”（依賴數組）來決定如何“表演”。

話癆模式：無依賴數組

useEffect(() => {console.log('我每次渲染都會執行！');
});

當你不給useEffect提供第二個參數（依賴數組）時，它就會進入“話癆模式”。這意味著，組件的每一次渲染，它都會執行一次。無論是組件首次掛載，還是組件的props或state發生任何變化導致重新渲染，這個useEffect都會被觸發。

適用場景：這種模式在實際開發中比較少用，因為它可能會導致不必要的性能開銷。但如果你確實需要在每次渲染后都執行某些操作，比如每次渲染后都記錄日志，或者每次渲染后都進行一些DOM操作，那么這種模式是適用的。

專一模式：空依賴數組 []

useEffect(() => {console.log('我只在組件首次掛載時執行一次！');// 比如：數據請求、事件監聽return () => {console.log('我只在組件卸載時執行一次！');// 比如：清除事件監聽};
}, []);

當你給useEffect提供一個空數組[]作為第二個參數時，它就進入了“專一模式”。這意味著，它只會在組件首次掛載時執行一次。之后無論組件如何更新，它都不會再執行。它的清理函數也只會在組件卸載時執行一次。

適用場景：這種模式非常常用，它完美替代了類組件的componentDidMount和componentWillUnmount。例如：

  • 初始化數據請求：在組件加載完成后，只請求一次數據。
  • 添加全局事件監聽：比如監聽窗口大小變化、鍵盤事件等，并在組件卸載時移除監聽。
  • 初始化第三方庫：在組件掛載時初始化一些只需要執行一次的第三方庫。

敏感模式：有依賴數組 [dep1, dep2, ...]

useEffect(() => {console.log('我的依賴項變化了，我重新執行了！');// 比如：根據count的變化更新標題return () => {console.log('我的依賴項變化了，我先清理一下上一次的副作用！');};
}, [count]); // 只有當count變化時才執行

當你給useEffect提供一個包含依賴項的數組時，它就進入了“敏感模式”。這意味著，它會在組件首次掛載時執行一次，并且只有當數組中的任何一個依賴項發生變化時，它才會重新執行。在重新執行之前，它會先執行上一次的清理函數。

適用場景：這種模式是useEffect最強大和最常用的模式，它替代了類組件的componentDidUpdate。例如：

  • 根據props或state的變化請求數據：當用戶ID變化時，重新請求用戶數據。
  • 根據輸入框內容變化進行搜索：當搜索關鍵詞變化時，重新發起搜索請求。
  • 動態修改DOM：根據某個狀態的變化來修改DOM元素的樣式或屬性。

理解了這三種“人格”，你就能更好地駕馭useEffect，讓它在你的React應用中發揮最大的作用。接下來，咱們就通過一個實戰案例，來感受一下useEffect的魅力！

5. 🛠? 實戰案例：計數器小應用

理論知識講了這么多，是時候來點實際的了！咱們用一個簡單的計數器應用，來感受一下useEffect的強大。

這個計數器應用有以下幾個功能：

  1. 顯示當前的計數。
  2. 點擊“增加”按鈕，計數加1。
  3. 點擊“改變”按鈕，改變一個名稱。
  4. 組件掛載后，每秒自動增加計數。
  5. 組件卸載時，清除定時器，防止內存泄漏。
import React, { useEffect, useState } from 'react';
// import { root } from "./main"; // 如果是實際項目，可能需要引入ReactDOM的unmount方法function App() {// 使用useState定義計數器狀態count和更新函數setCountconst [count, setCount] = useState(0);// 使用useState定義名稱狀態name和更新函數setNameconst [name, setName] = useState("小滴課堂");// 增加計數的方法const add = () => {setCount(prevCount => prevCount + 1); // 使用函數式更新，確保獲取到最新的count值};// 改變名稱的方法const change = () => {setName("xdclass.net");};// 卸載組件的方法（這里只是模擬，實際應用中通常由路由或父組件控制）const handleDelet = () => {// root.unmount(); // 實際項目中，如果需要卸載整個React應用，可以使用ReactDOM.unmountconsole.log("模擬組件卸載");};// 使用useEffect處理副作用：設置定時器和清理定時器useEffect(() => {// 設置一個定時器，每秒更新一次countconst timer = setInterval(() => {setCount(prevCount => prevCount + 1); // 使用函數式更新，避免閉包陷阱，確保每次都基于最新狀態更新}, 1000);// 返回一個清理函數，在組件卸載或依賴項變化前執行return () => {clearInterval(timer); // 清除定時器，防止內存泄漏console.log("組件卸載了，定時器已清除！");};}, []); // 空數組表示這個useEffect只在組件掛載和卸載時執行一次// 另一個useEffect，用于在count變化時更新頁面標題useEffect(() => {document.title = `你點擊了 ${count} 次！`;console.log(`頁面標題更新為: 你點擊了 ${count} 次！`);}, [count]); // 依賴項為count，只有當count變化時才執行return (<div><h1>當前的計數: {count}</h1><button onClick={add}>增加</button><h1>{name}</h1><button onClick={change}>改變</button><button onClick={handleDelet}>卸載組件</button></div>);
}export default App;

🖼? 效果演示：
在這里插入圖片描述

代碼解析：

  1. useState(0) 和 useState("小滴課堂")：我們使用useState Hook來定義兩個狀態變量：count（計數器）和name（名稱）。它們分別有初始值0和“小滴課堂”。
  2. add 和 change 函數：這兩個是普通的JavaScript函數，用于更新count和name狀態。注意setCount(prevCount => prevCount + 1)這種函數式更新的方式，它能確保在異步更新時，總是基于最新的狀態值進行計算，避免閉包陷阱。
  3. 第一個 useEffect：
    • 它接收一個空數組[]作為依賴項，這意味著它只會在組件首次掛載時執行一次。這完美模擬了componentDidMount的行為。
    • 在回調函數中，我們使用setInterval設置了一個定時器，每秒鐘讓count加1。這里同樣使用了函數式更新setCount(prevCount => prevCount + 1)。
    • 它返回了一個清理函數return () => { clearInterval(timer); ... }。這個清理函數會在組件卸載時執行，負責清除定時器。這完美模擬了componentWillUnmount的行為，防止了內存泄漏。
  4. 第二個 useEffect：
    • 它接收[count]作為依賴項，這意味著只有當count的值發生變化時，這個useEffect才會重新執行。這完美模擬了componentDidUpdate的行為。
    • 在回調函數中，我們修改了頁面的標題，使其顯示當前的計數。

通過這個例子，你可以清晰地看到useEffect是如何在函數組件中處理掛載、更新和卸載階段的副作用的。它把這些邏輯集中在一起，讓代碼更加清晰和易于管理。

在這里插入圖片描述

6. ?? 常見陷阱與最佳實踐

在使用useEffect的過程中，有一些常見的陷阱需要避免，同時也有一些最佳實踐可以讓你的代碼更加健壯和高效。

陷阱一：無限循環的噩夢

這是新手最容易踩的坑！看看下面這個例子：

// ? 錯誤示例：會導致無限循環
function BadExample() {const [count, setCount] = useState(0);const [user, setUser] = useState(null);useEffect(() => {// 每次渲染都會執行，導致無限循環setUser({ name: 'John', age: count });}); // 注意：這里沒有依賴數組！return <div>Count: {count}</div>;
}

問題分析：由于沒有提供依賴數組，useEffect會在每次渲染后執行。而setUser會觸發組件重新渲染，重新渲染又會觸發useEffect，形成無限循環。

正確做法：

// ? 正確示例：使用依賴數組控制執行時機
function GoodExample() {const [count, setCount] = useState(0);const [user, setUser] = useState(null);useEffect(() => {// 只有當count變化時才執行setUser({ name: 'John', age: count });}, [count]); // 明確指定依賴項return <div>Count: {count}</div>;
}

陷阱二：依賴數組的"遺漏癥"

另一個常見問題是在依賴數組中遺漏了某些依賴項：

// ? 錯誤示例：遺漏了依賴項
function BadExample() {const [count, setCount] = useState(0);const [multiplier, setMultiplier] = useState(2);useEffect(() => {const result = count * multiplier;console.log(`結果: ${result}`);}, [count]); // 遺漏了multiplier！return (<div><p>Count: {count}</p><p>Multiplier: {multiplier}</p></div>);
}

問題分析：當multiplier變化時，useEffect不會重新執行，因為依賴數組中沒有包含multiplier。這可能導致顯示的結果不正確。

正確做法：

// ? 正確示例：包含所有依賴項
function GoodExample() {const [count, setCount] = useState(0);const [multiplier, setMultiplier] = useState(2);useEffect(() => {const result = count * multiplier;console.log(`結果: ${result}`);}, [count, multiplier]); // 包含所有使用到的狀態變量return (<div><p>Count: {count}</p><p>Multiplier: {multiplier}</p></div>);
}

陷阱三：忘記清理的"內存泄漏"

這是一個非常嚴重的問題，可能導致內存泄漏和性能問題：

// ? 錯誤示例：忘記清理定時器
function BadExample() {const [count, setCount] = useState(0);useEffect(() => {const timer = setInterval(() => {setCount(prev => prev + 1);}, 1000);// 忘記返回清理函數！}, []);return <div>Count: {count}</div>;
}

問題分析：當組件卸載時，定時器仍然在運行，這會導致內存泄漏，并且可能在組件已經卸載后還嘗試更新狀態，導致警告或錯誤。

正確做法：

// ? 正確示例：記得清理副作用
function GoodExample() {const [count, setCount] = useState(0);useEffect(() => {const timer = setInterval(() => {setCount(prev => prev + 1);}, 1000);// 返回清理函數return () => {clearInterval(timer);};}, []);return <div>Count: {count}</div>;
}

最佳實踐

1. 使用ESLint插件

安裝eslint-plugin-react-hooks插件，它能幫你自動檢測useEffect的依賴項問題：

npm install eslint-plugin-react-hooks --save-dev

2. 一個useEffect只做一件事

不要在一個useEffect中處理多個不相關的副作用，這樣會讓代碼難以理解和維護：

// ? 不推薦：一個useEffect處理多個不相關的事情
useEffect(() => {// 處理數據請求fetchUserData();// 處理定時器const timer = setInterval(() => {updateTime();}, 1000);// 處理事件監聽window.addEventListener('resize', handleResize);return () => {clearInterval(timer);window.removeEventListener('resize', handleResize);};
}, []);// ? 推薦：分離不同的副作用
useEffect(() => {fetchUserData();
}, []);useEffect(() => {const timer = setInterval(() => {updateTime();}, 1000);return () => clearInterval(timer);
}, []);useEffect(() => {window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};
}, []);

3. 使用自定義Hook封裝復雜邏輯

當useEffect的邏輯變得復雜時，考慮將其封裝成自定義Hook：

// 自定義Hook：useTimer
function useTimer(initialCount = 0) {const [count, setCount] = useState(initialCount);useEffect(() => {const timer = setInterval(() => {setCount(prev => prev + 1);}, 1000);return () => clearInterval(timer);}, []);return count;
}// 在組件中使用
function MyComponent() {const count = useTimer(0);return <div>Timer: {count}</div>;
}

記住這些陷阱和最佳實踐，你就能更好地駕馭useEffect，寫出更加健壯和高效的React代碼！

7. 🎉 總結：useEffect讓函數組件"活"起來

恭喜你，已經掌握了useEffect這個React函數組件的“生活管家”！

通過今天的學習，我們了解到：

  • 副作用無處不在：在React應用中，數據請求、DOM操作、事件監聽等都是常見的副作用。
  • useEffect是函數組件處理副作用的利器：它能夠模擬類組件的生命周期方法，讓函數組件也能優雅地處理掛載、更新和卸載階段的邏輯。
  • 依賴數組是useEffect的“靈魂”：通過控制依賴數組，我們可以精確地控制useEffect的執行時機，實現“話癆模式”、“專一模式”和“敏感模式”。
  • 清理函數至關重要：它能幫助我們避免內存泄漏，確保副作用操作的“善始善終”。
  • 避免常見陷阱，遵循最佳實踐：正確使用依賴數組，分離副作用邏輯，并善用自定義Hook，能讓你的代碼更加健壯和易于維護。

useEffect的出現，極大地提升了React函數組件的能力，讓我們可以用更簡潔、更聲明式的方式來編寫組件邏輯。它讓函數組件不再是簡單的UI渲染器，而是能夠擁有完整“生命”的、充滿活力的“個體”。

希望這篇博客能幫助你更好地理解和使用useEffect。如果你有任何疑問或心得，歡迎在評論區交流！我們下期再見！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/916739.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/916739.shtml
英文地址，請注明出處：http://en.pswp.cn/news/916739.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

python基礎：request請求Cookie保持登錄狀態、重定向與歷史請求、SSL證書校驗、超時和重試失敗、自動生成request請求代碼和案例實踐

python基礎：request請求Cookie保持登錄狀態、重定向與歷史請求、SSL證書校驗、超時和重試失敗、自動生成request請求代碼和案例實踐

Cookie保持登錄狀態cookie session鑒權機制 cookie是由web服務器保存在用戶瀏覽器&#xff08;客戶端&#xff09;上的小文本文件&#xff0c;他可以包含有關用戶的信息。無論何時用戶訪問到服務器&#xff0c;都會帶上該服務器的cookie信息&#xff0c;一般cookie都是有有效期…
閱讀更多...
Vulkan入門教程 | 第二部分：創建實例

Vulkan入門教程 | 第二部分：創建實例

前言&#xff1a;本教程為筆者依據教程https://docs.vulkan.net.cn/spec/latest/index.html#_about進行Vulkan學習并結合自己的理解整理的筆記&#xff0c;供大家學習和參考。 &#xff08;注意&#xff1a;代碼僅為片段&#xff0c;非完整程序&#xff09; 學習前提&#xff1…
閱讀更多...
PHP云原生架構：容器化、Kubernetes與Serverless實踐

PHP云原生架構：容器化、Kubernetes與Serverless實踐

引言 隨著云計算的普及，PHP應用也在向云原生架構演進。本文將深入探討PHP在云原生環境中的最佳實踐，包括容器化部署、Kubernetes編排、Serverless架構以及云原生監控與日志方案，幫助開發者構建現代化、可擴展的PHP應用。 容器化PHP應用 基礎Dockerfile優化 # 多階段構建…
閱讀更多...
【華為機試】5. 最長回文子串

【華為機試】5. 最長回文子串

文章目錄5. 最長回文子串描述示例 1示例 2示例 3示例 4提示解題思路方法一&#xff1a;中心擴展法&#xff08;推薦&#xff09;方法二&#xff1a;動態規劃方法三&#xff1a;Manacher算法方法四&#xff1a;暴力解法代碼實現復雜度分析測試用例完整題解代碼5. 最長回文子串 …
閱讀更多...
【圖像處理基石】如何對遙感圖像進行實例分割？

【圖像處理基石】如何對遙感圖像進行實例分割？

遙感圖像實例分割是指在遙感影像中&#xff0c;不僅要識別出不同類別的目標&#xff08;如建筑物、車輛、道路等&#xff09;&#xff0c;還要區分同一類別中的不同個體&#xff08;如建筑物1、建筑物2&#xff09;&#xff0c;并為每個實例生成精確的像素級掩碼。 一、遙感圖…
閱讀更多...
電子電氣架構 --- 軟件bug的管理模式

電子電氣架構 --- 軟件bug的管理模式

我是穿拖鞋的漢子，魔都中堅持長期主義的汽車電子工程師。 老規矩，分享一段喜歡的文字，避免自己成為高知識低文化的工程師： 簡單，單純，喜歡獨處，獨來獨往，不易合同頻過著接地氣的生活，除了生存溫飽問題之外，沒有什么過多的欲望，表面看起來很高冷，內心熱情，如果你身…
閱讀更多...
【每日一錯】Oracle 19c CDB中如何啟動一個PDB

【每日一錯】Oracle 19c CDB中如何啟動一個PDB

文章目錄題目擴展學習CDB與PDB的概念CDB&#xff0c;PDB結構優勢總結題目 擴展學習 CDB與PDB的概念 在Oracle 12c及以上版本&#xff0c;Oracle引入了多租戶架構&#xff0c;這種架構讓數據庫的管理和資源使用更加高效。它由兩種主要組成部分組成&#xff1a; CDB&#xff0…
閱讀更多...
Android studio自帶的Android模擬器都是x86架構的嗎，需要把arm架構的app翻譯成x86指令？

Android studio自帶的Android模擬器都是x86架構的嗎，需要把arm架構的app翻譯成x86指令？

Android studio自帶的Android模擬器都是x86架構的嗎&#xff0c;需要把arm架構的app翻譯成x86指令&#xff1f; deepseek回答&#xff1a; Android Studio 自帶的官方模擬器&#xff08;Android Emulator&#xff09;主要提供基于 x86 架構的系統鏡像。當運行 ARM 架構的應用…
閱讀更多...
Deep Learning_ Foundations and Concepts-Springer (2024)【拜讀】20章3節

Deep Learning_ Foundations and Concepts-Springer (2024)【拜讀】20章3節

Diffusion Models 擴散模型 我們已經了解到&#xff0c;構建強大的生成模型的一種有效方法是&#xff1a;先引入一個關于潛在變量z的分布p(z)&#xff0c;然后使用深度神經網絡將z變換到數據空間x。由于神經網絡具有通用性&#xff0c;能夠將簡單固定的分布轉化為關于x的高度靈…
閱讀更多...
Arduino與STM32：初學者該如何選擇？

Arduino與STM32：初學者該如何選擇？

在電子愛好者和初學者的世界里&#xff0c;Arduino和STM32是兩個經常被提及的名字。它們各自具有獨特的優勢和特點&#xff0c;適合不同類型的項目和需求。對于初學者來說&#xff0c;選擇Arduino還是STM32&#xff0c;往往取決于個人的學習目標、項目需求以及預算。本文將詳細…
閱讀更多...
創建型設計模式-工廠方法模式和抽象工廠方法模式

創建型設計模式-工廠方法模式和抽象工廠方法模式

1、工廠方法模式 創建型設計模式之一 UML類圖2、抽象工廠模式 也是創建型設計模式之一。雖然抽象工廠方法模式的類繁多&#xff0c;但是&#xff0c;主要分為4類。 AbstractFactory&#xff1a;抽象工廠角色&#xff0c;它聲明了一組用于創建一種產品的方法&#xff0c;每一個方…
閱讀更多...
Hyperchain安全與隱私機制詳解

Hyperchain安全與隱私機制詳解

一、核心安全機制1. 共識算法安全RBFT共識算法&#xff1a;改進型PBFT&#xff1a;基于PBFT算法優化&#xff0c;增加動態節點管理、失效數據恢復機制&#xff0c;提升系統容錯性與可用性。性能指標&#xff1a;吞吐量穩定達3000-10000 TPS&#xff0c;交易執行時間控制在300ms…
閱讀更多...
Oracle優化學習十六

Oracle優化學習十六

反連接反連接&#xff08;Anti Join&#xff09;是一種特殊的連接類型&#xff0c;與內連接和外連接不同&#xff0c;Oracle數據庫里并沒有相關的 關鍵字可以在SQL文本中專門表示反連接&#xff0c;所以這里把它單獨拿出來說明。為了方便說明反連接的含義&#xff0c;我們用“t…
閱讀更多...
梳理一些 Docker 常用命令

梳理一些 Docker 常用命令

以下是一些 Docker 常用命令&#xff0c;適用于日常開發、調試、部署等場景&#xff0c;分為幾個常用類別&#xff1a;&#x1f4e6; 一、鏡像&#xff08;Image&#xff09;相關命令命令說明docker images查看本地所有鏡像docker pull <image>拉取鏡像&#xff08;如 do…
閱讀更多...
C#_ArrayList動態數組

C#_ArrayList動態數組

目錄 ArrayList的特點 ArrayList 與普通數組的區別 使用示例&#xff1a; 普通數組 動態數組 主要方法和屬性 屬性&#xff1a; Count 獲取動態數組的數據個數 讀取某個位置的數據 // 索引 方法&#xff1a; Add 向集合末尾添加元素 Insert 在指定位置插入元…
閱讀更多...
Agent領域，近年來的前沿研究方向：多智能體協作、認知啟發架構、倫理安全、邊緣計算集成

Agent領域，近年來的前沿研究方向：多智能體協作、認知啟發架構、倫理安全、邊緣計算集成

Agent領域，近年來的前沿研究方向：多智能體協作、認知啟發架構、倫理安全、邊緣計算集成 在Agent領域，近年來的前沿研究方向主要集中在多智能體協作、認知啟發架構、倫理安全、邊緣計算集成以及生成式AI融合等方面。 一、多智能體協作與多模態任務 多智能體系統在復雜環境…
閱讀更多...
【安卓筆記】OOM與內存優化

【安卓筆記】OOM與內存優化

0. 環境&#xff1a; 電腦&#xff1a;Windows10 Android Studio: 2024.3.2 編程語言: Java Gradle version&#xff1a;8.11.1 Compile Sdk Version&#xff1a;35 Java 版本&#xff1a;Java11 1.什么是OOM OOM即 OutOfMemoryError 內存溢出錯誤。常見于一些 資源型對…
閱讀更多...
持續集成CI與自動化測試

持續集成CI與自動化測試

Python接口自動化測試零基礎入門到精通&#xff08;2025最新版&#xff09;
閱讀更多...
Spring 策略模式實現

Spring 策略模式實現

Spring 策略模式實現&#xff1a;工廠方法與自動注入詳解 1. 背景介紹 在復雜的業務系統中,我們常常需要根據不同的場景選擇不同的處理策略。本文將詳細介紹在 Spring 框架中實現策略模式的兩種主要方法。 2. 方案一: 手動注冊工廠模式 2.1 定義工廠類 Component public class …
閱讀更多...
機器學習——線性回歸（LinearRegression）

機器學習——線性回歸（LinearRegression）

Python 線性回歸詳解&#xff1a;從原理到實戰線性回歸&#xff08;Linear Regression&#xff09;是機器學習中最基礎也是最重要的算法之一&#xff0c;廣泛應用于預測分析領域&#xff0c;例如房價預測、銷售額預測等。本文將帶你從理論出發&#xff0c;用 Python 手把手實現…
閱讀更多...
最新文章

Copyright @ 2022~2023