相关疑难解决方法(0)

我最近开始维护其他人的JavaScript代码.我正在修复错误,添加功能,并尝试整理代码并使其更加一致.

以前的开发人员使用两种声明函数的方法,如果背后有原因,我就无法解决.

这两种方式是:

var functionOne = function() {
    // Some code
};

function functionTwo() {
    // Some code
}

使用这两种不同方法的原因是什么？每种方法的优缺点是什么？有一种方法可以通过一种方法完成,而另一种方法无法完成吗？

从 React Hooks 开始，我决定放弃 React 类组件。我现在只处理钩子和功能组件。

简单的问题：

我理解在类体内使用箭头函数而不是常规函数之间的区别。箭头函数会自动绑定（词法 this）到我的类的实例，我不必在构造函数中绑定它。这很好。

但由于我不再处理类，我想知道在功能组件内部执行以下操作有什么区别：

function App() {

  // REGULAR FUNCTION
  function handleClick1() {
    console.log('handleClick1 executed...');
  }

  // ARROW FUNCTION
  const handleClick2 = () => {
    console.log('handleClick2 executed...');
  }

  return(
    <React.Fragment>
      <div className={'div1'} onClick={handleClick1}>
        Div 1 - Click me
      </div>
      <div className={'div2'} onClick={handleClick2}>
        Div 2 - Click me
      </div>
    </React.Fragment>
  );
}

题

两者都工作正常。

性能上有区别吗？我应该赞成一种方式而不是另一种方式吗？它们都在每次渲染时重新创建，对吗？

关于可能重复的注意事项

我真的不认为这是一个重复的问题。我知道关于箭头和正则之间的区别有很多问题，但我想从 React 功能组件的角度了解 React 是如何处理它的。我环顾四周，没有找到。

用于测试的代码片段

function App() {

  // REGULAR …

有没有理由更喜欢这些方法之一来编写无状态组件？

1. 具有内部函数声明的函数声明

export default function MyComponent(props) {
  
  function myHelper() {
    return "something";
  }
  
  return (
    <p>
      {myHelper()}
    </p>
  );
       
}

2. 带内部函数表达式的函数声明:

export default function MyComponent(props) {

  const myHelper = () => {
    return "something";
  };

  return (
    <p>{myHelper()}</p>
  );
        
}

3. 具有外部函数声明的函数声明:

function myHelper() {
  return "something";
}

export default function MyComponent(props) {

  return (
    <p>
      {myHelper()}
    </p>
  );
           
}

我不喜欢使用函数表达式作为主要组件函数,所以我跳过了这些可能性.

这些方法之一是否存在任何性能问题？或者使用一个高于其他人的任何其他原因？

方法3.更容易测试,因为我可以将助手编写为纯函数,导出它们并导入测试文件.但是我能找到唯一的论点.

在Airbnb样式指南中使用ESLint如何在模块中有效地编写导出函数而不会受到影响？下列:

exports.istest = function() {
  console.log('Test');
};

在以下情况下抛出一个eslint'意外的未命名函数'警告:

exports.istest = function istest() {
  console.log('Test');
};

似乎有点重复.