React 应用 SOLID 原则 02

开放封闭原则（OCP）

定义：一个软件实体（类，模块，函数）应该对扩展开放，对修改关闭。主张在不更改源代码的情况下扩展组件的方式来构造组件

以下代码构建了一个 Header 组件，根据页面不同，Header 组件的 UI 也有些不同

代码：

const Header = () => {
  const { pathname } = useRouter();

  return (
    <header>
      <Logo />
      <Actions>
        {pathname === "/dashboard" && (
          <Link to="/events/new">Create event</Link>
        )}
        {pathname === "/" && <Link to="/dashboard">Go to dashboard</Link>}
      </Actions>
    </header>
  );
};

const HomePage = () => (
  <>
    <Header />
    <OtherHomeStuff />
  </>
);

const DashboardPage = () => (
  <>
    <Header />
    <OtherDashboardStuff />
  </>
);

根据所在页面的不同，呈现指向不同页面组件的链接。但是如果将该 Header 组件添加到更多的页面中，每次创建新页面的时候，都需要引用 Header 组件，改变其内部实现。这种方法使 Header 组件与他的上下文紧密耦合，违背了开放封闭原则

为了解决这个问题，我们可以使用组件组合。Header 组件不需要关系它内部的渲染是什么，相反，它可以将此责任委托给将使用 Children 属性的组件

代码：

const Header = ({ children }) => (
  <header>
    <Logo />
    <Actions>{children}</Actions>
  </header>
);

const HomePage = () => (
  <>
    <Header>
      <Link to="/dashboard">Go to dashboard</Link>
    </Header>
    <OtherHomeStuff />
  </>
);

const DashboardPage = () => (
  <>
    <Header>
      <Link to="/events/new">Create event</Link>
    </Header>
    <OtherDashboardStuff />
  </>
);

使用这种方法，我们完全删除了 Header 组件内部的变量逻辑。现在可以使用组合将任何内容放在 Header 中，而无需修改组件本身。

遵循开放封闭原则可以减少组件之间的耦合，使他更具有可扩展性和可重用性。