我感觉现在前端圈都在往 function component & hooks 的方向发展。
但是我感觉这玩意写复杂一点的组件、页面的时候好难用。
我喜欢从上而下的写代码、阅读代码。我会把一个组件的条件渲染分支、handler 函数放在 class component 的后面。这样阅读一个组件的时候,先看 props 、state 定义,然后看下 render 函数,对整个组件的功能就八九不离十了。
但是如果用 function component 来写,那就必须先把 handler 的定义提前,一打开一个组件,迎面而来的全是细节。条件渲染也不好写,条件一多、嵌套一深就很乱。
既然这是发展趋势,我就很想问问大家都是 这么把 function component 写得干净一点的?
1
zoeliu 274 天前 via Android
你也可以直接先看 props ,state 和 return 的 jsx 。 细节逻辑可以按功能抽象成 hook 直接引入减少 comp 的代码量。
出现你说的一打开全是细节,就是没有把逻辑做好抽象。全部放在了一起。 条件渲染,简单的条件可以直接在 jsx 里写。如果逻辑多了也最好抽出来 memo 一下再使用。 fp 和 hooks 就是为了解决一个组件代码量过多,逻辑不好抽象的问题。不过灵活度会高些,会容易出现你说的"不干净的问题"。 |
2
crysislinux 274 天前 via Android
所以我一向觉得 react 下限是很低的。还好有很多库可以挽救一下。
|
3
sweetcola 274 天前 1
React 能用 class 也能用 hooks ,但是大部分人都会去拥抱 hooks 的写法就能说明一定问题了,我是 hook 出来的那一开始就把 class 写法抛弃了。
如果用 hooks 写会觉得很乱,那么用 class 来写会更乱,像 #1 说的做好抽象就行了。 |
4
tsutomu 274 天前
用 hooks 就不要怕拆组件,在组件的抽象甚至包括命名上有一定经验的时候就会舒服很多
|
5
sjhhjx0122 274 天前
其实你可以把逻辑放 class,写个 hook 把 class 读出来,就是 state 不好处理
|