React 中的變量存儲

  在React中，我們可以将資料儲存在 props、state、store 或者 this 中，但是為了更好的管理資料，我們應該正确的存儲資料。

本文大部分為翻譯自Where to Hold React Component Data: state, store, static, and this

1、props

  我們先從最簡單的沒有争議的 props 說起。

  在 React 中 props 被賦予的角色是不可變屬性。它是元件之間溝通的一個接口，原則上講，它隻能從父元件流向子元件。

使用

  隻需像寫HTML标簽屬性一樣，給子元件添加屬性，它将傳遞給子元件的 this.props。

需要注意的是：

• key 和 ref 不會傳遞給子元件的 this.props。
• 隻有屬性沒有值，React會自動解析為布爾值 true。
• 屬性值除了字元串外，其他值需要用花括号包裹。
• 子元件内部不能改變 this.props 的值。

  綜上，使用 props 來存儲父元件傳遞給子元件的值。

2、state

  React使用this.state來管理元件内部狀态。當我們使用this.setState去改變state屬性時，會觸發一次渲染。

  目前最佳的實踐是使用 this.state 來存儲使用者界面（UI）的狀态而不是資料。

  我們在使用 state 時，可以考慮一下你需要存儲的值是否會被其他元件使用。如果一個值隻會被單獨的元件（也許是這個元件的孩子）使用到，那麼使用 state 存儲會比較安全。

  綜上，可以将 UI 的狀态以及 一些臨時的資料（如：input輸入的值）儲存在 state中。

使用

• 初始化：React構造函數中 this.state = {}
• 更新： this.setState
• 擷取：this.state

需要注意的是，this.setState 會觸發渲染，如果直接使用 this.state = {} 來更改 state 值，無法觸發渲染。

3、this.

  存儲在 this 上的值應該是一些不會因改變而觸發二次渲染的值。

需要注意的是，除了 setState 和 props 以外的任何東西都不會觸發二次渲染。是以如果你将值存儲在 this 上，并希望該值改變時能觸發重新渲染那麼你将需要在值改變後調用 forceUpdate()。

  forceUpdate 直接調用 render()，跳過本元件的 shuoldComponentUpdate()方法，但是子元件的生命周期正常。但是盡量不要使用 forceUpdate。

  是以，當你發現你需要使用 forceUpdate 時，那麼你可能将資料存儲錯位置了。

  綜上，使用 this 來存儲一些不會觸發二次渲染的屬性。

4、store 如 context、Redux 存儲

  元件間跨級傳遞資料可以存儲在 store 中。

  最好使用 store 來存儲元件狀态，而非 UI 狀态。例如，使用 store 來存儲登入态，一旦登入态改變，所有的元件應該重新渲染來更新資訊。

  store 還可以用來觸發多個元件或路由之間的事件。例如，你可以通過在頂層容器中通過 store 中的某個值來觸發蒙層登入，在所有元件中，可以通過按鈕來觸發這個蒙層。

  綜上，使用store來存儲多個元件之間共享的資料。

5、當然在其他 props 或 state 改變的時候，render 中的 某些值可能會一直重複計算，針對這種情況，react 官方推薦了一種方案 memoization，可以根據參數值緩存上一次的計算結果。

參考：Where to Hold React Component Data: state, store, static, and this