文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React新文档:不要滥用Effect哦

2024-12-13 21:50

关注

大家好,我卡颂。

你或你的同事在使用​​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])

随着时间推移,你逐渐发现:

根本分不清到底什么时候会发送请求,真是头大...

如果以上场景似曾相识,那么​​React​​新文档里已经明确提供了解决办法。

一些理论知识

新文档中这一节名为Synchronizing with Effects[1],当前还处于草稿状态。

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

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

从命名就能看出,开发者并不一定需要使用​​effect​​,这仅仅是特殊情况下的逃生舱。

​React​​中有两个重要的概念:

​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​​:

如下例子中组件内部的​​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​。

来源:魔术师卡颂内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