[译] 更可靠的 React 组件：组合及可重用性

最新推荐文章于 2024-05-13 21:47:35 发布

weixin_34192732

最新推荐文章于 2024-05-13 21:47:35 发布

阅读量243

点赞数

文章标签： javascript 前端 ui ViewUI

原文链接：https://juejin.im/post/5b209822f265da6e60394af0

版权

原文摘自：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/

I. 组合

一个组合式组件是由更小的特定组件组合而成的

组合（composition）是一种通过将各组件联合在一起以创建更大组件的方式。组合是 React 的核心。

幸好，组合易于理解。把一组小的片段，联合起来，创建一个更大个儿的。

让我们来看看一个更通用的前端应用组合模式。应用由头部的 header、底部的 footer、左侧的 sidebar，还有中部的有效内容联合而成：

<div id="root"></div>
复制代码

function Application({ children }) {
  return (
    <div className="application box">
      <Label>Application</Label>
      {children}
    </div>
  );
}

function Header() {
  return (
    <div className="header box">
      <Label>Header</Label>
    </div>
  )
}

function Footer() {
  return (
    <div className="header box">
      <Label>Footer</Label>
    </div>
  )
}

function Sidebar({ children }) {
  return (
    <div className="sidebar box">
      <Label>Sidebar</Label>
      {children}
    </div>
  );
}

function Content({ children }) {
  return (
    <div className="content box">
      <Label>Content</Label>
      {children}
    </div>
  )
}

function Menu() {
  return (
    <div className="menu box">
      <Label>Menu</Label>
      <div className="description">
        <div className="text shorter" />
        <div className="text" />
        <div className="text shorter" />
        <div className="text shorter" />
      </div>
    </div>
  );
}

function Article() {
  return (
    <div className="article box">
      <Label>Article</Label>
      <div className="description">
          <div className="text shorter" /> <div className="text longer" />
          <div className="text shorter" /> <div className="text" />
          <div className="text shorter" /> <div className="text" />
          <div className="text" /> <div className="text shorter" />
          <div className="text shorter" /> <div className="text" />
          <div className="text" /> <div className="text shorter" />
          <div className="text shorter" /> <div className="text longer" />
          <div className="text shorter" /> <div className="longer" />
          <div className="text shorter" /> <div className="text" />
          <div className="text" /> <div className="text shorter" />
          <div className="text shorter" /> <div className="text" />
      </div>
    </div>
  );
}

function Label({ children }) {
  return <div className="label">&lt;{children}&gt;</div>
}

const app = (
  <Application>
    <Header />
    <Sidebar>
      <Menu />
    </Sidebar>
    <Content>
      <Article />
    </Content>
    <Footer />
  </Application>
);

ReactDOM.render(app, document.getElementById('root')); 
复制代码

骨架部分展示了好的组合如何构建应用。这样组织代码即富于表现力又便于理解。

React 组件的组合是自然而然的。这个库使用了一个描述式的范式，从而不会抑制组合式的表现力。

<Application> 由 <Header>、<Sidebar>、<Content> 和 <Footer> 组合而成。 <Sidebar> 只有一个子组件 <Menu>，而 <Content> 同样也只有 <Article>。

那么组合式和单一职责以及封装有何联系呢？让我们来看看：

单一职责原则（SRP） 描述了如何根据需求划分组件，封装（encapsulation） 则描述了如何组织这些组件，而 组合（composition） 描述的是如何把整个系统粘合在一起。

单一职责

组合的一个重要方面在于从特定的小组件组成复杂组件的能力。这种逐个击破（divide and conquer）的方式帮助了被组合而成的复杂组件也能符合 SRP 原则。

回顾之前的代码片段，<Application> 的职责就是渲染 header、footer、sidebar 和主体区域。要明白的是这个职责被分割为了四个子职责，每个子职责由对应的子组件实现。

也就是说，组合的好处在于，通过允许子组件分别实现单一职责的方式，让 <Application> 这样的组件也符合了单一职责原则。

可重用性

使用组合的组件也有可重用性的优点，可以重用通用的逻辑。

举例来说，<Composed1> 和 <Composed2> 共享了通用的逻辑：

const instance1 = (  
  <Composed1>
    /* Composed1 组件的特定代码... */
    /* 通用代码... */
  </Composed1>
);
const instance2 = (  
  <Composed2>
    /* 通用代码... */
    /* Composed2 组件的特定代码... */
  </Composed2>
);
复制代码

既然 ctrl+C/ctrl+V 人人喊打，那如何让组件重用通用逻辑呢？

首先，将通用代码封装到新组件 <Common> 中。其次，<Composed1> 和 <Composed2> 应使用组合方式来包含 <Common>；代码实现如下：

const instance1 = (  
  <Composed1>
    <Piece1 />
    <Common />
  </Composed1>
);
const instance2 = (  
  <Composed2>
    <Common />
    <Piece2 />
  </Composed2>
);
复制代码

可重用的组件符合 Don't repeat yourself (DRY) 原则。这种有益的实践节省了时间和精力。

灵活性

在 React 中一个组合式的组件可以控制其子组件，这通常是通过 children 属性实现的。这带来了另一个好处 -- 灵活性。

比如，有一个组件根据用户设备显示提示信息。使用组合可以灵活地实现这个需求：

function ByDevice({ children: { mobile, other } }) {  
  return Utils.isMobile() ? mobile : other;
}

<ByDevice>{{  
  mobile: <div>检测到移动设备！</div>,
  other:  <div>非移动设备</div>
}}</ByDevice>
复制代码