组件和自定义钩子有什么区别？答案

【问题标题】：what's the difference between components and custom hooks?组件和自定义钩子有什么区别？
【发布时间】：2021-05-09 04:26:38
【问题描述】：

这是我的代码

function Label({title}){
  return <h1>{title}</h1>
}
function  useLabel({title}){
  return <h1> {title}</h1>
}
function Diff(){
  return <div>
    <Label title='this is component'/>
    {useLabel({title:'this is custom hook'})}
    </div>
}

在代码中，我定义了组件Label和自定义钩子useLabel。除了使用不同的语法调用之外，它们执行完全相同的工作。

我的问题是：

除了调用语法，自定义和自定义有什么区别钩子和组件？
我可以一直使用自定义挂钩而不是组件？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

自定义钩子useLabel

您已经给它起了一个通常用于挂钩的名称，但我建议您不要将其称为自定义挂钩，因为这可能会引起混淆。自定义 hook 通常是指调用 react 提供的一个或多个内置 hook 的函数，例如 useState 或 useEffect。因为它这样做，它带来了它需要遵循rules of hooks 的要求。

例如，下面是一个获取和返回窗口宽度的自定义钩子：

const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => { 
      window.removeEventListener('resize', handleResize);
    }
  }, [])
  return width;
}

你写的是一个辅助函数，但它不必遵循钩子的规则，因为它从不调用钩子。如果您必须多次执行相同的操作，则返回反应元素的辅助函数有时会很有用，但它基本上与编写更长的 Diff 组件没有什么不同。就 react 所知，和在 Diff 的 body 中写 <h1> 是一样的。

所以你的问题归结为：我什么时候应该使用一个组件或多个组件。

有时，出于性能原因会做出该决定。如果它都是一个组件，那么它都需要作为一个组重新渲染。但如果它被拆分为单独的组件，那么可能只有其中的一个子集需要重新渲染。

其他时候，决策更多是关于如何让我们这些微不足道的人理解代码。在合理的边界处分解组件可以让您在心理上将相关代码组合在一起，然后在您不需要了解细节时忽略它。

【讨论】：

您的回答是正确的并且被赞成。但是可能会提出问题，如果在自定义钩子之类的组件中编写相同的代码怎么办？对此提供答案可能很有用。例如。 React 会抛出错误，因为这甚至不是自定义钩子，因为自定义钩子总是以 use 开头。

【解决方案2】：

自定义钩子主要用于抽象状态逻辑和状态操作，因此您可以编写钩子一次并在多个地方使用它，或者不必担心实现细节。 p>

虽然自定义钩子在技术上可以返回任何东西，但它返回 JSX 元素是很奇怪的，因为组件可以做同样的事情不那么混乱。当想要返回其他的东西而不是 JSX 元素同时仍然在 React 的框架内工作时，应该使用自定义钩子，for example:

const isOnline = useFriendStatus(props.friend.id);

我可以总是使用自定义钩子而不是组件吗？

这在技术上是可行的，但确实令人困惑。最好在返回 JSX 时始终使用组件。

【讨论】：