기능적 리액트 컴포넌트에 대해 기능 선언보다 화살표 구문이 선호되는 이유는 무엇입니까?

기능적 리액트 컴포넌트에 대해 기능 선언보다 화살표 구문이 선호되는 이유는 무엇입니까?

화살표 함수 구문으로 정의된 기능성 React 컴포넌트의 예를 항상 볼 수 있습니다.

const foo = () => (...);

export default foo;

기존 함수 선언 구문 대신 다음과 같이 입력합니다.

export default function foo() {
  return ...;
}

후자보다 전자를 선호하는 이유가 있나요?

나는 이것이 정말로 좀 고집스러운 선택이라고 말하고 싶다.내가 (개인적으로) 순수하게 기능하는 컴포넌트에 화살표 기능을 사용하는 것을 꽤 나쁜 관행으로 보는 데는 적어도 몇 가지 이유가 있습니다.이하에, 이하를 참조해 주세요.

1. 할 때 가 없습니다기능 컴포넌트를 정의할 때 특정 범위에 컨텍스트를 미리 바인딩할 필요가 없습니다.this이 될 거예요.undefined모듈 네임스페이스에 있습니다.화살표 기능의 사용은 간결함 등의 순수한 미학적 이유에 의해 결정됩니다.그러나 화살표는 언어적 특징으로서 기능하는 것은 애초에 존재의 매우 구체적인 목적을 가지고 있으며, 이것은 냉정함과 간결함이 아닙니다.

2. 에러 스택트레이스 화살표 함수는 정의상 익명이기 때문에 화살표 함수에 발생하는 예외는 설명이 적습니다. 이는 React 프로젝트가 적절한 소스 맵을 지원하도록 구성될 가능성이 높기 때문에 큰 문제는 아니지만 명명된 함수를 사용하면 스택 트레이스가 조금 더 명확해집니다. 코멘트에서 언급되었듯이, 이름은 기본적으로 변수의 이름이므로 이것은 기능 구성요소의 문제가 아닙니다.

3. 편리한 로깅이 아닙니다.매우 전형적인 순수 함수 구성요소 스타일을 고려하십시오.

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

   는 빠른 debugger 또는 "statement"console.log. 으로 임시로

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

   이것은 특히 더 큰 순수 기능 컴포넌트의 경우 매우 귀찮을 수 있습니다.

이것은 많은 팀에게 매우 인기 있는 선택이며, ESLint도 기본적으로 선호하기 때문에 문제가 없다고 생각되더라도 괜찮습니다.

사실 둘 다 차이가 없습니다. 저는 Code Sand Box에 작은 프로젝트를 만들고 두 개의 간단한 컴포넌트를 만듭니다. 그 중 하나는 Code Sand Box입니다.Arrow"CHANGE: "CHANGE: "CHANGE: " 。

import React from 'react';

const MyArrowComponent = () => (
  <main>
    <h2>Arrow</h2>
  </main>
);

export default MyArrowComponent;

그리고 또 하나는Declaration컴포넌트(함수 선언 사용):

import React from "react";

function MyFunctionComponent() {
    return (
        <main>
            <h2>Declaration</h2>
        </main>
    );
}

export default MyFunctionComponent;

그리고 나서yarn build명령어를 발행하여 다음과 같이 번들을 참조해 주세요.

