使用React热加载程序时超出了最大调用堆栈大小

Question

使用react-hot-loader时，我遇到了一个奇怪的问题。

只有这种情况才会抛出未捕获的RangeError：在CourentEdit超出最大调用堆栈大小。__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如下所示，在文件输入之前添加巴别多填充和反应热加载程序/补丁

    // .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"
        ]
    }

一开始，我对奇怪的行为感到震惊，忽略了错误堆栈。现在是时候研究反应热加载器的机制，并欢迎详细的解释

Answer 1

更多的是猜测而不是真正的推理。（很想听听整个答案）

箭头函数自动将自身绑定到它的运行时上下文。（在本例中，患者编辑类实例，代表。组件）。

我猜问题是，类实例还没有创建，因为构造函数还没有被执行。但是实例需要被绑定。这可能会导致类代码再次运行（期望找到它的构造函数）。这就是导致循环的原因，最终导致调用堆栈溢出。