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