React新文档切记不要滥用effect

 更新时间:2022年07月08日 10:58:51   作者:魔术师卡颂  
这篇文章主要为大家介绍了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等依赖项又与很多需求相关

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

如果以上场景似曾相识,那么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中。

假设之前的代码逻辑是:

  • 点击按钮,触发状态a变化
  • useEffect执行,发送请求

应该修改为:

  • 点击按钮,在事件回调中获取状态a的值
  • 在事件回调中发送请求

经过这样修改,状态a变化与发送请求之间不再有因果关系,后续对状态a的修改不会再有无意间触发请求的顾虑。

总结

当我们编写组件时,应该尽量将组件编写为纯函数。

对于组件中的副作用,首先应该明确:

是用户行为触发的还是视图渲染后主动触发的?

对于前者,将逻辑放在Event handlers中处理。

对于后者,使用useEffect处理。

这也是为什么useEffect所在章节在新文档中叫做Escape Hatches —— 大部分情况下,你不会用到useEffect,这只是其他情况都不适应时的逃生舱。

以上就是React新文档切记不要滥用effect的详细内容,更多关于React文档effect的资料请关注脚本之家其它相关文章!

相关文章

  • IntersectionObserver实现加载更多组件demo

    IntersectionObserver实现加载更多组件demo

    这篇文章主要为大家介绍了IntersectionObserver实现加载更多组件demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • React Fiber结构的创建步骤

    React Fiber结构的创建步骤

    这篇文章主要介绍了React Fiber结构的创建步骤,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • React如何实现全屏监听Esc键

    React如何实现全屏监听Esc键

    这篇文章主要介绍了React如何实现全屏监听Esc键,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React 组件间的通信示例

    React 组件间的通信示例

    这篇文章主要介绍了React 组件间的通信示例,主要通信划分为三种,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • React-intl 实现多语言的示例代码

    React-intl 实现多语言的示例代码

    本篇文章主要介绍了React-intl 实现多语言的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React前端框架实现原理的理解

    React前端框架实现原理的理解

    React是前端开发每天都用的前端框架,自然要深入掌握它的原理。我用 React 也挺久了,这篇文章就来总结一下我对 react 原理的理解,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-07-07
  • React中的Component组件详解

    React中的Component组件详解

    本章节,我们将一起探讨 React 中类组件和函数组件的定义,不同组件的通信方式,以及常规组件的强化方式,帮助你全方位认识 React 组件,从而对 React 的底层逻辑有进一步的理解,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • react脚手架构建运行时报错问题及解决

    react脚手架构建运行时报错问题及解决

    这篇文章主要介绍了react脚手架构建运行时报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react-native中ListView组件点击跳转的方法示例

    react-native中ListView组件点击跳转的方法示例

    ListView作为React Native的核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。下面这篇文章主要给大家介绍了关于react-native中ListView组件点击跳转的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • 用React实现一个类 chatGPT 的交互式问答组件的方法详解

    用React实现一个类 chatGPT 的交互式问答组件的方法详解

    这篇文章主要给大家详细介绍如何用React实现一个类 chatGPT 的交互式问答组件的方法,文中有详细的代码示例,对我们学习有一定的帮助,需要的朋友可以参考下
    2023-06-06

最新评论