Now that we have a basic understanding of how a React component renders its content, we're going to talk
a little bit more about the life-cycle of an application.
And so we will get more into each one of these methods later on.
Right now I'm just going to show you a few of them.
So the first one is constructor, which can take in props argument, and it can instantiate the parent class
by running super with the props.
Now this is going to only be run when the application component is instantiated, not every time it re-renders,
and we'll talk more about re-rendering right now.
So, the life-cycle of a component is, basically, a string of functions that get called to determine, based
on variable changes maybe, whether something needs to be updated and re-rendered.
So there's the componentWillMount. And this gets passed two arguments, the props that it will mount with
and state
There is the componentDidMount, which also gets props, state, and these are the props and the state that
it mounts with.
So if I console.log mounted with props state and then save it, we can go back to our browser and look
in the console and it says mounted with undefined undefined.
Also, we can see we have a useless constructor as of right now because it doesn't actually do anything.
We'll get more into that after.
And then there's a few methods that get called during a state change, which is componentWillReceive
Props, that takes in the props.
And this actually gets called before it mounts, because it will receive properties when it mounts. Well,
hopefully. And every time it re-renders as well, or a property changes, it receives the properties all
over again.
And then there's two more, componentWillUpdate gets props and state.
These are the properties in state that it will update to.
So if the properties update, and we'll get more into the props and state here in the next video.
But for right now, basically, this is going to be a JavaScript object.
So will this, or undefined, actually. And this will update.
So you could test.
So this.props is the current props, so you could compare, let's say you had a property called name. So
you could say, if this.props.name doesn't equal props.name, and then you could do something, and then
componentDidUpdate, and this is the safer way to handle component updates. Because I think they're actually
taking out the will method,
so component will update and component will mount, because people are using them improperly.
So component did update gets triggered when a re-render happens as well.
And this is the current, or these are the old properties.
So, in this instance the component will update. You can still access this props for the current properties,
and the props variable that's getting passed in here is the new properties that are getting passed to
it, and the reverse is true with component did update.
These are the old properties, and you can access the current properties by this.props, and then whatever.
So I'm
going to save this.
This does nothing right now. It just logs mounted with and then undefined undefined, and
that's OK.
So in the next video we're gonna be talking about updates and the state itself.