Composition vs Inheritance － 组合对比继承 React有一个强大的组合模型，并且我们推荐使用组合来代替继承，在组件间重复使用代码。 在这一章节，我们将考虑React新手开发者经常碰到的几个关于继承的问题，并展示我们如何使用组合来解决这些问题。 containment - 控制 有些组件提前不知道它们的子组件。这对于像 'Sidebar' 或 'Dialog' 的组件是特别平常的。 我们推荐这些组件使用特殊的 'children' props，来直接传递子元素到它们的输出中：
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>
);
}
任何在 '<FancyBorder>' JSX 标签内的元素，传递给 'FancyBorder' 组件，作为 'children' props(也就是 props.children ＝ 标签内的元素)。由于 'FancyBorder' 在 '<div>' 内渲染 '{props.children}'，传递的元素会出现在最终的输出中(组件渲染，输出必须有一个 '根元素'，这里 '<div>' 就是根元素，如果没有 '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 />}
/>
);
}
React元素，像：'<Contacts />'和'<Chat />' 只是对象，所有你能像任何其他数据一样传递它们给 props
specialization - 特殊化（可理解为：特例）
有时我们认为组件是其他组件的 "特殊实例"。例如，我们可能说 'WelcomeDialog' 是 'Dialog' 的一类特殊实例：
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
// 是 'Dialog' 的一种情况而已
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!"
/>
);
}
组合对于类定义的组件，工作的一样出色。
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(pros) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp(e) {
alert(`Welcome aboard, ${this.state.login}!`);
}
rend() {
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>
);
}
}
so what about inheritance? - 那么继承呢？
在Facebook，我们在成千上万点React组件，但是我们未发现任何案例，我们可以推荐来创建组件继承层级结构。
props和组合给了你足够的灵活性，来自定义一个组件的外观和行为，使用一种明确和安全的方式。记住，组件可以接受任意props，包括原始值、React元素或函数。
如果你想在组件之间重用非UI功能，我们建议提取它到一个单独的js模块。组件可以导入它，使用函数、对象或类，而不会扩展它。
转载请注明原文地址: https://ju.6miu.com/read-678106.html
