Question

用于创建react组件的函数声明和箭头函数之间有什么区别（不是需要绑定的组件内部的函数）！

运行create-react-app时，旧版本的reactjs会将App组件创建为箭头函数！

export const App = (props) => {}

最新版本创建为函数声明

function App() {}

Answer 1

我会说这确实是一个自以为是的选择。至少有几个原因使我（个人）认为箭头功能用于纯功能组件是非常糟糕的做法。这些是：

语法滥用。当我们定义功能组件时，我们不需要将其上下文预先绑定到特定范围。无论如何，在模块名称空间中，上下文（this）将是未定义的。箭头功能的使用在这里是出于简洁之类的纯粹美学原因。但是，箭头功能作为语言功能首先要有很明确的存在目的，而不是简洁明了。

错误堆栈跟踪。箭头函数中引发的异常描述性较低，因为箭头函数在定义上是匿名的。这不是一个大问题，可能是因为React项目很可能会配置有适当的源映射支持，但是如果使用命名函数，堆栈跟踪仍然会更加清晰。正如评论中指出的那样，这实际上并不是功能组件的问题，因为名称基本上就是变量的名称。

Less convenient logging. Consider this very typical pure function component style:

const Header = ({ name, branding }) => (
  <header>
    ...
  </header>
)

在上面的函数中，不可能抛出快速调试器语句或console.log。您将不得不暂时将其转换为类似的内容

const Header = function ({ name, branding }) { 
  console.log(name)
  return (
    <header>
      ...
    </header>
  )
}

这可能非常烦人，尤其是对于较大的纯组件。

话虽如此，这对于许多团队来说是非常受欢迎的选择，而且默认情况下也是ESLint首选的选择，因此，如果您没有发现问题，那么就可以了。

有关React中的函数类型的说明

1 个答案: