关于前端 function component 的一点疑问。

[justdoit123]

我感觉现在前端圈都在往 function component & hooks 的方向发展。

但是我感觉这玩意写复杂一点的组件、页面的时候好难用。

我喜欢从上而下的写代码、阅读代码。我会把一个组件的条件渲染分支、handler 函数放在 class component 的后面。这样阅读一个组件的时候，先看 props 、state 定义，然后看下 render 函数，对整个组件的功能就八九不离十了。

但是如果用 function component 来写，那就必须先把 handler 的定义提前，一打开一个组件，迎面而来的全是细节。条件渲染也不好写，条件一多、嵌套一深就很乱。

既然这是发展趋势，我就很想问问大家都是 这么把 function component 写得干净一点的？

[zoeliu]

你也可以直接先看 props ，state 和 return 的 jsx 。 细节逻辑可以按功能抽象成 hook 直接引入减少 comp 的代码量。
出现你说的一打开全是细节，就是没有把逻辑做好抽象。全部放在了一起。
条件渲染，简单的条件可以直接在 jsx 里写。如果逻辑多了也最好抽出来 memo 一下再使用。
fp 和 hooks 就是为了解决一个组件代码量过多，逻辑不好抽象的问题。不过灵活度会高些，会容易出现你说的"不干净的问题"。

[crysislinux]

所以我一向觉得 react 下限是很低的。还好有很多库可以挽救一下。

[sweetcola]

React 能用 class 也能用 hooks ，但是大部分人都会去拥抱 hooks 的写法就能说明一定问题了，我是 hook 出来的那一开始就把 class 写法抛弃了。

如果用 hooks 写会觉得很乱，那么用 class 来写会更乱，像 #1 说的做好抽象就行了。

[tsutomu]

用 hooks 就不要怕拆组件，在组件的抽象甚至包括命名上有一定经验的时候就会舒服很多

[sjhhjx0122]

其实你可以把逻辑放 class,写个 hook 把 class 读出来,就是 state 不好处理