创建自定义挂钩时,何时返回[]vs{}



所以我很好奇什么时候应该将数组返回到destructure,什么时候应该使用react中的自定义钩子将对象返回到destruction,因为在许多情况下,我相信它们会给你同样的结果。

return [name,age]
return {name,age}

选择其中一个的原因实际上并不是基于行为差异。通常情况下(并非总是如此,请阅读整篇文章!(,因为返回数组会将返回值中每个项的命名控制权倒置给钩子的用户,而不必使用别名(由于数组析构函数语法的原因(,这在特定情况下会很麻烦(见下文(

无论是对象还是数组,一切都会正常更新——这与行为无关。这与选择最合适的结构有关。这取决于钩子的各个方面以及如何使用。

想象一下,如果useState返回一个对象,并且您有多个状态项:

const { state: stateItem1, setState: setStateItem1 } = useState()
const { state: stateItem2, setState: setStateItem2 } = useState()

更多的噪音,对吧?通过使用数组作为返回值,我们不需要所有对象都破坏混叠。这就是React作者在本例中选择数组返回值的原因。他们有效地使用数组并不是因为它具有类似列表的功能,而是因为破坏数组的语法糖噪音较小。

但是,这并不意味着您应该到处使用数组。当你期望消费者理解订单时,你拥有的房产越多,这就没有什么意义了。CCD_ 2足够小并且足够众所周知,所以这不会成为问题。它通常也会在一个组件中多次使用,这强调了对更好的别名语法的需求。

实际上,只有在以下情况下使用[]才有意义:有少量项目;数组是固定宽度和定义良好的顺序(即定义函数的列表(;钩子的用途是如此通用,以至于你希望它在一个组件中被多次使用(所以它们需要容易的别名(。这不是硬性规定,只是指导原则。

否则,请使用具有命名特性的对象。

我所说的一切实际上都是关于{}[]在选择用于销毁目的的上下文中的比较。当然,如果你有一个数组,因为它是最好的数据结构(例如,它返回一个用户列表:[{age: 30, name: 'user1'}, {age: 35, name: 'user2'}](,那么这是一个覆盖因素,你需要返回一个数组。在这些情况下,钩子的用户无论如何都不会对其进行破坏/别名,因为它将具有可变长度和/或无意义的非保证顺序。

但你的例子并非如此。自然形状是一个对象,每个键上都有不同的类型(name的字符串和age的数字(,这些键也一起代表一个概念项——一个用户。从数据结构的角度来看,说它们是";集合";。

真正由您选择何时使用其中一种。

来自文档:

与React组件不同,自定义Hook不需要特定的签名。我们可以决定它需要什么作为论据,如果有什么,它应该返回什么。换句话说,它就像一个正常的函数。它的名字应该总是以use开头,这样你就可以一眼看出Hooks的规则适用于它

您可能希望使用[]作为状态,因为如果钩子中的状态发生变化,它将自动更新。如果您只返回一个状态,这将非常有用。如果要返回更多值,请使用对象{}

最新更新