今天,我來說下RN里的Props和State屬性,以及render()方法。
首先,我說下render()方法的作用,render()的作用是渲染組件。即,把文件里寫的組件、樣式等通過該方法更新到界面上來。
Props,大多數組件在創建時就可以使用各種參數來進行定制。用于定制的這些參數就稱為props(屬性)。比如Image的source屬性,TextInput的placeholder屬性等等。
TextInput的屬性
另外,自定義的組件也可以使用props。通過在不同的場景使用不同的屬性定制,可以盡量提高自定義組件的復用范疇。只需在render函數中引用this.props。
自定義Blink的name屬性
我們使用兩種數據來控制一個組件:props和state。props是在父組件中指定,而且一經指定,在被指定的組件的生命周期中則不再改變。 對于需要改變的數據,我們需要使用state。
一般來說,你需要在constructor中初始化state(譯注:這是ES6的寫法,早期的很多ES5的例子使用的是getInitialState方法來初始化state,這一做法會逐漸被淘汰),然后在需要修改時調用setState方法。上面截圖的例子也是一個定時展示和隱藏文字的例子。
在寫此部分例子的時候,還有一點值得注意的地方,就是此段代碼:state.text.split(' ').map((word)=>word&&'??'),一般在我們的邏輯中“&&”代表邏輯與,只有當前后都為真的情況下,返回真,而這里它是一個執行語句,先執行&&前面的語句,如果為真,執行&&后面的語句,返回結果也是&&后面的執行結果。
Props和State就先說到這,下一篇我來說說Flexbox布局。