(window.webpackJsonp = window.webpackJsonp || []).push([[0], {
  14: function (e, n, t) {
    "use strict";
    t.r(n);
    var a = t(0), r = t.n(a), l = t(2),
        c = t.n(l), u = t(3), i = t(4), o = t(6), m = t(5), E = t(7);
    var p = function () {
      return r.a.createElement("main", null, r.a.createElement("h2", null, "Declaration"))
    }, s = function () {
      return r.a.createElement("main", null, r.a.createElement("h2", null, "Arrow"))
    }, d = function (e) {
      function n() {
            return (
              Object(u.a)(this, n),
              Object(o.a)(this, Object(m.a)(n).apply(this, arguments))
      }
      return Object(E.a)(n, e), Object(i.a)(n, [{
        key: "render", value: function () {
          return r.a.createElement(
            'div',
            null,
            r.a.createElement('div', null, 'Hi'),
            r.a.createElement(p, null),
            r.a.createElement(s, null)
          );
        }
      }]), n
    }(r.a.Component);
    c.a.render(r.a.createElement(d, null), document.getElementById("root"))
  }, 8: function (e, n, t) {
    e.exports = t(14)
  }
}, [[8, 1, 2]]]);

의 정의에 주의해 주십시오.Arrow및 그Declaration컴포넌트:

var p = function () {
  return r.a.createElement("main", null, r.a.createElement("h2", null, "Declaration"))
}, s = function () {
  return r.a.createElement("main", null, r.a.createElement("h2", null, "Arrow"))
}

둘 다 같은 방법으로 정의되어 있기 때문에, 확실히 차이는 없고, 코드 가독성과 클린 코드에 대한 개발자의 자세에 근거한 완전한 의견이며, 저희 팀의 ESLint 5.x에 근거해 화살표 함수를 선택하여 기능 컴포넌트를 정의합니다.

구문이 깨끗할 뿐만 아니라 다음과 같은 이유로 코드를 적게 쓸 수 있기 때문에 일반 함수를 사용하는 것보다 화살표 함수를 사용하는 것이 훨씬 좋습니다.

1. 범위 안전: 화살표 함수를 일관되게 사용하면 모든 항목이 루트와 동일한 thisObject를 사용할 수 있습니다.하나의 표준 함수 콜백이라도 화살표 함수와 함께 사용하면 스코프가 엉망이 될 수 있습니다.

2. 콤팩트성:화살표 기능은 읽고 쓰기가 더 쉽습니다.

3. 선명도:거의 모든 것이 화살표 함수인 경우 스코프를 정의하기 위해 모든 일반 함수가 즉시 튀어나옵니다.개발자는 이 오브젝트가 무엇인지 확인하기 위해 항상 상위 함수 문을 찾을 수 있습니다.

자세한 내용은 다음 질문을 참조하십시오.

ECMAScript 6의 Arrow 기능은 언제 사용해야 합니까?

함수 선언과 화살표 함수는 본질적으로는 다르지만 질문의 범위에서는 기본적으로 코드 스타일 선호입니다.저는 개인적으로 함수 선언을 선호합니다. 왜냐하면 그 코드 라인의 의미를 찾기 쉽기 때문입니다.

화살표 함수 또는 함수 선언을 사용할 경우 컨텍스트에서 어떤 것이 더 의미 있는지 생각해 보십시오.코드를 깨끗하고 읽기 쉽게 만들기 위해서는 쓰는 코드의 양뿐만 아니라 그 코드가 나타내는 것이 중요합니다.

예를 들어, 콜백에는 Arrow 함수를 사용하는 경향이 있습니다.[].map(() => {})

다른 답변에서 언급되지 않은 몇 가지 다른 사항:

• 화살표 기능 구성 요소의 경우 Chrome/Firefox에서 React 개발 도구를 사용하면 다음과 같이 표시됩니다.Anonymous디버깅을 더 어렵게 만듭니다.이러한 Anonymous 구성 요소는 성능 Flame Tree를 비롯한 개발 도구 전반에 걸쳐 있습니다.기능 구성요소는 개발 도구에 이름을 표시합니다.
• 표준 함수 선언은 한 줄에 정의할 수 있습니다. 됩니다.export default나중에 파일로. 더 쉽게 할 수 .default키워드를 지정합니다.

export default async function MyComponent() {
  ...
}

언급URL : https://stackoverflow.com/questions/49306148/why-is-arrow-syntax-preferred-over-function-declaration-for-functional-react-com