Okay, let’s talk about state management in this article, which is our state.
Let’s directly write a component reference code as follows
import * as React from "react";
interface IProps {
title: string,
age: number
}
interface IState {
count:number
}
export default class hello extends React.Component<IProps,IState> {
public constructor(props:any){
super(props);
}
public readonly state: Readonly<IState> = {
count: 520
}
public render() {
return (
<div>
<div>{
this.state.count }</div>
</div>
)
}
}
IProps, as we said above, is to limit the value passed by the props parent component
The point is that IState is actually the same as interface generics. Create an interface, define a name, and then declare what types of fields are in it. In the above,
our Component passed IProps and any. In fact, the second limit specification for state is
of course if You said that if our component does not need props and the parent component does not pass values, it can be like this
Component<any,IState>
If we say that our component does not need to declare the state and the variables in it,
it can be like this
Component<IProps,any> {
Just use any if you don’t need it,
and then we created a state according to the specification of the IState interface,
which defines a count
readonly of a digital type according to the interface regulations and sets it as a read-only attribute
The effect of starting the project is that
this.state.count is successfully output
Then we still modify the data in the state,
we first change the component to this
import * as React from "react";
interface IProps {
title: string,
age: number
}
interface IState {
count:number
}
export default class hello extends React.Component<IProps,IState> {
public constructor(props:any){
super(props);
}
public readonly state: Readonly<IState> = {
count: 520
}
clickHide(){
this.setState({
count: 200
})
}
public render() {
return (
<div>
<div>{
this.state.count }</div>
<button onClick = {
this.clickHide }>修改</button>
</div>
)
}
}
We wrote a button click to trigger clickHide.
In clickHide, we used the previous setState to modify the count in the state.
After running the project, everything is normal, but when we trigger the event, an
error will be reported directly.
We directly change the code to this
import * as React from "react";
interface IProps {
title: string,
age: number
}
interface IState {
count:number
}
export default class hello extends React.Component<IProps,IState> {
public readonly state: Readonly<IState> = {
count: 520
}
public constructor(props:IProps){
super(props);
this.clickHide = this.clickHide.bind(this);
}
public clickHide(){
this.setState({
count: 200
})
}
public render() {
return (
<div>
<div>{
this.state.count }</div>
<button onClick = {
this.clickHide }>修改</button>
</div>
)
}
}
First of all, use bind to change the direction of this.
We can click here again to modify it.
Finally, let me tell you about the benefits of declaring the state with the readonly read-only attribute.
For example, if we modify the data and write
it like this, it can prevent developers from directly manipulating the fields in the state to make the code more standardized.