React+Typescript 状态管理

好 本文 我们来说说状态管理 也就是我们的 state

我们直接顺便写一个组件 参考代码如下

typescript 复制代码
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 父组件不传值过来 可以这样

typescript 复制代码
Component<any,IState>

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

可以这样

typescript 复制代码
Component<IProps,any> {

就是 不需要就用 any

然后 我们根据IState接口的规范 创建了state

里面按接口规定 定义了一个数字类型的count

readonly 设置为只读属性

启动项目 效果是这样

this.state.count被成功输出

然后 就还是修改state中数据

我们先将组件改成这样

typescript 复制代码
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

运行项目之后 一切正常 但当我们触发事件

这里就会直接报错了

我们直接将代码改成这样

typescript 复制代码
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中的字段 让代码更规范一些

相关推荐
爱吃羊的老虎3 分钟前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
GISer_Jing1 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii1 小时前
工作中可以用到的前端小知识(不定时更新)
javascript
bpmf_fff1 小时前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
悦涵仙子2 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
蒙特网站3 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
蒜蓉大猩猩3 小时前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
Clockwiseee4 小时前
JS原型、原型链以及原型链污染学习
javascript·学习·原型模式
遇到困难睡大觉哈哈4 小时前
JavaScript面向对象
开发语言·javascript·ecmascript
我是Superman丶4 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript