组件和自定义钩子有什么区别?

时间:2021-05-09 04:26:38

标签: reactjs react-hooks

这是我的代码

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>
}

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

我的问题是:

  1. 除了调用语法之外,自定义的区别是什么? 钩子和组件?
  2. 我可以总是使用自定义钩子而不是 组件?

2 个答案:

答案 0 :(得分:3)

<块引用>

自定义钩子 useLabel

您给它起了一个传统上用于挂钩的名称,但我建议您不要将其称为自定义挂钩,因为这可能会引起混淆。自定义钩子通常是指调用一个或多个由 react 提供的内置钩子的函数,例如 useStateuseEffect。因为这样做,它带来了需要遵循 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;
}

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

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

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

其他时候,决定更多是关于如何让我们这些弱小的人类能够理解代码。在合理的边界分解组件可以让你在头脑中将相关代码组合在一起,然后在不需要了解细节时忽略它。

答案 1 :(得分:0)

自定义钩子主要是对有状态逻辑和状态操作的抽象,这样你就可以一次编写钩子并在多个地方使用它,或者不必担心实现细节。 >

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

const isOnline = useFriendStatus(props.friend.id);
<块引用>

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

这在技术上是可能的,但它真的很令人困惑。返回 JSX 时最好始终使用组件。