React.js 中的组合与继承
react jsjavascript libraryfront end technology更新于 2025/10/24 5:32:17
组合和继承是 React.js 中组合使用多个组件的方法。这有助于代码复用。React 建议尽可能使用组合而不是继承，并且继承应该只在非常特殊的情况下使用。
理解它的示例 −
假设我们有一个用于输入用户名的组件。
继承
class UserNameForm extends React.Component {
render() {
return (
<div>
<input type=&"text&" />
</div>
);
}
}
ReactDOM.render(
< UserNameForm />,
document.getElementById('root'));
这很简单，只需输入名称即可。我们将添加两个组件来创建和更新用户名字段。
使用继承，我们将这样做 −
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')
);
组合的使用比继承更简单，并且易于维护复杂性。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
