Class_Based

🔥

ClassBased components only being used when we want to use ErrorBounderies and almost everything we can create in the Functional components

🔥

So React upgraded itself in the newer versions .Before 16.8 version of react we has to use classBased components in some cases

Class Based Components - Compressive Guide

Class Based Components is a range of modular and scalable tools which bring you a new way to work with any type of content, whether it's text, images, videos or audio files.

https://www.learnvern.com/reactjs-tutorial/class-based-components-in-react

First we have to use the constructor method to define the states in the componet

Now in the above image we can see that we are assigning the empty object to the constructor then later we can set the value in the state by setState( ) Method

🔥

Now if we want to maintain states in the class based components then we cannot use the hooks as earlier then we have to use the method which is by default given by react

we have given a setState( ) method by default in the components so that all the state we can manage in that single function

this function takes a object as all the states are maneged in a single function

Now we are updating the title in the setState method which is by default given by the component which is given by react

So now we can use the title as this.state.title anywhere in the state

🔥

we have to use this.setState and this.state.property_name to access the property because this is a class based component

Some important point

Now we have noticed in the functional component when we are maintaining the objects state in the useReducer hook then we have to use


setReducer(...state,{title:"new title"}  // otherwise if there is anyother key 
// along with title then it will be overwrite with the new object 
setReducer({title:"new title"}) // it will overwrite all the value to the title only 
// in the object

But in the class based components if we have


constructor(){
this.state{
 title:'',
userName:'',
address:''
}
}




onClickHandeler(){
		this.setState({title:"new title"})// then it will only update the title value 

// without overwriting the userName and address 

}

Suppose if we have to toggle the value depending on the prevstate then we can also do this ⇒


this.setState((prevstate=>{return {showtitle:!prevstate.title}}))// now here we are 
// changing the value of the showtitle based on the prevstate

🔥

Now we have defined the constructor and the cliclhandeler but we have to run the handeler on the click on a button the we have to bind the function with this

We can use this.onClickHandeler but because this is a function it is good practice to use .bind(this)

Now we are used some methods to reevaluated some api calls and all

Now ComponentDidMount tab call hota hai jab jab ye class evaluate hoti hai

suppose you are using a component as a card and looping it with diffrent props data then it will be reevaluate than …. time and the componentDidMount( ) called that many times

ComponentDidUpdate( ) tab kaam karta hai jab maan lo tum kisi props ki state to change kara rhe ho tab

ComponentWillUnmount( ) kisi component k DOM se delete hone se just pehle call hota hai taaki if there are any associated task ( like timer or any process ) so

Now when we want to apply some action on the component update then we can use the by default parameters provided by react in the componentDidUpdate( params )

These components are prevState and prevProp

Using context in Class Based Components

The Context is same as in the function based components

EveryThing remains the same but the listner will be diffrent

🔥

Now if we are using the consumer method then we can also use the same in the class based because of jsx syntax but we cannot use the useContext hook in the class based component

Now how do we access the Context if we need it outside jsx then

🔥

Here we can give variable name only contextType because it is predefined in react

Class_Based_React

Some important point

Using context in Class Based Components