作用 VS 副作用

響應式作用：
響應式作用是 Vue 響應式系統的一部分，它指的是跟蹤函數的依賴關系，并在它們的值發生變化時重新運行該函數的過程。watchEffect 是最直接的創建作用的方式（如 watch 和 computed）。

副作用：
副作用（side effect）用于描述超出其局部作用域的操作或函數。當描述一個函數有副作用時，意味著該函數除了返回一個值外，還執行了函數外可以觀察到的操作，如更新狀態中的值或觸發網絡請求。該術語通常描述渲染或計算屬性。最佳實踐是渲染不應該有副作用，同樣，計算屬性的 getter 函數不應該有副作用。

在函數式編程中，純函數是指其輸出僅依賴于輸入參數，沒有任何副作用。而副作用是指函數執行過程中對外部狀態的修改或者對外部世界的影響。這個概念被引入到響應式框架設計中，用于明確區分哪些僅僅是計算的數據變化的邏輯（作用）和那些影響外部狀態的操作。

Vue 中的副作用：
類似于函數式編程的副作用操作，涉及到對外部狀態的修改或外部行為的觸發。副作用并不是負面的影響。區分：純粹的計算（作用）和涉及到外部狀態或行為（副作用）。利用生命周期鉤子 onMounted 和 onUnmounted 管理副作用，確保在加載和卸載時清理外部資源。使用組合式 API，如 watchEffect、watch 和 computed 創建作用，并在需要時處理副作用。

React 中的副作用：
React 中的副作用是指在組件渲染過程中執行的操作，這些操作可能會影響到組件之外的狀態或行為。常見的副作用包括數據獲取、訂閱、手動更改 DOM 以及記錄日志等。React 通過 useEffect Hook 來處理副作用。useEffect 接受一個函數，該函數會在組件渲染后執行，可以在函數中返回一個清理函數，以便在組件卸載或副作用重新執行前清理資源。

React 提供了 “嚴格模式”，在嚴格模式下開發時，它將會調用每個組件函數兩次（但是丟棄第二個結果）。通過重復調用組件函數，嚴格模式有助于找到違反這些規則的組件。

如需引入嚴格模式，你可以用 <React.StrictMode> 包裹根組件。

哪些地方可能引發副作用

函數式編程在很大程度上依賴于純函數，但某些事物在特定情況下不得不發生改變。這是編程的要義！

這些變動包括更新屏幕、啟動動畫、更改數據等，它們被稱為 副作用。它們是 “額外” 發生的事情，與渲染過程無關。

在 React 中，副作用通常屬于 事件處理程序。事件處理程序是 React 在你執行某些操作（如單擊按鈕）時運行的函數。即使事件處理程序是在你的組件內部定義的，它們也不會在渲染期間運行！因此事件處理程序無需是純函數。

如果你用盡一切辦法，仍無法為副作用找到合適的事件處理程序，你還可以調用組件中的 useEffect 方法將其附加到返回的 JSX 中。這會告訴 React 在渲染結束后執行它。然而，這種方法應該是你最后的手段。

import React, { useState, useEffect } from 'react';function ExampleComponent() {const [count, setCount] = useState(0);useEffect(() => {// 副作用：更新文檔標題document.title = `You clicked ${count} times`;// 清理函數：在組件卸載或副作用重新執行前清理return () => {document.title = 'React App';};}, [count]); // 僅在 count 變化時執行副作用return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

React VS Vue

作用與副作用對比

Vue

• 作用：
  • Vue 的響應式系統會自動跟蹤依賴關系，并在依賴變化時重新計算。
  • 使用 watchEffect、watch 和 computed 來創建作用。
• 副作用：
  • 副作用是指對外部狀態的修改或外部行為的觸發。
  • 使用生命周期鉤子如 onMounted 和 onUnmounted 來管理副作用，確保在加載和卸載時清理外部資源。
  • 組合式 API（如 watchEffect、watch 和 computed）可以處理副作用。

React

• 作用：
  • React 沒有內置的響應式系統，依賴于組件的狀態和屬性來觸發重新渲染。
• 副作用：
  • 副作用是指在組件渲染過程中執行的操作，可能會影響組件之外的狀態或行為。
  • 使用 useEffect Hook 來處理副作用。
  • useEffect 接受一個函數，該函數會在組件渲染后執行，可以返回一個清理函數，以便在組件卸載或副作用重新執行前清理資源。

以上 →🐒