React官方文档--Composition vs Inheritance

最新推荐文章于 2021-05-26 08:04:23 发布

翻译最新推荐文章于 2021-05-26 08:04:23 发布 · 1.2k 阅读

javaScript 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了React中如何利用组合而非继承来实现组件复用的方法。介绍了一种通过props传递子组件的方式，使得父组件可以不知道其子组件的具体类型。同时，文章还讨论了如何通过专门化来创建更具体的组件。

Composition vs Inheritance

React有一个强大的结构模型，我们建议使用结构来代替继承来实现组件之间的重用。
我们将要考虑一些问题，这些问题是可以用结构来代替继承解决问题。

包含

一些组件并不知道他们的子元素到底是什么情况，像Sidebar或者Dialog一样都继承自boxes是很正常的一件事情。
我们建议一些组件使用特殊的children属性来传递子元素直接到他的输出。

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标签诶不的组件都会被传递到FancyBorder组件中，作为children属性。然后FancyBorder渲染{props.children}在其内部的<div>组件内部，传递的元素会变成最后的输出。
有些时候我们在一个组件中有多个空洞，在这样的例子中，你可能需要使用你自己写的东西来代替children。

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 />
            }
        />
    );
}

专门化

有时我们想要某个组件是另外一个组件的特殊情况，比如，我们可能需要说WelcomeDialog是Dialog的一个特例。
在React中，这也是通过结构化实现的，一个更加特殊化的组件渲染了一个更加基础化的组件，并且使用props来修饰他。

//基本组件Dialog，通过props的title和message属性进行扩展
function Dialog(props) {
    return (
        <FancyBorder color="blue">
            <h1 className="Dialog-title">
                {props.title}
            </h1>
            <p className="Dialog-message">
                {props.message}
            </p>
        </FancyBorder>
    );
}
//扩展组件WelcomeDialog，传递给基本组件Dialog两个参数
function WelcomeDialog() {
    return (
        <Dialog title="Welcome" message="Thank you for visiting our spacecraft!">
        </Dialog>
    )
}