Composition vs Inheritance
React ප්රබල සංයුති ආකෘතියක් සමඟ පැමිණේ, එනිසා අපි නිර්දේශ කරනව සංයුතිය(composition) භාවිතා කිරීමට ආවේණිකය(inheritance) වෙනුවට components තුල නැවත භාවිතය සඳහා.
මෙම කොටසින්, ප්රශ්න කිහිපයක් අපි සලකා බලමු React වලට අලුත් developers බොහෝ විට ආවේණිකය (inheritance) භාවිතා කරන්නව, එනිසා අපි බලමු කොහොමද එවා විසදන්නෙ සංයුතියcomposition බාවිතා කර.
සීමා කිරීම (Containment)
සමහර කොටස් (components) ඔවුන්ගේ දරුවන්(children) කලින් නොදැන සිටිති. මෙය විශේෂයෙන්ම පොදු වේ Sidebar
හෝ Dialog
“පෙට්ටි” නිරූපණය වන කොටස් (components) සඳහා.
අපි නිර්දේශ කරනව විශේෂය children
prop භාවිතා කරන කොටස්(components) දරුවන්ගේ(children) මූලද්රව්ය නිශ්පාදනයට කෙලින්ම ලබා දෙන ලෙස:
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children} </div>
);
}
මෙය වෙනත් අත්යවශ්ය අංගයන් JSX සවිකිරීම මඟින් අත්තනෝමතික ලෙස දරුවන්ට (to children) ලබා දෙයි.
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
prop එකක් ලෙස. FancyBorder
එක {props.children}
<div>
එකක් තුල ඉදිරිපත් කරන්න නිසා, ලැබුනු elements අවසන් ප්රතිඵලය තුල දක්නට ලැබේ.
මෙය සාමාන්යයෙන් අඩු වේ, ඔබට එකකට වඩා වැඩි කුහර අවශය විය හැක සමහර කොම්පොනන්ට් වලට. එවැනි අවස්තා වලදී ඔබට ඔබගේම සම්මතය බාවිතා කල හැකිය චිල්ඩ්රන්ස් භාවිතා කිරීමට අමතරව:
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 /> } />
);
}
විශේෂීකරණය (Specialization)
සමහර කොටස්(components) අපි වෙනත් කොටස්වල(components) “විශේෂ අවස්ථාවන්” ලෙස සලකති. උදාහරණයක් ලෙස, අපි කියමු WelcomeDialog
එක Dialog
හි විශේශිත කොම්පොනන්ට් එකක් ලෙස. React වලදී, මෙයත් සංයුතියෙන් (composition) තුලින් ඉෂ්ට කරගත හැකිය, වඩාත් “විශේෂිත” සංරචක වඩාත් “පොදු” එකක් බවට පරිවර්තනය වන අතර එය props මගින් හැඩගසයි.
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title} </h1>
<p className="Dialog-message">
{props.message} </p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog title="Welcome" message="Thank you for visiting our spacecraft!" /> );
}
සංයුතිය(Composition) class ලෙස අර්ථ දක්වා ඇති components සඳහාද හොඳින් ක්රියා කරයි:
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(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
render() {
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>
);
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
}
එසේනම් Inheritance යනු කුමක්ද?
facebookහිදී, අපි React බාවිතා කරයි දහස් ගණනක components සදහා. නමුත් අපිට inheritance කවදාහෝ අවශයා ඌවේ නැත.
Props සහ composition ඔබට අවශ්ය නිදහස ලබාදේ component වල පෙනුම හා හැසිරීම පැහැදිලිව සහ ආරක්ෂිත ආකාරයකින් සැකසීමට. සිහිකරගන්න components අත්තනෝමතික props පිළිගත හැකිය, ප්රාථමික අගයන් ඇතුළත් වේ. ප්රාථමික අගයන් සහ React elements, හෝ functions.
අපි යෝජනා කරමු එය වෙනම JavaScript module එකකට එපිටීමට. එමගින් components එක ආනයනය කර විස්තීරණයකින් තොරව භාවිතා කර හැක.