React+Typescript 状态管理

好本文我们来说说状态管理也就是我们的 state
我们直接顺便写一个组件参考代码如下

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 我们上文讲过就是限制props 父组件传过来的值的

重点是IState 其实接口泛型都是一样的创建一个接口定义好名字然后声明里面有哪些字段都是什么类型
然后上文中我们Component 传的是IProps 和 any 其实第二个要放state的限制规范
当然如果你说我们这个组件如果不需要props 父组件不传值过来可以这样

Component<any,IState>

如果说我们这个组件不需要声明state 不用这里面的变量
可以这样

Component<IProps,any> {

就是不需要就用 any
然后我们根据IState接口的规范创建了state
里面按接口规定定义了一个数字类型的count
readonly 设置为只读属性

启动项目效果是这样
在这里插入图片描述
this.state.count被成功输出

然后就还是修改state中数据
我们先将组件改成这样

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>
        )
    }
}

我们写了一个按钮点击触发clickHide
clickHide中我们用了以前的setState去修改state中的count
运行项目之后一切正常但当我们触发事件
这里就会直接报错了
在这里插入图片描述
我们直接将代码改成这样

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>
        )
    }
}

首先其实就是用bind 改变一下this的指向
在这里插入图片描述
我们再次点击这里修改它就可以了

最后来和大家说一下这个readonly只读属性声明state的好处
例如我们修改数据这样写
在这里插入图片描述
它可以阻止开发人员直接操作state中的字段让代码更规范一些

React+Typescript 状态管理

猜你喜欢