React 是使用ES6 ,支持JSX語法, 開發組件化web或native的工具. 現階段使用Babel工具轉換成ES5 代碼. 組件通過props屬性傳遞不變化的內容,UI通過state屬性變動來產生變化. React 一個界面框架, 數據的管理在js中比較麻煩, 容易混亂 . 有個redux庫 ...
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">
}
