導入功能的性能問題

Question

我之前曾在這里問過一個有關如何從外部文件imports外部函數的問題 。

現在解決方案是執行此Object.assign( Foo.prototype, path ); ，只要您想將這些功能用作React事件（如@MassimilianoJanes所指出的），它就會失敗。

或這個，我更喜歡：

import * as path1 from "./path1";
import * as path2 from "./path2";
import * as path3 from "./path3";
// and so on...

class Foo extends Component {
    constructor(props) {
        super(props);
        this.bindFunctions();
        this.state = {...};
    };

    bindFunctions = () => {
        for(var key in path1) this[key] = path1[key].bind(this); // This binds all functions from the file "./path1" to Foo
        for(var key in path2) this[key] = path2[key].bind(this); // This binds all functions from the file "./path2" to Foo
        for(var key in path2) this[key] = path3[key].bind(this); // This binds all functions from the file "./path3" to Foo
    }

    render() {...}
}

現在，我的問題主要涉及我的應用程序的性能。

假設我有幾個文件（ path1 ， path2 ， path3 ，...），每個文件都有數十個函數，而我只是以這種方式導入它。 大概，每當調用Foo ，它都會綁定bindFunctions所有功能，即使我在Foo僅使用每個文件的幾個功能。

現在這是我的問題：

1. 這會導致嚴重的性能問題嗎？
2. imports是否僅觸發一次（例如，在構建應用程序時）或每次調用該組件？
3. 這是否會以任何方式影響項目的規模？
4. 這樣做的一般缺點是什么？

提前致謝！

Answer 1

這會導致嚴重的性能問題嗎？

使用bind為每個實例創建新函數確實是一個問題。 我不能說是更多的內存還是更多的性能，但是在大多數情況下，它並不重要 。 但是，如果確實有大量實例/實例，則要避免這種情況。

導入是否僅觸發一次（例如，在構建應用程序時）或每次調用該組件？

模塊僅評估一次。

每當調用Foo ，它都會綁定bindFunctions所有功能，即使我在Foo中僅使用每個文件的幾個功能。

因此，請勿這樣做！ 使用Object.assign( Foo.prototype, path ); 方法，然后僅綁定您實際需要綁定的那些方法。

Answer 2

1. 這會導致嚴重的性能問題嗎？

這完全取決於Foo是什么，以及實例化它的頻率。

2. 導入是否僅觸發一次（例如，在構建應用程序時）或每次調用該組件？

導入僅觸發一次。

3. 這是否會以任何方式影響項目的規模？

由於每個綁定函數有點像一個不同的函數，因此它對內存的影響會稍有影響。 因此，這比僅存儲對原始函數的引用需要更多的內存。 但是我懷疑這是否有意義。 因此，您必須實例化許多Foo才能對內存產生重大影響。

4. 這樣做的一般缺點是什么？

您綁定並存儲了許多您永遠不會使用的功能。

大概，每當調用Foo時，它都會綁定bindFunctions中的所有功能，即使我在Foo中僅使用每個文件的幾個功能。

那么如何懶惰地綁定它們呢？ 像這樣的東西：

import * as path1 from "./path1";
import * as path2 from "./path2";
import * as path3 from "./path3";
// and so on...

class Foo extends Component {
    constructor(props) {
        super(props);
        this.state = {...};
    };

    render() {...}
}

const eventHandler = Object.assign(Object.create(null), path1, path2, path3);
Object.keys(eventHandler).forEach(prop => {
    Object.defineProperty(Foo.prototype, prop, {
        get(){
            return eventHandler[prop].bind(this) ;
        }
    });
});

也許是這樣，它懶洋洋地用綁定函數代替了getter。

Object.keys(eventHandler).forEach(prop => {
    Object.defineProperty(Foo.prototype, prop, {
        configurable: true,
        get(){
            var value = eventHandler[prop].bind(this) ;
            Object.defineProperty(this, prop, { value });
            return value;
        }
    });
});

但是，如果您已經知道絕不會使用其中的大多數方法，那么我仍然不喜歡添加所有這些方法的想法。 只是出於懶惰。