ReactDOM.render()中的一个根元素或整个布局?

时间:2016-09-07 12:00:23

标签: javascript reactjs

所以我现在正在学习react.js并且想知道,如果让我的ReactDOM.render()更好(当前状态):

ReactDOM.render(
  <div className="container">
    <div className="row">
      <div className="twelve columns">
        <Header />
      </div>
    </div>
    <div className="row">
      <div className="six columns">
        <Sidebar />
      </div>
      <div className="six columns">
        <Posts data={posts}/>
      </div>
    </div>
  </div>,
  document.getElementById('content')
);

或者更好地拥有如下所示的根元素:

ReactDOM.render(
  <MyPageRoot />,
  document.getElementById('content')
);

然后将所有布局内容(行,列等)添加到render() - MyPageRoot的方法?

1 个答案:

答案 0 :(得分:0)

第一种方法不会为您提供定义组件状态或挂钩到生命周期事件的任何机会。此外,随着应用程序的增长,第一种方式最终将变得非常长。

由于这些原因,将应用程序拆分为组件更为常见,无论是通过React.createClassclass extends React.Component还是仅返回某些元素的纯函数。