React新文檔：不要濫用effect哦

大家好，我卡頌。

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

當你希望狀態(tài)a變化后發(fā)起請求，于是你使用了useEffect：

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

這段代碼運行符合預期，上線后也沒問題。

隨著需求不斷迭代，其他地方也會修改狀態(tài)a。但是在那個需求中，并不需要狀態(tài)a改變后發(fā)起請求。

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

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

某一天，需求又變化了！現(xiàn)在請求還需要b字段。

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

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

隨著時間推移，你逐漸發(fā)現(xiàn)：

• 是否發(fā)送請求與if條件相關(guān)
• 是否發(fā)送請求還與a、b等依賴項相關(guān)
• a、b等依賴項又與很多需求相關(guān)

一些理論知識

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

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

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

處理副作用

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

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

1. 點擊按鈕，觸發(fā)狀態(tài)a變化
2. useEffect執(zhí)行，發(fā)送請求

1. 點擊按鈕，在事件回調(diào)中獲取狀態(tài)a的值
2. 在事件回調(diào)中發(fā)送請求

總結(jié)