隨元件載入只執行一次的操作,放在willmount或者didmount中
記得在willunmount中銷毀定時器和一些訂閱事件
props發生變化,使用willreceiveprops來處理(比如將變動同步給state)
componentwillreceiveprops(nextprops))
}複製**
import react, from 'react'
import from 'react-native'
//這裡寫乙個定時器元件 在es5中需要匯入第三方的定時器類
class countdown extends component ;
render
() = this.state;
return} }
//元件已經載入成功
componentdidmount
() = this.state;
if (count === 0)
this.setstate();
}, 1000);
} 元件即將銷毀 釋放記憶體
componentwillunmount
()
} render
() }
const styles = stylesheet.create(,
})複製**
import react, from 'react'
import from 'react-native'
//編寫定時器元件
class countdown extends component
render
()=this.state;
return ()}
add = (time) =>)
} componentdidmount
() =this.state;
if (count == 0)
this.setstate()
},1000)
} componentwillunmount()}
//es6的函式寫法 addtime是方法名 ()引數名 =>{}執行的方法體
addtime = () =>
render
() 如何理解這句**:countdown是當前的元件類 q表示countdown元件類的例項 q是例項的名字a 可以理解oc的 person *p =[person new];
=> 表示作用於的意思 我們都知道要想介面能夠進行重新整理 只能對當前的屬性進行setstate操作 所以重新整理介面 只能對當前的屬性進行操作,屬性的變化
變化就會引起介面的變化 所以用this.a 對q的植進行接收
*/}this.a = q}/>)}}
const styles = stylesheet.create(,
welcome: ,
})複製**
import react, from 'react'
import from 'react-native'
//編寫定時器元件
class countdown extends component
render
()=this.state;
return ()}
timeup =() =>
componentdidmount
() =this.state;
if (count == 0)
this.setstate()
},1000)
} componentwillunmount()}
timeupparent = (params) =>
render
() )}}
const styles = stylesheet.create(,
welcome: ,
})複製**
!(/users/jiangpeng/desktop/2018-01-19 13_52_54.gif)
import react, from 'react'
import from 'react-native'
//編寫定時器元件
class countdown extends component
render
()=this.state;
return ()}
timeup =() =>
componentdidmount
() =this.state;
if (count == 0)
this.setstate()
},1000)
} componentwillunmount()}
timeupparent = (param1,param2) =>
state =
render
() />
this.timeupparent('父元件的引數' +i,child)表示呼叫函式
*/}return
this.timeupparent('父元件的引數' +i,child)}/>})}
)}}
const styles = stylesheet.create(,
welcome: ,
})複製**
ReactNative學習筆記(五)踩坑總結
原文見這裡 載入 如下 fetch then response response.json then json alert json catch error alert 錯誤 error debug模式下沒有任何問題,但是打成release包時卻報錯 改成這樣也一樣 fetch then respo...
react native學習資源
這是我覺得比較有用的學習資源 要多練習多理解 一 1.react native 官方api文件 2.react native中文文件 3.react native通訊機制詳解 4.react native布局篇 5.react native基礎指南 一 6.react native基礎指南 二 7....
React Native學習 起步
時間 2015 04 11 10 32 49 w3ctech 原文 主題react 本指南匯集react native各類學習資源,給大家提供便利。指南正在不斷的更新,大家有好的資源歡迎pull requests!同時還有awesome react native系列 研究原始碼也是乙個很好的學習方式...