是時候來優化一下我們的代碼了。
前面的文章提到過：重復代碼是混亂的根源！，本篇文章我們來繼續消滅重復代碼。
細心的同學應該能發現：每一個Page組件（/src/pages下的組件）的render方法都擁有相似的jsx結構，比如：
每一個頁面都包含一個頁面的標題（header標簽和h1標簽），并且頁面的主要部分都被放在了一個main標簽中。
現在很多網站的設計都是如此：大部分頁面都有相似的header和footer，不同的是中間部分的內容。
既然是這些部分都是相似的，那么在每一個地方都重復寫一遍就顯得太沒水平了，stupid！
怎么用一份代碼來渲染這些相同的地方，并且也能夠滿足不同的頁面之間一些差異化的配置呢（如本文中各頁面標題不同）？
傳統的MVC Web應用可以通過模板引擎的模板頁（layout）來達到這樣的效果。
使用React，我們可以使用布局組件來解決這個問題。
新建/src/layouts目錄用來存放布局組件，新建HomeLayout.js文件：
我們把每個頁面中通用的部分提取到了HomeLayout組件中，在HomeLayout中使用props.title來維護頁面的標題文本。
使用props.children來渲染每個頁面特有的內容部分。
現在我們可以這樣來渲染HomePage：
<HomeLayout title="Welcome"> <Link to="/user/list">用戶列表</Link> <br/> <Link to="/user/add">添加用戶</Link></HomeLayout>HomeLayout里面的內容會作為HomeLayout的props.children渲染到最終的頁面上。
現在我們已經把3個頁面組件的重復部分使用HomeLayout來替代了，是不是覺得代碼又變得干凈了很多呢？
請像潔癖一樣對待自己的代碼。
你以為頁面重構就到此為止了嗎？
現在每一個頁面都要先import HomeLayout組件，然后將頁面內容使用HomeLayout組件包裹起來。
如果你足夠“潔癖”，這里也應該成為你“清掃”的目標。
怎么做？
// /src/index.js...ReactDOM.render(( <Router history={hashHistory}> <Route path="/" component={HomeLayout> <Route path="/" component={HomePage}/> <Route path="/user/add" component={UserAddPage}/> <Route path="/user/list" component={UserListPage}/> </Route> </Router>), document.getElementById('app'));我們可以給每個需要使用HomeLayout布局的頁面路由添加一個component為HomeLayout的父路由，其效果等同于：
當url為”/”：
<HomeLayout> <HomePage/></HomeLayout>當url為”/user/add”：
<HomeLayout> <UserAddPage/></HomeLayout>當url為”/user/list”：
<HomeLayout> <UserListPage/></HomeLayout>HomeLayout將會根據當前的url從props.children接收到相應的組件內容。
這樣做可以解除每個頁面與HomeLayout之間的耦合，但也有一些問題：
title怎么辦？（使用react context api）有的頁面組件需要添加一個額外的根節點（如/src/pages/Home.js）這里不再進行進一步的講解，自己動手試試？
新聞熱點
疑難解答
