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