javascript - 像这样直接在钩子(Hook)上使用对象解构对组件有更大的负载吗？

Question

考虑这样做:

const { pathname } = useLocation()
const { param1, param2 } = useParams()
const { push } = useHistory()

代替:

const location = useLocation()
const params = useParams()
const history = useHistory()

const { pathname } = location
const { param1, param2 } = params
const { push } = history

实现:

console.log(pathname, param1, param2)
push('/next-route')

尽管语法较短，但前一种情况下的对象解构是否首先引入对象的所有属性，然后将单个属性分配给新变量？如果这就是 JS 的工作方式，那么这意味着组件的负载会稍微大一些。如果没有，没有什么可担心的。对吧？

Answer 1

Is it a good practice to do

这既不是“好”做法也不是“坏”做法:它只是现代 JavaScript 允许的一种编写代码的方式，可以替代更冗长和手写的对象图处理代码。大多数语言特性也是如此(尽管有些东西，如 eval 和 forEach，可能通常应该避免)。

Despite being shorter in syntax, does the object destructuring in former case bring in all properties of an object first and then assign single property to a new variable?

没有。

您似乎认为从函数返回对象涉及复制该对象的所有成员 - 这是不正确的:虽然在 C 中返回 struct 值时会发生这种情况，而在 JavaScript 中object 值可以被认为始终存在于堆中，而 are passed by-reference ，因此不会进行昂贵的对象克隆。

这样做:

const { pathname } = useLocation()

更像这样:

const pathname = useLocation().pathname;

它不与此相同(概念上，底层):

const pathname = Object.assign( {}, useLocation() ).pathname;