React新文档：不要滥用effect哦

大家好，我卡颂。

你或你的同事在使用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等依赖项又与很多需求相关

一些理论知识

• 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. 点击按钮，触发状态a变化
2. useEffect执行，发送请求

1. 点击按钮，在事件回调中获取状态a的值
2. 在事件回调中发送请求

总结