react 中状态的六个存储位置
state
我想大家都知道这个地方,而且在使用 setState 时会触发组件的更新class prop
将值存在 class 的对象中,如:class App extends React.PureComponent{ count = 0 }
这个 class 中的 count 便是这种存储方式;
优点: 改变值时不会触发组件的更新,当组件销毁后,再次引用组件会使用它的初始值;
如果想触发 可以使用 forceUpdate (但要注意的是这个函数会跳过shouldComponentUpdate的步骤)文件的 class 外部
如:const foo = [1,2,3,4] class App extends React.PureComponent{ // ... }
优点是 当组件销毁时,该值并不会被销毁,而是一直在内存中,刷新后才会回到初始值;
这个地方的值需要一定的控制,按理说,应该所有的值都不会放在这里的,但是,总有特例会被使用到
export 后 能被所有 import 的组件所引用redux 中
这个地方大家都知道
数据和 3 一样 同样存储于内存中,
能被所有 connect 连接的组件所使用-
context 中
context 可以放置 state 的数据,也可以放置 static 数据,想放什么都行,针对 state 的数据
在对应组件放置 setState 函数,同样要引入到 context 中;
需要注意组件的渲染, state 存储组件会渲染 但是引用 Consumer 的组件, 却不会发生render因为 context 也可以存储静态数据,所以也可以被称为一个存储位置
后续补充
即 static 属性 和 3 的属性是一样的 ,如果不刷新,那还是原来的值
总结
在实际开发过程中,需要根据自己的经验酌情使用