使用react-hot-loader时超过了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类实例，分别组件)。

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