关于react中函数类型的说明

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 的首选，所以如果你没有看到它的问题，那么它可能没问题。