小记 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