React新文件：不要濫用effect哦

卡頌發表於2022-06-06
React

大家好，我卡頌。

你或你的同事在使用useEffect時有沒有發生過以下場景：

當你希望狀態a變化後發起請求，於是你使用了useEffect：

useEffect(() => {
  fetch(xxx);
}, [a])

這段程式碼執行符合預期，上線後也沒問題。

隨著需求不斷迭代，其他地方也會修改狀態a。但是在那個需求中，並不需要狀態a改變後發起請求。

你不想動之前的程式碼，又得修復這個bug，於是你增加了判斷條件：

useEffect(() => {
  if (xxxx) {
    fetch(xxx);
  }
}, [a])

某一天，需求又變化了！現在請求還需要b欄位。

這很簡單，你順手就將b作為useEffect的依賴加了進去：

useEffect(() => {
  if (xxxx) {
    fetch(xxx);
  }
}, [a, b])

隨著時間推移，你逐漸發現：

  • 是否傳送請求與if條件相關
  • 是否傳送請求還與a、b等依賴項相關
  • a、b等依賴項又與很多需求相關

根本分不清到底什麼時候會傳送請求，真是頭大...

如果以上場景似曾相識，那麼React新文件裡已經明確提供瞭解決辦法。

歡迎加入人類高質量前端框架群，帶飛

一些理論知識

新文件中這一節名為Synchronizing with Effects，當前還處於草稿狀態。

但是其中提到的一些概念，所有React開發者都應該清楚。

首先，effect這一節隸屬於Escape Hatches（逃生艙）這一章。

從命名就能看出，開發者並不一定需要使用effect，這僅僅是特殊情況下的逃生艙。

React中有兩個重要的概念：

  • Rendering code（渲染程式碼）
  • Event handlers（事件處理器）

Rendering code指開發者編寫的元件渲染邏輯，最終會返回一段JSX。

比如，如下元件內部就是Rendering code：

function App() {
  const [name, update] = useState('KaSong');
  
  return <div>Hello {name}</div>;
}

Rendering code的特點是：他應該是不帶副作用的純函式。

如下Rendering code包含副作用（count變化），就是不推薦的寫法：

let count = 0;

function App() {
  count++;
  const [name, update] = useState('KaSong');
  
  return <div>Hello {name}</div>;
}

處理副作用

Event handlers是元件內部包含的函式，用於執行使用者操作，可以包含副作用。

下面這些操作都屬於Event handlers：

  • 更新input輸入框
  • 提交表單
  • 導航到其他頁面

如下例子中元件內部的changeName方法就屬於Event handlers：

function App() {
  const [name, update] = useState('KaSong');
  
  const changeName = () => {
    update('KaKaSong');
  }
  
  return <div onClick={changeName}>Hello {name}</div>;
}

但是，並不是所有副作用都能在Event handlers中解決。

比如，在一個聊天室中，傳送訊息是使用者觸發的，應該交給Event handlers處理。

除此之外，聊天室需要隨時保持和服務端的長連線，保持長連線的行為屬於副作用，但並不是使用者行為觸發的。

對於這種：在檢視渲染後觸發的副作用，就屬於effect，應該交給useEffect處理。

回到開篇的例子：

當你希望狀態a變化後發起請求，首先應該明確，你的需求是：

狀態a變化，接下來需要發起請求

還是

某個使用者行為需要發起請求，請求依賴狀態a作為引數？

如果是後者，這是使用者行為觸發的副作用，那麼相關邏輯應該放在Event handlers中。

假設之前的程式碼邏輯是：

  1. 點選按鈕，觸發狀態a變化
  2. useEffect執行，傳送請求

應該修改為：

  1. 點選按鈕，在事件回撥中獲取狀態a的值
  2. 在事件回撥中傳送請求

經過這樣修改，狀態a變化與傳送請求之間不再有因果關係，後續對狀態a的修改不會再有無意間觸發請求的顧慮。

總結

當我們編寫元件時，應該儘量將元件編寫為純函式。

對於元件中的副作用，首先應該明確：

是使用者行為觸發的還是檢視渲染後主動觸發的？

對於前者，將邏輯放在Event handlers中處理。

對於後者，使用useEffect處理。

這也是為什麼useEffect所在章節在新文件中叫做Escape Hatches —— 大部分情況下，你不會用到useEffect，這只是其他情況都不適應時的逃生艙。

相關文章