美文网首页
React组合 vs 继承

React组合 vs 继承

作者: 灭绝小师弟 | 来源:发表于2020-03-29 20:30 被阅读0次

    组合

    React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。
    有些组件无法提前知晓它们子组件的具体内容,这种情况一般使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中:

    function FancyBorder(props) {
      return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
          {props.children}
        </div>
      );
    }
    
    function WelcomeDialog() {
      return (
        <FancyBorder color="blue">
          <h1 className="Dialog-title">
            Welcome
          </h1>
          <p className="Dialog-message">
            Thank you for visiting our spacecraft!
          </p>
        </FancyBorder>
      );
    }
    

    <FancyBorder> JSX 标签中的所有内容都会作为一个 children prop 传递给 FancyBorder 组件。因为 FancyBorder 将 {props.children} 渲染在一个 <div> 中,被传递的这些子组件最终都会出现在输出结果中。

    少数情况下,你可能需要在一个组件中预留出几个“洞”。这种情况下,我们可以不使用 children,而是自行约定:将所需内容传入 props,并使用相应的 prop。

    function SplitPane(props) {
      return (
        <div className="SplitPane">
          <div className="SplitPane-left">
            {props.left}
          </div>
          <div className="SplitPane-right">
            {props.right}
          </div>
        </div>
      );
    }
    
    function App() {
      return (
        <SplitPane
          left={
            <Contacts />
          }
          right={
            <Chat />
          } />
      );
    }
    

    继承

    React没有发现需要使用继承来构建组件层次的情况。
    Props 和组合提供了清晰而安全地定制组件外观和行为的灵活方式。

    组件可以接受任意 props,包括基本数据类型,React 元素以及函数。

    如果需要要在组件间复用非 UI 的功能,我们建议将其提取为一个单独的 JavaScript 模块,如函数、对象或者类。组件可以直接引入(import)而无需通过 extend 继承它们。

    相关文章

      网友评论

          本文标题:React组合 vs 继承

          本文链接:https://www.haomeiwen.com/subject/tqayuhtx.html