【React全家桶入门之七】提取布局组件

最新推荐文章于 2026-05-18 18:01:16 发布

原创

最新推荐文章于 2026-05-18 18:01:16 发布 · 1.2w 阅读

标签

#react #布局 #优化 #重构

本文介绍了如何在React应用中优化代码，通过提取布局组件减少重复代码。文章首先提出目标，即消除Page组件间的重复jsx结构。接着，作者阐述了布局组件的概念，展示了如何创建HomeLayout组件，并使用它来渲染各个页面的共通部分，如标题和主要内容区域。随后，通过重构主页、用户添加页面和用户列表页面，进一步展示了如何应用布局组件。最后，文章提出了一种更高级的重构思路，即通过在路由层面使用HomeLayout，以降低耦合度，但同时也提出了由此带来的新问题，如title管理和特殊页面需求。

是时候来优化一下我们的代码了。

前面的文章提到过：重复代码是混乱的根源！，本篇文章我们来继续消灭重复代码。

目标

细心的同学应该能发现：每一个Page组件（/src/pages下的组件）的render方法都拥有相似的jsx结构，比如：

render () {
  return (
    <div>
      <header>
        <h1>...</h1>
      </header>

      <main>
        ...
      </main>
    </div>
  );
}

每一个页面都包含一个页面的标题（header标签和h1标签），并且页面的主要部分都被放在了一个main标签中。

现在很多网站的设计都是如此：大部分页面都有相似的header和footer，不同的是中间部分的内容。

既然是这些部分都是相似的，那么在每一个地方都重复写一遍就显得太没水平了，stupid！

怎么用一份代码来渲染这些相同的地方，并且也能够满足不同的页面之间一些差异化的配置呢（如本文中各页面标题不同）？

传统的MVC Web应用可以通过模板引擎的模板页（layout）来达到这样的效果。

使用React，我们可以使用布局组件来解决这个问题。

布局组件

新建/src/layouts目录用来存放布局组件，新建HomeLayout.js文件：

import React from 'react';

class HomeLayout extends React.Component {
  render () {
    const {title, children} = this.props;
    return (
      <d

最低0.47元/天解锁文章