zoukankan      html  css  js  c++  java
  • 小记 react 数据存储位置

    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

  • 相关阅读:
    排序
    自动生成存储过程的工具
    感悟javascript
    VS.net 2008 beta2 新功能
    北极光合伙人邓锋:要别人跳火坑,你自己先跳
    [转]驱动开发中应该注意的事项
    [转]CryptoAPI的应用(一)概述以及初始化模块
    [转]强制重启N种法
    Different ways of handling IRPs
    [转]分层驱动模型中IRP的传递与完成
  • 原文地址:https://www.cnblogs.com/Grewer/p/10103330.html
Copyright © 2011-2022 走看看