两者之间有区别吗:例如useEffect()和React.useEffect(

没有区别。没有性能差异或功能差异。事实上,它们都引用了 相同的精确函数 .

import React, { useEffect } from 'react'
React.useEffect === useEffect // true

因此,使用哪种完全取决于您的偏好。

有些人喜欢为React东西提供一个命名空间,这样你就可以键入 React.use 让IDE的自动完成功能为您提供不错的建议。

有些人喜欢通过直接导入函数来缩短行长度。

这取决于你。两者都不明显 错误的 .

有一件事 大概 重要的是,一个智能捆绑器可能能够树摇你不使用的东西,这使得你发送给用户的代码更小。

如果你这样做 import React from 'react'; React.useState() 那么bundler必须包括整个 React 对象但是如果你 import { useState } from 'react' ,然后捆绑 也许 能够包括 只有 这个 useState 函数。

我说 也许 因为捆绑是复杂的。并不是所有导入的模块都可以通过这种方式进行树摇。对于React,您可能会将所有React都包含在捆绑包中。

但出于这些原因,我认为当导入的模块支持它时,养成这种习惯是合理的。

就其价值而言, the react docs 分别导入每个函数。

问题不是特定的反应,而是任何ES模块,我们可以在其中销毁导入或使用点表示法。

提取一次属性可能会稍微好一点,而不是从对象中读取它。

此外,缩小的捆绑包将包括以下形式的内容 r.u 而不是 u 如果我们计划不破坏。

这是 babel playground

import * as React from "react"

这将从“react”导入所有导出的成员,并将它们绑定到一个名为“react”的对象中。这可能会导致更大的捆绑包规模,因为它导入了所有的出口。如果您使用多个成员,这种方式很方便。

import { useEffect, useState } from "react"

这只会从“react”中导入指定的成员。在这种情况下,只有 useEffect 和 useState .

作为最佳实践,最好只导入您需要的内容。