Class Components vs Functional Components
Today’s blog is going to cover class components and functional components and how they are different.
Base Component Structure
//Class Component
Import React, { Component } from ‘react’;class NameHere extends Component{
render(){
return()
}
}export default NameHere
This is the bare minimum for a class component. As you might have guessed a class component is just a class that uses React.Component to render JSX inside of its render method.
//Functional Component
Import React from 'react'const NameComponent=()=> {
return()
}export default NameHere
This is the bare minimum for a functional component. All a functional component is a function that returns jsx.
Props
Now that we know the base versions of both class and functional components it’s time to get into props and prop passing. We’ll start with the class components first.
//Class component-props
import React, { Component } from 'react';class ComponentOne extends Component {
render() {
return (
<div>
<componentTwo name = { name }/>
</div>
};
}
}classComponentTwo extends Component {
render() {
return <h3>{this.props.name}</h3>;
}
}
Ok, so this gets broken into two parts passing and using. To pass props down to another component all you need to do is first assign a variable like shown above. Then inside the render return block use the component you want to pass props to then give the props a name and assign it to the variable you made earlier. Now for part two to use the prop you just passed you have to do “this.props.___”. An example is shown above.
//Function component-props
import React from 'react';function ComponentOne() {
return(
<div>
<ComponentTwo note="go home"/>
</div>
);
}function ComponentTwo(props) {
return <h2> Please {props.note} </h2>
}
Let’s go over props for functional components now that we’ve gone over class component props. Same as last time this will be broken in two parts passing and using. Lucky for us passing props for functional components and class components are the same. To use props in a functional component you need to put props in the () of the function as shown above then use props.___ to use the props just passed down.
State
The last thing I want to talk about today is how the state is done in both class and functional components. We’re going to start with the Class component again.
class stateComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
} render(){
return(
<div>
{this.state.count}
<button onClick={() => this.setState({count: this.state.count + 1})}>
Add one
</button>
</div>
);
}
}
We are going to use Constructor this is where our stat is going to be, but we are also going to use super(props) inside so our props variable doesn’t become undefind. Something to know about Constructor is that it runs before it is even mounted. But the state itself is like an object with key and value pairs.
Const FunctionalComponent = () => {
const [count, setCount] = React.useState(0); return(
<div>
count: {count}
<button onClick=(() => setCount(count + 1)}> Add one!</button>
</div>
);
};
For a long time if you wanted to do state you had to use a class component but in the react 16.8 update they introduced useState. Now you can take your pick of class or function and still do state. That aside to get your state working a function component you have first make a state with the useState hook. Let me break that down for you really fast using the example above. “Count” is what you want to name your state. Then you take the state name and add set in front of it this is what you’ll be using when you want to change the state. Then there is the “= React.useState(“whatever goes here will be the initial value”)”. If you want to call or reference the state you just use the name. If you want to change it you do setName.
This has been my blog on class vs functional components. I hope you found this blog helpful in some way. Always I will be putting links to websites I found helpful while learning this or I find helpful.
Helpful links
