React.js中的合成与继承
组合和继承是在React.js中一起使用多个组件的方法。这有助于代码重用。React建议尽可能使用组合而不是继承，并且仅在非常特殊的情况下才应使用继承。
理解它的例子-
假设我们有一个输入用户名的组件。
继承
class UserNameForm extends React.Component {
render() {
return (
<div>
<input type="text" />
</div>
);
}
}
ReactDOM.render(
< UserNameForm />,
document.getElementById('root'));这个sis很简单，只需输入名称即可。我们将有两个组件来创建和更新用户名字段。
使用继承，我们将像-
class UserNameForm extends React.Component {
render() {
return (
<div>
<input type="text" />
</div>
);
}
}
class CreateUserName extends UserNameForm {
render() {
const parent = super.render();
return (
<div>
{parent}
<button>Create</button>
</div>
)
}
}
class UpdateUserName extends UserNameForm {
render() {
const parent = super.render();
return (
<div>
{parent}
<button>Update</button>
</div>
)
}
}
ReactDOM.render(
(<div>
< CreateUserName />
< UpdateUserName />
</div>), document.getElementById('root')
);我们扩展了UserNameForm组件，并使用super.render()将其方法提取到子组件中。
组成
class UserNameForm extends React.Component {
render() {
return (
<div>
<input type="text" />
</div>
);
}
}
class CreateUserName extends React.Component {
render() {
return (
<div>
< UserNameForm />
<button>Create</button>
</div>
)
}
}
class UpdateUserName extends React.Component {
render() {
return (
<div>
< UserNameForm />
<button>Update</button>
</div>
)
}
}
ReactDOM.render(
(<div>
<CreateUserName />
<UpdateUserName />
</div>), document.getElementById('root')
);使用组合比继承更简单，并且易于维护复杂性。