在反应中反应钩子的推荐方式答案

【问题标题】：Recommended way in react hooks in react在反应中反应钩子的推荐方式
【发布时间】：2020-11-01 04:50:11
【问题描述】：

我有一个关于在 react 中使用 react 钩子的方式的问题。

我注意到他们的文件中有一些使用

const Users = () => {
  ....
 }
export default Users;

而其他人则使用它

export default function Users(){
  ...
 }

推荐/最好的方法是什么？

【问题讨论】：

这与反应钩子无关
另外，这段代码做同样的事情
没有区别。两个代码示例都导出 Users 作为默认导出功能。
这与 React 无关。您在询问函数和箭头函数之间的区别。
@Yousaf 有区别。一方面，箭头函数没有this 上下文，而普通函数有。这是两种不同的工具，可以根据用例互换使用。

标签： reactjs react-native react-hooks

【解决方案1】：

这和 JavaScript 更相关（虽然上下文是 React 函数组件）。

const Users = () => {
  //....
 }
export default Users;

function Users() {
  //...
}
export default Users;

export default function Users(){
  //...
}

// Usage with auto-complete
import Users from './Users.js';

导出效果是一样的，虽然有区别between functions and arrow functions。

但是像这样使用 export 我们确实有一个更显着的区别：

// Bad practice, don't do it!
// No auto-complete, no function name while debugging
export default () => {
  // Users logic
  //...
}

// No auto complete on typing Users, need to name the default export
import MyUsers from './Users.js';

【讨论】：

你经常使用哪些？
第一个，const Users = ... 和 export default Users，但我认为默认导出是不好的做法，所以我尝试只使用命名导出。 developer.mozilla.org/en-US/docs/web/javascript/reference/…
什么意思？您在这里使用命名导出export default users
这是一个答案，不代表我用它。正如我所说，我试图只使用命名导出export const Users = ....，但这是我的意见......并不意味着这样做是正确的。
const Users、export default Users VS export default function Users 怎么样。我更喜欢最后一个，因为你只在一行中使用它？为什么会像您通常使用的那样使用第一个？

【解决方案2】：

其实两者都是标准方式。您可以使用它们中的任何一个，并且不存在性能问题。但是使用如下代码有一些优点：

const Users = () => {}
export default Users;

这称为箭头函数，这是 ES6 的特性。
箭头语法自动将this绑定到周围代码的上下文
当没有正文块时，语法允许隐式返回，在某些情况下会导致代码更短更简单
最后但同样重要的是，=> 比函数更短更简单，尽管风格问题通常是主观的

因此，为了获得最佳实践和可用性，您应该选择Arrow Function

为了更好地理解，您可以查看This

【讨论】：