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>)
    }
}

按照文档说明：[{1}}如下所示加载配置，在文件输入之前添加.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" ] }的机制并欢迎详细的解释

Answer 1

更多的猜测而不是真正的推理。（虽然很乐意听到答案）

箭头函数自动绑定到它的运行时上下文。（在本例中为PatientEdit类实例，分别为resp。组件）。

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

使用react-hot-loader时，React最大调用堆栈大小超出

1 个答案: