React State Learning

Last time we looked the "to" use properties, to affect the initial rendering of components. Today we'll take a look at how to use the state, how it differs from the properties and some things you should consider when using State.

The last time we discussed how to use properties to influence a component that will be rendered, let's look at how to use state, the difference between it and the properties, and what scenario can use state.

Like properties, state affects how a component behaves and renders. Unlike properties, there's no-to define-what-state should is applied to the components via JSX ...

Like properties, state affects how a component behaves and renders, but unlike properties, he has no way to define the behavior of a component through JSX.

Properties vs. state

Properties is defined when components is created, whether by JSX or by pure JavaScript. State, on the other hand, was only seen on the inside of component definitions. This is the first, and most important difference between the.

When a component is created, the properties are also defined, whether you are using pure JS or JSX, and state can only be visible within one component, this is the 1th, but the most important difference is the 2nd.

When you think of the properties, you should be thinking of component initialisation. When you are think of state, you should think of a internal data-set which affects the rendering of components.

When you think about a properties, you should think about the initialization of a component, and when you think about a state, you should think about the data that affects the rendering of a component.

There is ways to validate the presence and type of properties, but there is no such mechanism for state. You, as the developer of a component, is the only person who should know what state your component needs, and the correct Data types which should be accepted/provided.

It is up to the developer to decide what state can be accepted or used by a component.

State should is considered private data.

The state should be treated as private data.

Setting Initial State

Before we can use state, we need to declare a default set of values for the initial state. This is do by defining a method called getinitialstate () and returning an object:

Before we can use state, we need to declare some of the default values through the initialized states, which are defined by a function or method called Getinitialstate.

/** * @jsx react.dom*/  varInterfacecomponent =React.createclass ({getinitialstate:function() {    return{name:"Chris", Job:"Developer"    }; }, Render:function() {    return<div>My name is { This. State.name} and I am a { This. State.job}. </div>;  }}); React.rendercomponent (<interfacecomponent/>document.body);

This method tells the component which values should is available from the first render cycle, until the state values is C Hanged. You should never try to use the state values without first declaring them in this manner.

This method tells the component what values can be accessed during the first rendering life cycle, until the state has changed.

Setting State

Setting state should only is done from inside the component. As mentioned, state should is treated as private data, but there is times when you could need to update it. This is what that was done:

/** * @jsx react.dom*/  varInterfacecomponent =React.createclass ({getinitialstate:function() {    return{name:"Chris"    }; }, Handleclick:function() {     This. SetState ({name:"Bob"    }); }, Render:function() {    return<div onclick={ This.handleclick}>Hello { This. State.name}</div>;  }}); React.rendercomponent (<interfacecomponent/>document.body);

You cannot set new state values until the component have been mounted. This happens when it's passed (whether directly or by nesting it) to thereact.rendercomponent () method. Then again, what would you need to?

Setting state in the this was only really needed when your component ' s rendering and behaviour depends on outside factors. We'll look at examples of this later on the series.

replacing state

It's also possible to replace values in the state by using the replacestate ()method. Let's look at a example of this:

/** * @jsx react.dom*/  varInterfacecomponent =React.createclass ({getinitialstate:function() {    return{first:"Chris", Last:"Pitt"    }; }, Handleclick:function() {     This. Replacestate ({first:"Bob"    }); }, Render:function() {    return<div onclick={ This.handleclick}>Hello { This. State.first + "" + This. State.last}</div>;  }});

The replacestate () method is if you want to clear the values of already in state, and add new ones.

The Replacestate () method is used when you want to clear all the values in the state and want to add one.

Avoiding state

The use of State should is as limited as it can get. When you use state, you run the risk of introducing a number of (sometimes subtle) errors in the behaviour and rendering O F Your components.

If you decide to use the properties to define your initial state; Your properties might change, leaving your initial state calculations based on stale data. You also introduce tight coupling between the properties that need to being defined, and the internal state of the component.

A general rule isn't to use the state for static components. If you component does is not need to the change, based on external factors and then does not use the state. It's better to calculate rendered values in the render () method.

Conclusion

State is a double-edged sword. On the one hand, it's useful for sanely controlling internal data. On the other, it can leads to any sorts of mayhem, if not properly controlled. Use it wisely!

State is a double-edged sword, you'd better use state as private data.

React State Learning