React 반응 핫 로더를 사용할 때 최대 호출 스택 크기를 초과했습니다.

Question

react-hot-loader을 사용할 때 이상한 문제가 발생합니다.

만이 경우는 Uncaught RangeError: Maximum call stack size exceeded at PatientEdit.__test__REACT_HOT_LOADER__

class PatientEdit extends React.Component { 
    test =() => { 
     return 123 
    } 
    constructor(props) { 
     super(props) 
    } 
    static propTypes = { 
    } 
    render() { 
     return (
      <div>{this.test()}</div>) 
    } 
} 

을 던질 것이다 그러나 다음 세 가지가 문서로 하였다 모든 권리

// A 
class PatientEdit extends React.Component { 
    test(){ 
     return 123 
    } 
    constructor(props) { 
     super(props) 
    } 
    static propTypes = {} 
    render() { 
     return (
      <div>{this.test()}</div>) 
    } 
} 
// B 
class PatientEdit extends React.Component { 
    test(){ 
     return 123 
    } 
    constructor(props) { 
     super(props) 
    } 
    static propTypes = {} 

    render() { 
     return (
      <div>{this.test()}</div>) 
    } 
} 
// C 
class PatientEdit extends React.Component { 
    test =() => { 
     return 123 
    } 
    static propTypes = {} 
    render() { 
     return (
      <div>{this.test()}</div>) 
    } 
} 

로더 구성 말합니다 : .babelrc 아래와 같은 파일 전에 babel-polyfill 및 react-hot-loader/patch를 추가 엔트리

// .babelrc 
    { 
     "presets": [["env", {"modules": false}], "react", "stage-1"], 
     "plugins": [ 
      "react-hot-loader/babel", 
      "transform-decorators-legacy", 
      "transform-flow-strip-types", 
      "transform-object-assign", 
      "transform-runtime", 
      "typecheck", 
      "react-css-modules" 
     ] 
    } 

처음에는 이상한 행동에 너무 충격을 받고 오류 스택을 무시했습니다. 이제는 내 시간을 react-hot-loader의 메커니즘과 환영 상세한 설명을 들여다 보니

Answer 1

사실 추리보다 추측. (비록 대답을 통해 듣고 싶습니다)

화살표 기능은 자동으로 런타임 컨텍스트에 바인딩합니다. (이 경우 PatientEdit 클래스 인스턴스, resp 구성 요소).

생성자가 실행되지 않았으므로 클래스 인스턴스가 아직 작성되지 않았다고 생각합니다. 그러나 인스턴스를 바인딩해야합니다. 이로 인해 클래스 코드가 다시 실행될 수 있습니다 (생성자를 찾을 수 있음). 그리고 이것이 결국 호출 스택 오버 플로우로 끝나는 루프의 원인입니다.