小记 react 数据存储位置

时间:2022-09-21 12:23:00

react 中状态的六个存储位置

  1. state
    我想大家都知道这个地方,而且在使用 setState 时会触发组件的更新

  2. class prop
    将值存在 class 的对象中,如:
    class App extends React.PureComponent{ count = 0 }
    这个 class 中的 count 便是这种存储方式;
    优点: 改变值时不会触发组件的更新,当组件销毁后,再次引用组件会使用它的初始值;
    如果想触发 可以使用 forceUpdate (但要注意的是这个函数会跳过shouldComponentUpdate的步骤)

  3. 文件的 class 外部
    如:
    const foo = [1,2,3,4] class App extends React.PureComponent{ // ... }
    优点是 当组件销毁时,该值并不会被销毁,而是一直在内存中,刷新后才会回到初始值;
    这个地方的值需要一定的控制,按理说,应该所有的值都不会放在这里的,但是,总有特例会被使用到
    export 后 能被所有 import 的组件所引用

  4. redux 中
    这个地方大家都知道
    数据和 3 一样 同样存储于内存中,
    能被所有 connect 连接的组件所使用

  5. context 中
    context 可以放置 state 的数据,也可以放置 static 数据,想放什么都行,

    针对 state 的数据
    在对应组件放置 setState 函数,同样要引入到 context 中;
    需要注意组件的渲染, state 存储组件会渲染 但是引用 Consumer 的组件, 却不会发生render

    因为 context 也可以存储静态数据,所以也可以被称为一个存储位置

  6. 后续补充
    即 static 属性 和 3 的属性是一样的 ,如果不刷新,那还是原来的值

总结

在实际开发过程中,需要根据自己的经验酌情使用

END