資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究React.js 中的組合與繼承
組合和繼承是在 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')
);使用組合比使用繼承更簡單，並且易於保持複雜性。
更新時間: 28-8-2019
2k+ 次瀏覽
廣告