国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

十分鐘理解Redux核心思想，過目不忘。

xuexiangjys / 2019人閱讀

摘要：數據流簡單介紹，比較簡潔，請牢記于心。有時候可以使用生成器來批量生產相似對象，如我需要根據不同的來生成高度相似的附加的信息說明雖然上面數據流提到，通過處理生成后才能夠更改信息。

白話Redux工作原理。淺顯易懂。 
如有紕漏或疑問，歡迎交流。
Redux 約法三章 唯一數據源(state)

雖然redux中的state與react沒有聯系，但可以簡單理解為react組件中的this.state。
html文檔只是state的一種表現形式。所有html的數據應該都是直接或間接來自于state，否則UI視圖是無法因state改變而更新的。

數據源(state)只讀

不應該直接修改state數據。
對于數組使用：

Array.prototype.slice()//對數組進行拷貝
//使用ES6： 
[...state, ...newState]

對于對象使用：

Object.assign({}, state, change1, change2...)//對對象進行拷貝
//使用ES6:
{...state, ...newState}
通過純函數(pure function)改變數據源(state)

pure function: 無其他API（包括Math, Date等）調用，無異步操作，preState => newState。

Redux數據流

簡單介紹store/reducer/action， 比較簡潔，請牢記于心。

store
UI唯一數據來源，可以理解為react中的state，store信息的變化會觸發視圖更新.

action
對象。必須擁有type屬性,用來描述發生什么。可選擇攜帶發生時的數據，如用戶輸入的input value。切記：僅僅用來表述發生了什么。

reducer
pure function（上面有解釋）。根據action.type來做出反應，(preState, action) => newState，生成的state是用來改變store的。

所以，data flow（數據流）:

UI發出動作，如click, submit;

action, 描述發生了什么;

reducer處理發生的事情，生成新state;

store被更新；

UI響應store更新

...

Redux action

舉幾個例子，可能會比較直觀：

{
  type: “TOGGLE_TODO”, //這個type屬性必須要，必須是字符串
  index: 5 //附加信息，自己根據需要選擇是否加入
}；
{
  type: “ADD_TODO”,
  text：“學習Redux” //附加信息，這里是input value
}

沒別的，就是這么簡單。
有時候可以使用action生成器(action creators)來批量生產相似action對象，如：

//我需要根據不同的input value來生成高度相似的action:
function (text) {
  return {
    type: "ADD_TODO",
    text: text //附加的信息
  }
}

說明
雖然上面數據流提到，action通過reducer處理生成newState后才能夠更改store信息。但是為了更好的語義編程，Redux通過語句store.dispatch(action)來更新store，reducer對action的處理在內部處理。

Redux reducer

很簡單

(theState, action) => (newState);
//僅僅只是根據action.type處理一下需要更新的state

來看一個相對完整的reducer:

function todoApp(state = initialState, action) { //注意需要處理undefined情況下的state默認值
  switch (action.type) {  //根據action.type來判斷
    case "SET_VISIBILITY_FILTER":
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case “ADD_TODO”:  //處理“ADD_TODO”的action type
      //返回新state(newState),注意不要直接改變state，對象使用了
      //Object.assign()。也可以使用ES的...操作符
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    case “TOGGLE_TODO”:  //處理“TOGGLE_TODO”的action type
      return Object.assign({}, state, {
        todos: state.todos.map((todo, index) => {
          if (index === action.index) {
            return Object.assign({}, todo, {
              completed: !todo.completed
            })
          }
          return todo
        })
      })
    default:
      return state
  }
}
Redux store

store
UI視圖唯一數據來源（直接或間接），可以獲取state，更新state，監聽state變化，取消監聽。所以store提供了一下方法：

store.getState() 獲取當前state

store.dispatch(action) 更新state

store.subscribe(listener) store更新后回調listener，回調函數里面可以調用store.getStore()來獲取更新后得state喲~

取消listener的方式比較特別：再調用一次store.subscribe(sameListner)

ps: 如有紕漏或疑問，歡迎交流。
先寫這么多，有時間繼續更新。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52588.html

相關文章

  • 十分鐘理解Redux核心思想，過目不忘。

    摘要：數據流簡單介紹，比較簡潔，請牢記于心。有時候可以使用生成器來批量生產相似對象，如我需要根據不同的來生成高度相似的附加的信息說明雖然上面數據流提到，通過處理生成后才能夠更改信息。 白話Redux工作原理。淺顯易懂。 如有紕漏或疑問，歡迎交流。 Redux 約法三章 唯一數據源(state) 雖然redux中的state與react沒有聯系，但可以簡單理解為react組件中的this.st...

    leoperfect 評論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

    pingan8787 評論0 收藏0

  • React 328道最全面試題(持續更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

  • 深入redux技術棧

    摘要：另外，內置的函數在經過一系列校驗后，觸發，之后被更改，之后依次調用監聽，完成整個狀態樹的更新?？偠灾袷剡@套規范并不是強制性的，但是項目一旦稍微復雜一些，這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進階漫談的第二篇，這一篇主要分析redux的思想和應用，同樣參考了網絡上的大量資料，但代碼同樣都是自己嘗試實踐所得，在這里分享出來，僅供一起學習(上一篇地址:個人博客／s...

    imingyu 評論0 收藏0

發表評論

0條評論

xuexiangjys

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<