【ReactNative】學(xué)習(xí)筆記(四)

接口及傳參

因自己一直只會做最簡單的項目曾雕,所以并不清楚從接口讀取數(shù)據(jù)是什么意思见芹,但這個項目必須是要從服務(wù)端讀取數(shù)據(jù)的,所以鸯乃,就跟著同事的demo嘗試了一下鲸阻。this.props...具體的,我還不太會缨睡,還需要繼續(xù)學(xué)習(xí)鸟悴。


JS時間倒計時

這是js里的經(jīng)典部分,而不是RN的專屬奖年,由此也可以看到细诸,JS是基礎(chǔ)呢。如何呈現(xiàn)出陋守,已經(jīng)開播的時間呢震贵?或者說,呈現(xiàn)出過程中的時間水评,又或者說猩系,呈現(xiàn)出還有多少的時間才開始呢?在JS中與在RN中的不同是什么呢中燥?

TimeDifference方法
分割時間字符串


RN時間倒計時

在JS中寇甸,倒計時的動態(tài)效果,我們是用 setTimeout("show_time()", 1000) 即可褪那,并在else里使用clearTimeout(timerID) 清除定時器 幽纷。但在RN中,我們也需要動態(tài)刷新數(shù)據(jù)博敬。想到RN中文網(wǎng)講state那一部分時友浸,所介紹的 setInterval 方法。在倒計時的呈現(xiàn)中偏窝,時間差是需要動態(tài)的收恢,再具體一點(diǎn)兒,是當(dāng)前時間是動態(tài)的祭往,然后讓當(dāng)前時間與固定時間相減就可以得到倒計時了伦意。這就是說,當(dāng)前時間是需要如此定義的 this.state ={ liveTime : new Date() }硼补。

接下來的問題是驮肉,哪里刷新呢?在 constructor中定義刷新函數(shù)是OK的已骇。如何在頁面渲染完成后呈現(xiàn)的是新的時間呢离钝。于是票编,我第一次使用了 componentDidMount 方法。

組件已加載卵渴,渲染完成

RN組件的生命周期的相關(guān)文章比較多慧域,簡單而言就是說,一個組件從它被加載浪读,到最終卸載時會經(jīng)歷一個完整的生命周期:constructor--組件創(chuàng)建時調(diào)用一次昔榴。 componentWillMount--如果需要從本地存儲中讀取數(shù)據(jù)用于顯示,常用該方法碘橘,因為在這個方法中互订,如果通過setState函數(shù)修改狀態(tài)機(jī)變量,RN框架不會額外執(zhí)行渲染蛹屿。 rener--組件渲染屁奏,必須有。componentDidMount--初始化渲染完成后就會馬上被調(diào)用错负。?

于是坟瓢,如下的代碼就可以在界面上顯示當(dāng)前時間啦:

當(dāng)前時間代碼
界面展示

再回歸到倒計時吧,因當(dāng)前時間是用 new Date() 創(chuàng)建犹撒,與另一個日期格式不同折联,因此需要首先規(guī)范下日期格式咯:

格式化日期的方法

假設(shè)從后臺傳遞過來的數(shù)據(jù)是這樣的:“2009-12-02 12:25”,因需要將數(shù)據(jù)改為" 2009/12/02 12:25"识颊,然后再傳遞給 new Date 就可以使時間變?yōu)闀r間戳啦诚镰。var date=new Date();? 以前只是了解 new Date ,后來才知道是可以在其中傳參祥款,來給它一個固定的日期格式的清笨。

View中的日期格式化
后臺數(shù)據(jù)與當(dāng)前時間目前的格式相同了
作差得到毫秒數(shù)
利用毫秒數(shù)計算常規(guī)差值


if else 還是 switch 呢?

曾經(jīng)都在書本上的知識刃跛,真正用起來時抠艾,才明白優(yōu)化是什么意思?如何使代碼更為簡潔桨昙,效率也更高呢检号?是只考慮 如何實(shí)現(xiàn),還是如何更好的實(shí)現(xiàn)呢蛙酪?作為一名程序員齐苛,給自己的定位又是什么呢?摘錄一篇前輩的文章吧:

switch...case與if...else的根本區(qū)別在于桂塞,switch...case會生成一個跳轉(zhuǎn)表(Binary Tree算法)來指示實(shí)際的case分支的地址凹蜂,而這個跳轉(zhuǎn)表的索引號與switch變量的值是相等的。switch...case不用像if...else那樣遍歷條件分支直到命中條件,而只需訪問對應(yīng)索引號的表項從而到達(dá)定位分支的目的玛痊。switch適用于分支較多的情況呢泥彤。

但說實(shí)話,我對效率并沒有很多的概念卿啡。我還處于從 0 到 1 的階段,期待自己可以從 1 到 2 的階段吧菱父。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末颈娜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子浙宜,更是在濱河造成了極大的恐慌官辽,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粟瞬,死亡現(xiàn)場離奇詭異同仆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)裙品,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進(jìn)店門俗批,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人市怎,你說我怎么就攤上這事岁忘。” “怎么了区匠?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵干像,是天一觀的道長。 經(jīng)常有香客問我驰弄,道長麻汰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任戚篙,我火速辦了婚禮五鲫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘已球。我一直安慰自己臣镣,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布智亮。 她就那樣靜靜地躺著忆某,像睡著了一般。 火紅的嫁衣襯著肌膚如雪阔蛉。 梳的紋絲不亂的頭發(fā)上弃舒,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼聋呢。 笑死苗踪,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的削锰。 我是一名探鬼主播通铲,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼器贩!你這毒婦竟也來了颅夺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蛹稍,失蹤者是張志新(化名)和其女友劉穎吧黄,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唆姐,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拗慨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奉芦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赵抢。...
    茶點(diǎn)故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖仗阅,靈堂內(nèi)的尸體忽然破棺而出昌讲,到底是詐尸還是另有隱情,我是刑警寧澤减噪,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布短绸,位于F島的核電站,受9級特大地震影響筹裕,放射性物質(zhì)發(fā)生泄漏醋闭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一朝卒、第九天 我趴在偏房一處隱蔽的房頂上張望证逻。 院中可真熱鬧,春花似錦抗斤、人聲如沸囚企。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽龙宏。三九已至,卻和暖如春伤疙,著一層夾襖步出監(jiān)牢的瞬間银酗,已是汗流浹背辆影。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留黍特,地道東北人蛙讥。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓滋捶,卻偏偏與公主長得像掉丽,于是被迫代替她去往敵國和親兢哭。 傳聞我的和親對象是個殘疾皇子外莲,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,280評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)染突,斷路器兼雄,智...
    卡卡羅2017閱讀 134,696評論 18 139
  • 碎片布局left_fragment.xml 重寫Fragment類 修改activity_main.xml 回調(diào)方法
    moosoo閱讀 155評論 0 1
  • Repeated DNA Sequences All DNA is composed of a series of...
    gammaliu閱讀 492評論 0 0
  • 我有酒梧税,你有故事嗎?我想傾聽你的故事部默。 只要是生活在這個世界上的人,都會擁有屬于他們自己的故事造虎。一生的故事有時候是...
    爛哭貓閱讀 1,061評論 3 1