渲染反应

Question

我对反应渲染逻辑感到有点困惑。 以下是我们编写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>
        )
    }
}

第二种方式是

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>
        )
    }

Answer 1

这个问题是一个偏离主题的话题，因为你问的是哪个解决方案更具可读性。可读性是一个意见和个人偏好的问题，并没有实用的答案。我想你应该使用你或你的团队找到更多可读性。请记住，您不需要将所有内容都分解为函数或将所有内容包含在render（）中;相反，使用两者的组合到你认为有用的程度。

然而，就性能而言，两种解决方案的表现都非常相似。任何差异都可以忽略不计。

Answer 2

我认为两种方式都很好。但第二个更好，因为它是模块化的，很容易

• 阅读并理解
• 调试

Answer 3

我通常喜欢将html分成更小的部分并从函数中返回它们。即你的第二种方法。

这会使你的render（）更小。该组件易于理解，干净且对调试更有帮助。