Question

我之前曾询问过如何处理来自外部文件here的imports外部函数的问题。

现在解决方案是这样做 Object.assign( Foo.prototype, path );，只要您想将这些函数用作@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中每个文件的几个函数。

现在我的问题是：

这会导致严重的性能问题吗？
imports仅触发一次（例如，当应用构建时）或每次调用该组件时都会触发吗？
这会以任何方式影响项目的大小吗？
这样做的一般缺点是什么？

提前致谢！

Answer 1

这会导致严重的性能问题吗？

为每个实例使用bind创建新函数确实是一个问题。无论是内存还是性能更多，我都说不出来，但大多数情况下它仍然不重要。如果你确实有大量的实例/实例，你会想避免这种情况。

导入只会触发一次（例如，当应用构建时）或每次调用组件时都会触发吗？

模块只评估一次。

每当调用Foo时，它会绑定bindFunctions中的所有函数，即使我只使用Foo中每个文件的几个函数。

所以就是不要那样做！使用Object.assign( Foo.prototype, path );方法，然后仅绑定您实际需要绑定的那些方法。

Answer 2

这会导致严重的性能问题吗？

这完全取决于Foo是什么，以及它实例化的频率。

导入只会触发一次（例如，当应用构建时）或每次调用组件时都会触发吗？

导入仅触发一次。

这会以任何方式影响项目的大小吗？

它会稍微影响内存的影响，因为每个绑定函数都有点像一个独特的函数。因此，这需要比仅存储对原始函数的引用稍多的内存。但我怀疑这是否有意义。您必须实例化大量Foo s才能对此产生重大内存影响。

这样做的一般缺点是什么？

你绑定并存储了许多你永远不会使用的功能。

据推测，每当调用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;
        }
    });
});

然而，如果您已经知道自己从未使用过大部分方法，我仍然不喜欢添加所有这些方法;只是出于懒惰。

导入功能的性能问题

2 个答案: