【 React 】理解副作用真的很简单 - (阅读2分钟)

193 阅读2分钟

副作用

"副作用" 在计算机科学中源自函数式编程范式,指的是函数除返回值外对其他部分产生的影响。

这个定义理解不?

懂了,好像又没懂!!!

拆解问题,先看看副作用经常和什么名词挂钩

问题就来到老生常谈 --> 函数式编程理念中,纯函数是没有副作用的。

1、纯函数

相同的输入,总是产生相同的输出。

这不就是 : 纯函数完全由输入参数决定,没有内部状态或其他外部状态的影响

这不也就是类似: React中的纯函数组件?

组件渲染结果只依赖于传递给组件的 props,不依赖于组件内部状态或其他外部状态。 

如果组件需要访问外部数据、修改外部状态、订阅事件等

这些操作会导致组件的行为不再只由输入参数决定,从而破坏了纯函数的特性。

而这些操作,就是我们所说的副作用。


2、所以在React中副作用就是:

  • 组件渲染过程中执行的操作,即在useEffect中执行的这些操作(useEffect 本身就是为了处理副作用而设计的)

  • 如获取数据、订阅事件、更新 DOM 等


3、顺手一挖:

只有useEffect执行副作用操作,还有没有其他钩子?

useEffectOnce: 自定义 Hook,用于只执行一次副作用操作。
useEffectWithCleanup: 自定义 Hook,用于在组件卸载时执行清理操作的副作用函数。
useLayoutEffect:  在浏览器布局(DOM)更新之后同步调用副作用函数。

没怎么用过对不对,问题不大

这些Hook 基本就是useEffect的别名

通过命名明确 Hook 让开发者更清晰知道这些 Hook 的用途

而不是都全部都叫useEffect

但这又增加了丢丢学习成本

不过这都随团队的开发习惯来选择使用标准

无需过度关注~