Class Components.
If you’re new to Software Development, specifically, React, you may have heard of functional components. Maybe you’ve seen knowledge bases mention class. Maybe, you’ve long searched for an answer and of course, didn’t find it (which almost NEVER happens).
What exactly is it?
Class Components are slow, robust ways to define React components. They consist of functions that add functionality to the application. As someone familiar with functional components, class components was interesting to grasp. There are some key features that are unique to it.
First, class components have base access to the state. State determines the current behavior of the component, and is changed by calling the setState() function. Simply, whenever the current state needs to change, the setState() interprets the change.
Secondly, class components have access to the React lifecycle. Now, you may be asking what in the world is this? You know what, so did I. I’m still asking myself this question. These are basically the React lifecycle from a variety of points during app creation (fetching data, database creation) to inputting elements in the DOM. We’ll cover the three main phases: Mounting, Updating, and Un-mounting.
Mounting:
At this phase, we’re inputting elements into the DOM. Right before mount occurs, the constructor() must be called. The constructor() initializes the local state. This means, you can set the current state directly. As for setState(), that must be used in any other method instead. The constructor is also where this.props object is implemented. In order to use the local this.props, super(props) method must be called, meaning you cannot use this until after the parent constructor (super),is called. Super just refers to the parent class constructor.
Updating:
This phase includes the only required method in class components, render(). Render has to return some type of data, even if it is null. Why? It's because by default, the component file calls the render method to display the JSX or HTML data.
Un-mounting:
When you no longer want a component in your DOM (because it randomly broke, per usual with code), and want to remove the component, this method is called. This phase is pretty straightforward. When a component is deleted, this method is called. When you're ready to press that red button you're receiving "DO NOT PRESS THIS BUTTON!" alerts for, press it and see what happens, live a little.
If you do not leave here more confused than when you got here, I've failed you. Do not fret though, Class Components get much MUCH, more granular than this. I purposefully left out lifecycle hooks for each phase. I'll go into this in a separate post (wink, wink). I wanted you to have a base understanding of class components and how it works. What are class based components? How do they work? Hopefully this answers questions like these. Lastly, this is for someone beginning in the world of programming, A fine world, that one day, you'll be creating yourself.
Oldest comments (0)