reactjs - 在组件中拆分渲染函数是反模式还是性能较低？

Question

我在网上看到过几次这种用法，但我还没有找到关于这件事的任何细节。

以这种方式构建组件是反模式还是对性能有影响？

我发现这种方式更具可读性，还允许我为组件的每个部分对变量进行分组

我有一些性能问题，但我认为它们与此无关，所以我想放弃这个主题作为负责任的主题。

顺便说一句，这样划分是因为不需要为那些节点创建额外的组件。

像这样分解渲染方法:

const MyComponent = React.createClass({

    //helper render function
    render_top(){
        const cssClass='some-class';
        return( <div className={cssClass}>topElement {this.props.someProp}</div> );
    },

    //helper render function
    render_bottom(){
        const cssClass='some-other-class';
        return( <div className={cssClass}>topElement</div> );
    },

    //Actual Render Function
    render(){
        return(
            <div>
                {/*... bunch of jsx code and components*/}

                { this.render_top() }    {/*<---- is it valid?*/}

                {/*... bunch of jsx code and components*/}

               { this.render_bottom() }  {/*<---- will affect performance?*/}

            </div>
        );
    }

});

更新:如果有人可以建议进行测试以发现差异，那将会很有趣。

在 React 页面中，他们评论了在 render 方法中使用箭头函数 ()=>{ }，尽管这是反模式，因为每次组件渲染时，该函数的新实例都会被创建。

但在相同的方法中，每次 render 方法调用辅助函数时...返回的值是一个新实例还是每次都是同一个实例？

我不确定如何测试它，我对所有观点都持开放态度，但是如果有一些更具体的东西来支持这些观点会很好......

Answer 1

它的性能并没有降低。它是将渲染函数拆分为更有意义的 block 并防止它变得太大和不可读的标准