这是我的代码
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。除了使用不同的语法调用之外,它们的工作完全相同。
我的问题是:
答案 0 :(得分:3)
自定义钩子 useLabel
您给它起了一个传统上用于挂钩的名称,但我建议您不要将其称为自定义挂钩,因为这可能会引起混淆。自定义钩子通常是指调用一个或多个由 react 提供的内置钩子的函数,例如 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;
}
你写的是一个辅助函数,但它不必遵循钩子的规则,因为它从不调用钩子。如果您必须多次执行相同的操作,返回 react 元素的辅助函数有时会很有用,但这与编写更长的 Diff 组件基本上没有什么不同。就react知道的来说,和在Diff的body里面写<h1>
是一样的。
所以你的问题归结为:我什么时候应该使用一个组件或多个组件。
有时,会出于性能原因做出该决定。如果它们都是一个组件,那么它们都需要重新渲染为一组。但如果将其拆分为单独的组件,则可能只有其中的一个子集需要重新渲染。
其他时候,决定更多是关于如何让我们这些弱小的人类能够理解代码。在合理的边界分解组件可以让你在头脑中将相关代码组合在一起,然后在不需要了解细节时忽略它。
答案 1 :(得分:0)
自定义钩子主要是对有状态逻辑和状态操作的抽象,这样你就可以一次编写钩子并在多个地方使用它,或者不必担心实现细节。 >
虽然自定义钩子在技术上可以返回任何东西,但它返回一个 JSX 元素是很奇怪的,因为一个组件可以做同样的事情而不那么容易混淆。当想要返回 JSX 元素以外的东西时,应该使用自定义钩子,同时仍然在 React 的框架内工作,for example:
const isOnline = useFriendStatus(props.friend.id);
<块引用>
我可以总是使用自定义钩子而不是组件吗?
这在技术上是可能的,但它真的很令人困惑。返回 JSX 时最好始终使用组件。