时间戳

首页 > 解决方案 > Reactjs 内存泄漏 - 内联函数与绑定柯里化函数

reactjs - Reactjs 内存泄漏 - 内联函数与绑定柯里化函数

问题描述

我和一位同事正在讨论渲染调用中导致内存泄漏的内联函数。我建议我们绑定一个柯里化函数，但他认为它会产生相同的效果。这是真的？由于每次渲染调用都会创建一个新函数，currying 会产生内存泄漏吗？

有没有更好的方法来使用不会导致内存泄漏的柯里化？

对那些提供关于这个主题的好阅读材料的人表示额外的荣誉。

简单示例演示了所讨论的两种方法。

export default class ParentComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            memLeak: false,
        };

        this.curryExample = this.curryExample.bind(this);
    }

    curryExample(bool) {
        return () => {
            this.setState({memLeak: bool})
        };
    }

    render() {
        const {memLeak} = this.state;

        return (
            <div>
                {/* inline func leads to memory leaks */}
                <ChildComponent onClick={() => this.setState({memLeak: !memLeak})}/>

                {/* but does a bound function to Parent scope do the same?? */}
                <ChildComponent onClick={this.curryExample(!memLeak)}/>
            </div>
        );
    }
}

标签： reactjsmemory-leakscurrying

解决方案

我在上面找到了React关于“内存泄漏”问题的讨论。

事实证明，它们本身并不是内存泄漏。在DEV中创建了额外的事件处理程序，最终得到垃圾收集。因此，更多的 GC 在 dev 中运行，但不会导致最终导致应用程序停止的内存泄漏。

所以 - 这个讨论是一个有争议的问题。干杯!

推荐阅读