Class Components (पुराना तरीका)
In this page:
class ComponentName extends React.Component {
render() {
return <element>{this.props.propName}</element>;
}
}एक Class Component Define करना
एक class component ES6 class syntax उपयोग करके लिखा जाता है और इसे React.Component extend करना चाहिए। एक plain return statement के बजाय, यह एक render() method define करता है जो display होने वाला JSX return करता है।
Hooks मौजूद होने से पहले React में state use करने का यह इकलौता तरीका था।
React.Component extend करना भूल जाने का मतलब है React आपकी class को एक valid component के रूप में recognize नहीं करेगा।उदाहरण: Defining a Class Component
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component {
render() {
return <h1>Welcome (class component)!</h1>;
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
</script>
</body>
</html>Class Component में Props Access करना
एक class component के अंदर, props एक function argument के बजाय this.props के through access किए जाते हैं। इसके लिए constructor में super(props) call करना ज़रूरी है अगर आप एक define करते हैं, ताकि React आपके लिए this.props properly wire up कर सके।
this.props render() में फिर भी ठीक काम करता है।super(props) call किए बिना एक constructor define करना एक runtime error का कारण बनता है।उदाहरण: Accessing Props in a Class Component
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return <p>Hello, {this.props.name}!</p>;
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Sam" />);
</script>
</body>
</html>Class vs Function Components
Hooks के साथ Function components अब वह सब कर सकते हैं जो class components कर सकते हैं, कम code और this की ज़रूरत के बिना उपयोग करते हुए। इसी कारण, modern React documentation और ज़्यादातर नए projects function components ही exclusively use करते हैं, class components को सिर्फ legacy code maintenance के लिए रखते हुए।
this.state/this.setState (class syntax) को useState (Hook syntax) के साथ mix up करना पुराने tutorials पढ़ते समय confusion का एक आम source है।उदाहरण: Class vs Function Components
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ModernWay() {
return <p>Function component: simpler syntax</p>;
}
class OldWay extends React.Component {
render() {
return <p>Class component: more boilerplate</p>;
}
}
function App() {
return <div><ModernWay /><OldWay /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Constructor के अंदर
super(props)call करना भूल जाना, जोthis.propsतक access तोड़ता है। - Class component के अंदर Hooks (जैसे useState) use करने की कोशिश करना -- Hooks सिर्फ function components में काम करते हैं।
- यह भूल जाना कि
render()method को JSX return करना चाहिए, बिल्कुल एक function component के return value जैसा।
- Class components ES6 classes उपयोग करके React components लिखने का एक पुराना syntax है।
- उन्हें
React.Componentextend करना और एकrender()method define करना चाहिए। - State और lifecycle methods function components में use होने वाले Hooks से अलग तरीके से काम करते हैं।
- Modern React code Hooks के साथ function components को favor करता है; class components legacy माने जाते हैं।
Class components React के earliest versions से supported रहे हैं और React 18 में अब भी supported हैं, हालांकि वे अब recommended approach नहीं हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: