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')
);使用组合比继承更简单，并且易于维护复杂性。
热门推荐
10 儿子订婚情话祝福语简短
11 祝福语商业文案范例简短
12 新年拜年祝福语简短版
13 蛋糕祝福语公司文案简短
14 狗狗受伤祝福语大全简短
15 教师送给家长祝福语简短
16 小伙买车祝福语大全简短
17 称赞最美的祝福语简短
18 母亲贺卡生日祝福语简短