Question

我正在使用React开发一些Web应用程序，以使任何阅读者都可以理解正在发生的事情。就是说，这本质上是关于 ES6代码优化的问题，而不是React和您有什么问题。

TL; DR：我知道，由于整个过程是如此简单，因此它不会在任何方面有所作为，但我是从理论上想知道什么是最佳方法？什么是“好” 声明要在ES6类中使用的功能的实践标准性能最优化的方法？

定义“ helper”函数的最佳位置是什么，该函数由我的类之一使用，例如：

class Table extends Component {
    constructor() {
        super();
        this.instanceBasedFilter = function(){...}    // Option 1
    }
    state = {};
    render() {
        const { filterProp } = this.props;
        return (
            <React.Fragment>
                <table>
                    {this.filterMethod(filterProp)}
                </table>
            </React.Fragment>
        );
    }
    prototypeBasedFilter(){...}    // Option 2
    filterMethod = filter => {
        filter = filter || [];
        function methodBasedFilter(){...}    // Option 3
        filter.filter(/* need to pass a function here*/)
    };
}
function outsideBasedFilter(){...}    // Option 4

显然，它们都是不同的，在这种情况下无法避免开销，我只是想知道哪种方法被认为是最佳方法。出于争论的考虑，让我们忽略将过滤器助手放置在其他.js文件中的选项，可以说它特定于此组件。

我对这些选项的看法如下，如果我错了，请指正我，如果知道的话，建议一种最佳实践。

选项1：
每次创建组件并将其附加到DOM时，都会创建一个功能对象，这会导致适量的“创建”。从好的方面来看，如果我能正确理解垃圾收集器，那么只要显示该组件，它只会占用内存空间，一旦删除该组件，就会释放内存。

选项2：
将创建一个用于所有组件的单个功能对象，因此处理仅执行一次，但是只要应用程序运行，它将一直保存在内存中。

选项3：
每次组件更新时都会创建一个函数对象，这实际上可能会花费很多时间，但从正面来看，一旦完成渲染，就释放了内存，这就是我想要的如果我没有考虑优化，就凭直觉去吧，因为我只是内联一个箭头函数并完成它。但这是最大的开销，不是吗？

选项4：
现在说实话，这个问题让我最受困扰……因为我无法揭露它的编译方式。将函数声明放置在类本身之外会使它暴露给该类，并且它是原型，但是我不知道webpack / babel如何编译它。我会做出有根据的猜测，就优化而言，它与选项二相似，因为我假设它在某种匿名函数的“范围内”，该匿名函数表示模块环境，这意味着只要应用程序正在运行它将永远不会被收集，但只会被定义一次。

那么最佳实践？

在哪里声明函数来优化ES6类的使用

0 个答案: