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