React拥有很强大的组合模型,我们建议使用组合来替代继承来重利用组件之间的代码。

在本章节中,我们将讨论一些开发者经常触及继承的问题,并且我们该如何使用组合来解决这些问题。

组合

一些组件事先不知道它们的子组件。这种问题特别对于组件类似Sidebar或者Dialog这种通用的“盒子”。

我们建议像这样的组件使用特殊的children属性去直接传递子元素到它们的输出里:

function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}

这样的代码传递任意子组件给其他组件通过嵌套的JSX:

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

在CodePen里试一试

任何在<FancyBorder>JSX标签的东西被作为一个children属性传递给FancyBorder组件。当FancyBorder组件在一个div里渲染了{props.children},传递来的元素会出现在最终的输出里。

然而很少有相同的情况,有时你也许需要在一个组件里有多个“入口”。在这样的情况下你也许会想出你自己的约定来替代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 />
} />
);
}

在CodePen里试一试

像<Contacts />和<Chat />这样的React元素都是对象,所以你可以就像其他数据一样将他们作为props传递。

特殊实例

有时某些组件会是其他组件的特殊情况。举个例子,我们可以说一个WelcomeDialog组件是Dialog组件的特殊情况。

在React里,这样的也是由组合来实现,一个更加“特殊的”组件会渲染一个更加“通用”的组件并且用props来配置它:

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

在CodePen里试一试

组合对于定义为类的组件同样做得很好。

function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
} class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
} render() {
return (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<input value={this.state.login}
onChange={this.handleChange} />
<button onClick={this.handleSignUp}>
Sign Me Up!
</button>
</Dialog>
);
} handleChange(e) {
this.setState({login: e.target.value});
} handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
}

在CodePen里试一试

那么继承怎么样?

在Facebook网站,我们使用React制作了上千个组件,但是我们还未找到将会建议创建继承层次的情况。

props和组合给了你所有的灵活性来让你通过明确的和安全的方式自定义组件的样子和行为。记住组件可能接受任意props,包括简单的values,React elements或者函数。

如果你想要在组件之间复用与UI无关的功能,我们建议将它提取到一个单独的js模块里。这样可以在不对组件进行扩展的前提下导入并使用该函数、对象或类。

React文档(十二)组合vs继承的更多相关文章

  1. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  2. React文档(二十二)context

    React中,通过React组件可以很容易地追踪数据流.当你关注一个组件,你可以发现哪一个props被传递了,这样使得你的应用很容被推断. 在一些情况下,你想要传递数据通过组件树而不需要去手动在每一层 ...

  3. React文档(二十)不使用JSX

    JSX并不是使用React的一个强制需求.当你不需要在你的构造环境里设置编译那么不使用JSX会很方便. 每一个JSX元素只是调用React.createElement(componnet, props ...

  4. React文档(二十一)协调

    React提供了一个声明式地API因此你不用担心每一次更新什么东西改变了.这使得开发应用变得简单,但是这个东西在React中如何实现的并不是很明显.这篇文章会解释我们在React的算法中所做的选择以便 ...

  5. React文档(二十三)Web Components

    React和web components是为了解决不同问题而创立的.web components为可重用组件提供了健壮的封装,而React提供了声明式的库来保持DOM和数据同步.这两点是互相补充的.作 ...

  6. React文档(二)Hello World

    开始学习React最简单的实践就是去试一试CodePen上面的Hello World程序.你不需要安装任何东西,只要新开一个标签页打开例子依照原例操作即可.如果你更喜欢在本地开发,那么来看看安装的介绍 ...

  7. React文档(十三)思考React

    在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...

  8. “全栈2019”Java第五十二章:继承与初始化详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. GameUnity 2.0 文档(二) 纸片人系统

    本想快速的 把 之前写的类库,一股脑的 给大家 ,但又觉得,如 msdn那样的 文档,并不能给 初学者 所能接受. 因为 大部分人 对 api 还是比较陌生,也不愿意 去研究和组合. 那么 今天我选用 ...

  10. 浅谈用java解析xml文档(二)

    上一文中总结了dom解析xml文档的方式,本文开始总结使用SAX解析xml 的方式及它的优缺点! SAX(Simple API for XML),是指一种接口,或者一个软件包. 首先我们应该知道SAX ...

随机推荐

  1. jdbc--取大量数据

    最近使用jdbc方式查询数据,保存为csv文件中.当然你可以在pl/sql中直接查出来,copy to excel就好了.但我想通过程序实现 @Test public void test() thro ...

  2. 《Java程序设计》 第四周学习总结

    学号 20175313 <Java程序设计>第四周学习总结 教材学习内容总结 第五章主要内容 了解子类的继承性 子类和父类在同一包中的继承性(除private外其余都继承) 子类和父类不在 ...

  3. ios dispatch_async使用

    一般这样使用: dispatch_async(dispatch_get_global_queue(0, 0),^{ //进入另一个线程 dispatch_async(dispatch_get_main ...

  4. __call__方法和Flask中 first_or_404

    1.__call__方法: 在一个类的实例中,函数一般都是可调用的对象: __call__方法时魔法方法,该方法允许程序员创建可调用的对象(实例),默认情况下是不会触发,也就是说,大多数实例是不可被调 ...

  5. Cartographer源码阅读(4):Node和MapBuilder对象2

    MapBuilder的成员变量sensor::Collator sensor_collator_; 再次阅读MapBuilder::AddTrajectoryBuilder方法.首先构造了mappin ...

  6. 【UML】NO.54.EBook.6.UML.2.002-【Thinking In UML 大象 第二版】- UML 核心元素

    1.0.0 Summary Tittle:[UML]NO.54.EBook.6.UML.2.002-[Thinking In UML 大象 第二版]- UML 核心元素 Style:DesignPat ...

  7. Docker:镜像构建与进入容器总结

    构建镜像总结 docker构建镜像有两种方法: 1.使用docker commit + 容器 docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] ...

  8. torch随机数 manual_seed

    import torch seed = 2018 torch.manual_seed(seed) torch.cuda.manual_seed(seed) a=torch.rand([1,5]) # ...

  9. xml 和 json 序列化忽略字段

    xml 和 json 序列化忽略字段: @JsonIgnore @XmlTransient

  10. Kubernetes有状态应用管理——PetSet

    目录贴:Kubernetes学习系列 1.介绍 在Kubernetes中,大多数的Pod管理都是基于无状态.一次性的理念.例如Replication Controller,它只是简单的保证可提供服务的 ...