Javascript react中的渲染

我对渲染逻辑有点困惑。 下面是两种为JSX编写代码的方法。 首先编写整个HTML，然后将HTML分解为返回HTML的较小函数

我想知道在组件性能和代码可读性方面应该采用哪种方法

第一个是

export class App extends React.Component {
    render() {
        return(
            <div>
                <div class="user"> {... } </div>
                <div class="profile"> {...} </div>
                <div class="details"> {...} </div>
            </div>
        )
    }
}

导出类应用程序扩展React.Component{
render（）{
返回(
{... } 
{...} 
{...} 
)
}
}

第二种方法是

export class App extends React.Component {
    renderUser = () => (<div class="user"> {... } </div>) 
    renderProfile = () => (<div class="profile"> {...} </div>)
    renderDetails = () => (<div class="details"> {...} </div>)
    render() {
        return(
            <div>
                {this.renderUser()}
                {this.renderProfile()}
                {this.renderDetails()}
            </div>
        )
    }

导出类应用程序扩展React.Component{
renderUser=（）=>（{…}）
renderProfile=（）=>（{…}）
renderDetails=（）=>（{…}）
render（）{
返回(
{this.renderUser（）}
{this.renderProfile（）}
{this.renderDetails（）}
)
}

我认为这两种方法都很好。但是第二种方法更好，因为它是模块化的，并且易于使用

• 读懂
• 调试

---

我通常喜欢将html拆分成更小的部分，然后从函数返回。也就是说，第二种方法

---

这将使您的render（）更小。该组件易于理解、干净，对调试也没有多大帮助。

这个问题是一个边缘话题，因为您要问的是哪种解决方案更具可读性。可读性是意见和个人偏好的问题，没有实际的答案。我想您应该使用您或您的团队发现的任何内容e可读。请记住，您不需要将所有内容分解为函数或包含render（）中的所有内容；相反，您可以将这两者结合使用，直到您觉得有用为止

---

然而，就性能而言，这两种解决方案的性能几乎相同。任何差异都可以忽略不计。

您也可以编写

renderUser=…

。请投票人给出一个原因，我很乐意改进这个答案。