React Hooks 有在实际项目中的使用

Question

React Hooks 有人在实际项目中使用吗？有使用 hooks 的开源项目吗?

学了下 hooks 相关的知识，个人感觉适合在比较小的组件中使用；当在一个比较大的组件中使用时（如组件中有多个方法的情况），会导致函数组件内部过于臃肿，代码结构远不如class组件那样清晰

谢谢

Answer 1

能用class写的组件理论上都可以用hooks，我在自己的项目里新的公共组件都是用的hooks写的

Answer 2

我自己的理解是，hooks的作用在于可以没法再组装层面进行解耦拆分的组件，可以在逻辑数据层面使用hooks进行进一步解耦拆分(如果是class组件强行拆分你得把部分/全部state和setState传过去，而hooks可以把对某一个状态的管理限制在某一个代码段内，这就使得组件可以进一步拆分)，如果组件本来就可以拆的很小（没必要在数据上逻辑上继续拆分），用hooks的函数组件和class组件其实都差不多
不过现在官方是更推荐的用函数组件，文档里能用函数组件写的（不涉及生命周期的那些）都用函数组件写了，新项目建议全部用函数组件更好（能更好得到官方支持）
像你所说的如组件中有多个方法导致函数组件内部又声明了很多函数，其实这时候可以这些函数每个单独写一个文件

Answer 3

React 推崇的是尽可能小的组件，当你觉得你的函数组件过于复杂时，也许应该考虑将其拆分成几个更小的组件。
另外 React Hooks 的优点在于可以抽象状态的逻辑，用的好毋庸置疑可以减少项目中的代码量。

举个例子，假设你在多个页面都用到了一份数据，并且需要在页面初始化时去获取这份数据，你就可以利用 Hooks 进行封装：

import { useState, useEffect } from 'React'
function useUser () {
    const [user, setUser] = useState({})
    useEffect(() => {
        ajax('xxx').then(res => setUser(res))
    }, [])
    
    return user
}

这样在每个需要的地方就只需要用一下这个 Hooks, 而不需要去重复定义 State 以及请求数据。例如:

function App() {
    const user = useUser()
    
    return <div>{user.name}</div>
}