React各种场景中箭头函数大括号的省略

994 阅读2分钟

大家好,我是江湖不渡i,前端菜鸡,react初学者。
看完大家别骂我标题党🐶🐶🐶,明明写着React实际却是基础的东西和React关系不大,毕竟是在学习React过程中遇到的,勉强算里面也不为过哈哈。

钻牛角尖的起因是今天看完视频自己敲代码然后和仓库代码比较的时候发现了下面的的代码:

<!-- 这是我写的 -->
<input
  type="text"
  value={xxx}
  onChange={(e) => {
    setPerson({ ...person, name: e.target.value });
  }}
/>
<!-- 这是视频中老师写的 -->
<input
  type="text"
  value={xxx}
  onChange={(e) => setPerson({ ...person, name: e.target.value });}
/>

各位大佬们应该发现区别了吧😂一个有大括号,一个没有大括号。

我知道这是箭头函数的简写,但是我对隐藏的这个return产生了疑问。因为在自己浅薄的认知中,箭头函数省略大括号会隐式返回这行代码的值,通俗地说就是隐藏的加一个return。这时候我就有点奇怪了,难道绑定方法还要return吗?我那样写效果一样呀,这个默认的return效果在哪里?是react内部处理了?然后当我再看到下面的代码,我发现是我错了这和React没啥关系呀?

useEffect(() => {
    const timeOut = setTimeout(() => setDebouncedPerson(value), delay);
    return () => clearTimeout(timeOut);
}, [value, delay]);

既然和React没有关系了说明这就是正常的箭头函数简写,但是我就钻牛角尖了,这个隐藏的return会不会在某些情况下会导致出现一些错误?经过多次试验,我觉得正常人写的代码都不会出现问题💦大概是我思想出了问题才会有这样的疑问,说到底自己基础不牢固(西八)。

截屏2021-11-10 下午5.29.19.png

综上:感觉自己说了几句又感觉啥都没说,收获吧也勉强算是巩固了一下箭头函数,汗颜💧

既然说到箭头函数了,大佬们也看到这了,汇总几个问题帮大佬们巩固一下箭头函数:

  1. 箭头函数可以new吗? 为什么?(关键是为什么哈)
  2. 箭头函数有没有this?this指向哪里?

至于答案,大佬们自己探索喽😄

最近不是在学react+vite+ts嘛,然后代码放在gitee上,也写了遇到问题或者使用插件对应的wiki,而且代码格式提交规范都有,也做了jenkins自动化部署,虽然还是刚起步阶段但是对于想学习却无从下手的同学可能还是有点帮助的,最后祝各位大佬学习进步,事业有成!🎆