react中状态管理

wwwwwllllk

下面是我自己的理解，希望大佬可以指点，帮助查漏补缺。

之前一直有一个疑惑，我为什么要用状态管理。我直接写一个类，里面封装我要的对象和方法。然后在我需要的时候引入不就好了。这不就是我要的东西显示出来了吗。但是刚才测试了一遍，发现了一个问题。我是可以改变类里面的参数的值。但是我页面的数据是没有重新渲染出最新的值。用过react的应该知道，react是通过setState来实时渲染的。只有我们在setState的时候我们的页面才会重新渲染，也就是说我更新完成类里面的值以后还得setState一下，这显示是不合理的。

同时还会出现下面这种情况
最上层的文件下面是A,B两个路由分别指向不同的页面，我在A页面里面使用了setState,B页面肯定是不会重新渲染的。但是我们可能会出现A,B页面共用一个属性，而且这个属于是从后端接口拿到的还可能变化，这种情况我们就需要用到状态管理，redux或者mbox状态管理工具。人家帮我们做好了这些功能了，而且是实时变化的。

加入我们不用状态管理工具，我们自己写一个类，我们无法做到变量发生变化所有的组件立马全部更新。只有所有的组件重新渲染才会使其全部更新。要让我们自己做肯定是不可能的。

这个时候我们就会发现我们使用父子组件传值的时候就是通过子组件调用父组件的方法触发setState导致页面重新渲染从而父子组件重新渲染。

class Person {
    name = ""
    weight = ""
    height = ""

    setName(name){
        this.name = name
    }

    setWeight(weight){
        this.weight = weight
    }

    setHeight(height){
        this.height = height
    }

}

export default new Person()

wwwwwllllk

本来想上传图片的，不知道为什么总提示失败

李恒道

不会react...帮不到哥哥

wwwwwllllk

忽然想到还有一个问题，假如写个类引入的话，每个需要它的地方都需要import,使用状态管理工具或者react的钩子函数useContext我们只需要最顶层引入就好了。

wwwwwllllk

注意区分状态管理和全局变量管理的区别

王一之

wwwwwllllk 发表于 2022-8-9 20:37
本来想上传图片的，不知道为什么总提示失败

可能图片太大了，只允许1M的图片

王一之

没有用过redux之类的工具，不知道怎么说。一般也是用函数式的写法，class也没了解过，官方好像也是推荐函数式+hook的写法

“更新完成类里面的值以后还得setState一下，这显示是不合理的”回复一下这个吧

其实可以直接setState的值，不用管state，为什么这样做呢？我想是因为直接修改state，修改state的这个动作无法监听不到的，监听不到就无法重新渲染，所以需要使用setState去做。vue中的state（data）是挂载在data下的，就可以直接proxy data来实现监听值的变化。

“加入我们不用状态管理工具，我们自己写一个类，我们无法做到变量发生变化所有的组件立马全部更新。只有所有的组件重新渲染才会使其全部更新。要让我们自己做肯定是不可能的。”


这个的话我一般是用useContext去做