深度探讨 useEffect 使用规范

2023-11-27 18:30:21 浏览数 (1)

我们在乘坐地铁或者公交车的时候,在地铁门或者公交车门的旁边往往会有「禁止依靠」这样的标识。目的是为了警告乘客不要依靠车门,否则开门的时候容易出现不可预测的危险。

但是如果我们仔细去分析这个危险的话,就会知道,他的真实情况是,在车辆运行过程中,车门紧闭,你依靠在车门上也并不会出现危险,我们在上班高峰期挤地铁的时候,大量的人也不得不紧靠车门,甚至有的人被挤扁压在车门上。

在制定团队项目规范时也会这样,例如,我在带领团队时,一定会制定一条规范,要求每次代码提交之前,个人必须检查你的代码里是否存在意外的修改,可能有的人在提交之前手抖往代码里输入了一个空格或者逗号,从而导致重大事故。这是一个低概率发生的事情,但是我仍然会要求每次提交都要检查。

那么,是不是也就意味着,如果不遵守我这个规范,就一定会发现不可预测的重大事故呢?其实并非如此,我们制定规范的目的是为了让程序变得可控,比如团队里面有10个人的习惯都比较好,从来不会出现意外内容提交的情况,但是只要有一个人出现两次因为手抖把意外的修改提交到了代码仓库,那么这条规范就会出现。

既然这条规范的出现是为了避免意外的发生,于是有一个项目成员就对我的规范提出了质疑,他认为可以在配置上增加 pre-commit 的代码规则检测,如果有意外的发生,那么代码规则检测不会通过,我们就不用每次在提交之前花费心力去检查每一条 diff 里的修改了。

虽然我最终没有同意他的提议,但这是一个非常好的思路

所以作为一个优秀的开发者,我们到底是应该只要遵循规范就是完事了,还是应该去看懂规范出现的背后逻辑,从而灵活的运用他,或者探寻更好的解决方案呢?

我的答案是后者。

如果在这个观念的基础之上我们能达成共识,我们再来一起结合 React 官方文档,对 useEffect 的使用规范进行深入探讨。

在这之前,我们要首先明确一下 useEffect 的语法规则,useEffect 的依赖项必须是 state 与 props,否则依赖项发生了变化,effect 也不会执行。所以有的人说:我不愿意把 state 放到依赖项里,甚至反感这样的行为,我认为是没有任何理论依据的。

1

计算属性

在 vue 和 mobx 里都有计算属性这样的概念。因此有的人就想,在 react hook 中,是否可以借助 useEffect 来达到计算属性的目的。

官方文档明确的建议是,不需要这样做

代码语言:javascript复制
// 案例来自官方文档
// https://zh-hans.react.dev/learn/you-might-not-need-an-effect
function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // 


	

0 人点赞