리액트 기능 컴포넌트의 기능 화살표 또는 지방 화살표

리액트 기능 컴포넌트의 기능 화살표 또는 지방 화살표

이 질문에는 이미 답변이 있습니다.

ES6에서 화살표를 사용하거나 사용하지 않고 최상위 기능을 만들 때의 장점과 단점은 무엇입니까? (2개의 답변)

닫힘4년 전에요.

리액트 기능 컴포넌트에 플레인 기능과 팻 화살표를 사용하는 것이 어떤 이점이 있는지 궁금하지 않을 수 없습니다.

const MyMainComponent = () => (
  <main>
    <h1>Welcome to my app</h1>
  </main>
)

function MyMainComponent() {
  return (
    <main>
      <h1>Welcome to my app</h1>
    </main>
  )
}

물론 둘 다 완벽하게 작동하지만, 그것들을 쓸 수 있는 권장 방법이 있나요?어느 한쪽을 지지하는 주장이 있는가?

편집: 사용하는 함수의 종류에 영향을 미칠 수 있는 플레인 자바스크립트 함수(콘텍스트, 스택 트레이스, 리턴 키워드 등)의 차이점을 알고 있습니다.하지만 저는 순전히 React 컴포넌트의 관점에서 질문을 하고 있습니다.

실제적인 차이는 없습니다.

화살표로 건너뛸 수 있습니다.return단, 호이스트의 메리트는 얻을 수 없습니다.따라서 ES6 타깃에서는 상세출력이 적어지지만 ES5로 변환되면 함수가 변수에 할당되기 때문에 상세출력이 높아집니다.

var MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
};

오버헤드는 압축되지 않은 최소화된 JS 파일에서 6바이트이므로 일반적으로 이 고려사항은 무시해도 됩니다.

최적화를 위해 화살표가 내보내질 때 상세도는 반드시 필요한 것은 아닙니다.

var MyMainComponent = (exports.MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
});

대부분 선호도의 문제입니다.단, 다음과 같은 (거의 중요하지 않은) 차이점이 있습니다.

• 팻 화살표 구문을 사용하면 중괄호 및return키워드를 지정합니다.JSX를 사전 표현 없이 직접 반환하는 경우.ES5 기능의 경우,{ return ... }.

• 팻 화살표 구문을 사용해도 새로운 컨텍스트는 생성되지 않습니다.this단, ES5 기능에는 해당됩니다.필요할 때 유용하게 사용할 수 있습니다.thisReact 컴포넌트를 참조하기 위한 함수 내부 또는 Resact 컴포넌트를 건너뛰려는 경우this.foo = this.foo.bind(this);걸음.

이들 사이에는 더 많은 차이가 있지만 반응에서 코딩할 때 상대적인 차이는 거의 없습니다(예: 사용).arguments,new등)

개인적으로는 가능한 한 뚱뚱한 화살표 구문을 사용하고 있습니다.그 구문이 더 좋기 때문입니다.

언급URL : https://stackoverflow.com/questions/54331084/function-or-fat-arrow-for-a-react-functional-component