我经常听到人们谈论React函数组件，它不可避免地会变得更大、更复杂。毕竟，我们在“函数”中写组件，所以你必须接受组件会膨胀，导致函数不断膨胀。React组件还提到：
由于函数组件可以做越来越多的事情，所以你的代码库中的函数组件通常会越来越长。[相关建议：Redis视频教程、编程视频]
它还提到了我们应该：
尽量避免过早添加抽象
如果你使用CodeScene，你可能会注意到它会在你的函数太长或太复杂的时候警告你。如果按照我们之前所说的，我们可能会考虑是否应该更广泛地配置CodeScene的相关警告。当然，这是完全可以做到的，但我认为我们不应该这样做，我们不应该拒绝在代码中添加很多抽象，我们可以从中获得很多好处，大多数时候我们的成本并不高。我们可以继续保持我们的代码健康状况良好！
处理复杂性
我们应该意识到，虽然函数组件被写在“一个函数”中，但它仍然可以像其他函数一样由许多其他函数组成。就像useState ，useEffect ，或者其他hooks，子组件本身也是一个函数。因此，我们自然可以用同样的想法来处理函数组件的复杂性:通过建立一个新函数，包装符合公共模式的复杂代码。
处理复杂组件的常见方法是将其分解成多个子组件。但这可能会让人们感到不自然或难以准确地描述这些子组件。此时，我们可以通过梳理组件钩函数的逻辑来找到新的抽象点。
每当我们在组件中看到原因时，我们都会看到原因useState 、useEffect 或者当由其他内置钩子函数组成的长列表时，我们应该考虑它们是否可以提取到一个自定义hook中。自定义hook函数是一种可以在其内部使用其他钩子函数的函数，创建自定义钩子函数也非常简单。
下面的组件相当于一个看板，用列表显示用户仓库的数据(想象类似于github)。这个组件不是一个复杂的组件，但它是一个很好的例子，显示如何应用自定义hook。
function Dashboard() {
const [repos, setRepos] = useState