react component instance property state
state
- The component of a stateful state is calledComplex components, Components without state are called simple components
- Data is stored in the state, and data changes drive the display of the page
<script type="text/babel">
// Create components class Weather extends {
// Constructor is called once constructor(props) {
super(props);
// Objects must be received = { isHot: true };
// The instance object on the left is the instance object. The instance object originally had no changeWeather // Find changeWeather along the prototype object, and then modify the bound this by bind // Finally, there is an additional function on the left and assigned a changeWeather value. = (this);
}
// render call 1+n times initially, update n times render() {
// Assign a callback function to the event, not assign values, do not have brackets // C in onClick should be capitalized // Here the changeWeather is the changeWeather of the instance return <h1 onClick={} >Weather today{ ? 'Hot' : 'cool'}</h1>
}
// ChangeWeather is placed on the Weather prototype object for instance use // Since changeWeather is a callback of onClick, it is not called through an instance, but is called directly // The methods in the class turn on local strict mode by default, so this in changeWeather is undefined
// Update n times, call n times changeWeather() {
// The data in the state cannot be modified directly, the following is the direct modification // To change with built-in API
// The following writing method has not changed state // = !;
// To update like this, and the update is a merge update, and the unmodified remains unchanged const isHot = ;
({ isHot: !isHot });
}
}
// Rendering component const root = (('test'));
(<Weather />);
</script>Abbreviation of state
class Weather extends {
state = { isHot: true };
render() {
return <h1 onClick={} >Weather today{ ? 'Hot' : 'cool'}</h1>
}
// The arrow function does not have this, but it will look for this of the outer function. // It belongs to a custom method and is considered as an assignment statement changeWeather = () => {
const isHot = ;
({ isHot: !isHot });
}
}
const root = (('test'));
(<Weather />);
</script>Supplement: Detailed explanation of state in react
state
understand:state is the most important property of component objects, and the value is the object (can contain multiple key-value combinations)
The value in state can be modified. The only way to modify is to call it. After each modification, the method is automatically called and the component is rendered again. (That is, direct
=2This will be invalid to modify the value directly)
State is assigned to the component's constructor
class View extends Component{
constructor(){
super();
={
num:10
}
}
//state={num:10} can also be used as an instance attribute directly } setState has two formats
- Pass an object
Modify the value of state directly
Because and may update asynchronously, they cannot rely on their values to update the next state. Solution to let setState() receive a function
({})- Pass a function
Receive two parameters preState, props
The state before the update, the props after the update
Modify the value of state itself (example: +4)
// Two ways to write a function// Normal functions (function(state,props){
return {num:--}
})
// Arrow function ((state,props)=>({num:}))Iterate through the value of the state and loop the page
list(){
return ((v,i)=>(<li key={i}>{v}</li>))
}
//It can be rendered directly in the dom (because the render will be executed twice, so it needs to be processed simply)<ul>{!==0:():'';}</ul>This is the article about react component instance attribute state. For more related react component instance attribute state content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!