我最近遇到了这个:
React.useEffect(() => {}, []);
我习惯useEffect
这样导入和调用它:
useEffect(() => {}, []);
根据我的经验,这似乎更常见。
两者有什么区别吗?(也许是性能差异?)有什么理由选择其中一种而不是另一种?
我最近遇到了这个:
React.useEffect(() => {}, []);
我习惯useEffect
这样导入和调用它:
useEffect(() => {}, []);
根据我的经验,这似乎更常见。
两者有什么区别吗?(也许是性能差异?)有什么理由选择其中一种而不是另一种?
没有区别。不存在性能差异或功能差异。事实上,它们都引用相同的函数。
因此使用哪个完全取决于您的喜好。
有些人喜欢为 React 的东西建立一个命名空间,这样你就可以键入
React.use
并让 IDE 的自动完成功能为你提供很好的建议。有些人喜欢通过直接导入函数来缩短行长度。
由你决定。两者显然都没有错。
可能重要的一件事是,智能捆绑器可能能够对您不使用的东西进行树摇,这使得您发送给用户的代码更小。
如果这样做
import React from 'react'; React.useState()
,则捆绑程序必须包含整个React
对象。但如果您这样做import { useState } from 'react'
,那么捆绑包可能只能包含useState
最终捆绑包中的函数。我说可能是因为捆绑很复杂。并且并非您导入的所有模块都可以通过这种方式进行树摇动。对于 React,您可能会将所有 React 都包含在您的包中。
但出于这些原因,我认为当您导入的模块支持它时,这是一个合理的习惯。
就其价值而言,React 文档单独导入每个函数。
问题不是特定于 React,而是任何我们可以解构导入或使用点表示法的 ES 模块。
提取属性一次而不是从对象中读取属性可能会稍微好一些。
此外,事实是,缩小的捆绑包将包含某种形式的内容
r.u
,而不是u
我们计划不破坏的形式。这里是巴别塔游乐场
这将从“react”导入所有导出的成员,并将它们捆绑到一个名为“React”的对象中。这可能会导致更大的捆绑包大小,因为它会导入所有出口。如果您使用很多会员,这种方式很方便。
这仅从“react”导入指定的成员。在这种情况下只有
useEffect
和useState
。作为最佳实践,最好只导入您需要的内容。