React新文档:不要滥用Effect哦

开发 前端
新文档中这一节名为Synchronizing with Effects[1],当前还处于草稿状态。但是其中提到的一些概念,所有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[1],当前还处于草稿状态。

但是其中提到的一些概念,所有​​React​​开发者都应该清楚。

首先,​​effect​​这一节隶属于Escape Hatches[2](逃生舱)这一章。

图片

从命名就能看出,开发者并不一定需要使用​​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​​,这只是其他情况都不适应时的逃生舱。

参考资料

[1]Synchronizing with Effects:https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects。

[2]Escape Hatches:https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/escape-hatches​。

责任编辑:姜华 来源: 魔术师卡颂
相关推荐

2022-06-15 22:33:07

React逃生舱

2021-10-22 15:45:32

开发技能React

2022-05-27 16:03:37

ReactDanVue

2023-03-20 07:12:54

GPT学习React

2023-11-07 11:24:18

2023-07-14 07:23:21

ReactuseEffect

2012-02-20 09:56:55

ibmdw

2009-03-11 08:46:46

Chrome浏览器更新

2023-01-05 08:34:48

JDK工具

2020-10-19 10:25:57

ReactReact.js前端

2022-07-11 06:56:00

Reactreact-dom

2022-05-20 15:27:41

React工具Vue

2023-04-11 16:31:10

开发React 库Web

2023-03-19 11:42:19

React新官方文档

2021-02-08 18:25:52

微软WindowsWindows 10

2012-02-16 13:36:39

JavaJavaFX

2023-05-19 10:04:18

Vue开发者代码

2021-07-26 10:36:04

华为云云办公

2021-08-06 09:30:34

人工智能AI人脸识别

2013-03-21 17:42:35

点赞
收藏

51CTO技术栈公众号