|The Programmers Guide To React
|Written by Ian Elliot
|Monday, 05 June 2017
Page 2 of 3
To define a class component you are supposed to use the ES6 class construct:
The methods are the life cycles functions and the only one the component has to have is a render method which returns the element it creates
You can do this without the class construct simply by creating a constructor with the class name and use a new instance of React.Component as the prototype of objects that it creates. For example:
where we have gone back to the simpler form of the "Hello World" component. The methods don't have to be defined in the prototype, but not doing so isn't as efficient. That is, you could define the function to be:
Now every instance of the new element will get a its own copy of the render function, whereas with the prototype they all share the same copy.
You create an instance of the element and render it in exactly the same way:
Notice that it is the contructor that you pass to createElement as this corresponds to the ES6 class.
The createElement can also set a props object on the instance.
Notice the use of this.props.hellomessage. This is automatically set for you if you use:
So far using a class-based component hasn't done anything for us in that there is nothing new. However, what is new is the fact that we can now include methods that React can call.
But first we have to look a little more closely at createElement and render.
What Is createElement Doing?
There is a subtle point to notice that really doesn't matter much until you get to class components.
What exacty is createElement Doing?
You might think that it is creating and instance of the class or an instance of the object the constructor creates.
What it does is return the constructor, with props set as a property of the object it creates.
What about the children that you might specify?
These are stored as a property _shadowChildren as an array of constructors or functions or whatever is needed to define the child element.
So when does the instance get created?
The answer is when you call render the elements constructor is used to create an instance and then the _shadowChildren property is used to create instances of all of the children. These are composed into a tree structure - the virtual DOM and this is used to create real DOM objects which finally appear in the page.
What happens is a little more subtle in that the React render function compares the virtual DOM with the real DOM and only makes changes that are necessary to make them the same.
This is an important feature of React and one that is said to make working with the UI much simpler. You don't have to work out what has changed because the render function will do it for you and make the changes necessary - this is something we will have to return to.
The big advantage of using a class is that you can define methods on it that can be used by React and by other objects.
There are a number of lifecycle methods that are called when the component is being created and rendered:
If you create the element
then the lifecycle functions are called when you render hello1 to the DOM.
There are also methods that you can use that are called when a component updates.
As well as props there is also a state property which is used to change the state of a component. The state property is an object that you can add properties to. Generally you add properties in the constructor and then make use of them in the render function to customize the component. There is a general rule in React that if you don't use a state property in the render function then it probably shouldn't be implement as state.
For example, suppose we want to show a count of the number of times the Hello World message has been shown - we need a count state property:
In most cases you would set multiple state properties in the constructor as an initial state. We will use the count as part of the displayed message:
As we are using count in the render function it is indeed a valid state variable. However we now have to give the rest of the world some way to change it.
Let's suppose that there is a button which calls a changestate function when clicked:
We need to be able to reference the component in the changestate function. The component is created using:
As described earlier it is the render function which returns a refernce to the instance created by the constructor. The createElement function returns the constructor plus some additional properties.
Now we have a reference to the instance we can call its setState function. You should only ever change state properties using setState because this is the only way the change is rendered. That is setState also calls the render function to modify the virtual DOM, then the React render algorithm only changes the real DOM to make it the same. The simplest changestate function is something like:
If you try this out you will see that the component is indeed rendered again each time you click the button.
It would almost certainly to add a method to the component to increment the state. That is:
|Last Updated ( Saturday, 30 July 2022 )