React Native學習筆記

標籤：需要   全域   綁定   訪問   var   etop   概念   value   資料   

React 是使用ES6 ,支援JSX文法, 開發組件化web或native的工具. 現階段使用Babel工具轉換成ES5 代碼.

組件通過props屬性傳遞不變化的內容,UI通過state屬性變動來產生變化.

React 一個介面架構, 資料的管理在js中比較麻煩, 容易混亂 . 有個redux庫可以管理一個統一的資料存放區點. 一個應用只有一個Store對象,內部是一個全域可隨處存取的變數.

 

Redux 的三個概念 :

   container, reduce, actions .

 

1. 建立container, container是一個包含了商務邏輯代碼, 負責資料顯示過濾和事件綁定的概念. 實際使用connect自動建立.

    包括兩個方法 mapStateToProps 和mapDispatchToProps. 最後一句代碼connect(mapStateToProps,mapDispatchProps)(UIComponent),有兩個括弧,第一個裡就寫這兩個定義的方法,後面的括弧寫這些props要在哪個UI組件類中使用.

 

2. reduce是一個可傳遞兩個參數(state,action) ,返回變化後的state的函數. 核心概念是不直接修改state值,通過Object.assign({},state,{要覆蓋的新值屬性keyvalue}) 建立新對象返回.

3. actions 是一些functions 表示執行的動作,方法名可以定義為addNews,listNews,delNews這種動詞,實際直接返回一個{key:"ADD_NEWS","other":"dfdsfdsf"},除key以外可以定義傳遞給事件處理需要的參數.

 

4.怎麼觸發action? 

 通過全域方法dispatch(action,自訂參數)觸發.

 

5.組件中的事件最好寫成closure的形式,其他形式可能會無法找到方法之類的,原理就是此this不是需要的this導致.

closure 寫法: 

 var clickGetUserInfo = (id)=> {

   this.refs.uiEle.text = "23421323" 

 }

 

  render() {

    <View onClick={clickGetUserInfo} ref="uiEle">

 } 

 

React Native學習筆記