React-Native入門
一呀舔、介紹
| 種類 | 實現(xiàn)技術 | 編程語言 | 公司 |
|---|---|---|---|
| Cordova | JavaScript | 使用HTML,CSS和JavaScript | Adobe |
| React-Native | JavaScript | React | |
| Flutter | 原生編碼/渲染 | Dart | |
| Weex | JavaScript | Vue | Alibaba |
二弥虐、React-Natve環(huán)境搭建
-
安裝Node.js
brew install node
-
安裝watchman
brew install watchman -
Yarn
npm為Node.js的一個包管理工具，類此于Linux的apt等媚赖，Node.js內置了npm無需單獨下載霜瘪。
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載惧磺。
npm install -g yarn -
Android Studio / Xode(Cocopods)
-
Visual Studio Code
三颖对、創(chuàng)建一個新項目
-
普通的
npx react-native init RNProject -
指定RN版本的
npx react-native init RNProject --version X.XX.X -
還可以使用
--template來使用一些社區(qū)提供的模板，例如帶有TypeScript配置的：npx react-native init AwesomeTSProject --template react-native-template-typescript
四磨隘、已有項目的集成
-
react-native在0.60 及以上版本的原生依賴是通過 CocoaPods 集成安裝的缤底。
詳情可以看之前的文章： 傳送門
五、Debug
1番捂、項目運行起來个唧，搖一搖，選擇Debug设预，系統(tǒng)默認瀏覽器坑鱼，會自動打開一個網(wǎng)頁，使用Chrome絮缅，因為Safari會出現(xiàn)亂碼
http://localhost:8081/debugger-ui/
2、在Chrome中右擊呼股，選擇檢查
使用command + o 搜索對應Debug的js文件耕魄，打斷點，并運行
六彭谁、Flexbox布局
| 屬性 | 解釋 | 值 | 默認值 |
|---|---|---|---|
| flexDirection | 主軸的排列方向 | column吸奴、row、column-reverse缠局、row-reverse | column |
| flexWrap | 子組件沿主軸排不下的時候则奥，如何換行 | wrap、nowrap | wrap |
| justifyContent | 子組件在主軸上的排列方式 | flex-start狭园、flex-end读处、center、space-between唱矛、space-around | flex-start |
| alignItem | 子組件在側軸方向排列位置 | auto罚舱、flex-start井辜、flex-end、center管闷、stretch | stretch |
| alignSelf | 組件自己本身 | auto粥脚、flex-start、flex-end包个、center刷允、stretch | |
| flex | 子組件占用父組件的比例 | 0 |
如果不了解CSS布局的，可能會比較懵碧囊，這里再具體解釋一下树灶，我們先來了解一下主軸和側軸的概念
-
如果flexDirection為row，那么主軸就是x軸0 -> ∞ 方向呕臂，此時側軸就是y軸 0 -> ∞ 方向
justifyContent：控制在x軸方向的位置破托，flex-start就是靠左，flex-end就是靠右歧蒋。
alignItem：控制y軸方向的位置土砂，flex-start就是靠上，flex-end就是靠下谜洽。
-
如果flexDirection為column萝映，那么主軸就是y軸0 -> ∞ 方向，此時側軸就是x軸 0 -> ∞ 方向
justifyContent：控制y軸方向的位置阐虚，flex-start就是靠上序臂，flex-end就是靠下。
alignItem：控制在x軸方向的位置实束，flex-start就是靠左奥秆，flex-end就是靠右。
七咸灿、常用的組件
-
View
-
Text
-
TextInput
-
Image
<Image source={require('./img/icon.png')} style={styles.imageStyle} /> -
ScrollView
-
WebView
-
FlaList
八构订、其他
1、接口
- props：對外的接口
- state：對內的接口
2避矢、聲明周期
-
React-Nativ組件的聲明周期大體分為3個階段悼瘾，掛載、更新审胸、卸載亥宿，其中掛載和更新階段都會調用render()方法繪制視圖
組件的每個聲明周期都提供了一些方法供我們調用，用來實現(xiàn)相應的需求和功能砂沛。
RN掛載聲明周期 -
掛載階段
指的是組件的實例被創(chuàng)建到將其插入到DOM的過程
函數(shù)名稱 解釋 defaultProps() 此階段主要用于初始化一些默認屬性烫扼，在ES6語法中，則統(tǒng)一使用static成員來定義碍庵。 constructor() 此方法是組件的構造方法材蛛，可以在此階段對組件的一些狀態(tài)進行初始化圆到。不同于defaultProps(),此方法定義的變量可以通過this.setState進行修改。 componentWillMount() 在掛載前被立即調用卑吭。它在render()方法之前被執(zhí)行芽淡，因此在此方法中設置 state 不會導致重新渲染。 render() 此方法主要用于渲染組件豆赏，返回JSX或其他組件構成DOM.同時挣菲，此方法 componentDidMount() 此方法在掛載結束之后立馬調用，也就是在render()方法后執(zhí)行掷邦。開發(fā)者可以在此方法中獲取元素或者子組件白胀，也可以在層次方法中執(zhí)行網(wǎng)絡請求操作 -
運行階段
當組件經(jīng)過初始化后，程序就運行起來了抚岗，運行階段無論是修改props還是state或杠，系統(tǒng)都會調用shouldComponentUpdate()方法來判斷視圖是都需要渲染，如果需要渲染就會執(zhí)行render()方法執(zhí)行視圖重繪宣蔚，修改props的會比修改state多一個步驟向抢，props會先調用componentWillReceiveProps()方法接收props后，再判斷是否需要執(zhí)行更新
運行階段的聲明周期
函數(shù)名稱 解釋 componentWillReceiveProps() 在掛載的組件接收到新的props時被調用胚委。它接收一個 Object類型的參數(shù) nextProps挟鸠，然后調用 this setState來更新組件的狀態(tài)。 shouldComponentUpdate() 當組件接收到新的 props或 state時此方法就會被調用亩冬。此方法默認返回true艘希，用來保證數(shù)據(jù)變化時組件能夠重新渲染。當然硅急，開發(fā)者也可以重載此方法來決定組件是否需要執(zhí)行重新渲染覆享。 componentWillUpdate() 如果shouldComponentUpdate()方法返回為true，則此方法會在組件重新渲染前被調用营袜。 componentDidUpdate() 在組件重新渲染完成后被調用淹真，可以在此函數(shù)中得到渲染完。 -
卸載階段
主要指組件從掛載階段到將其從DOM中刪除的過程连茧，是組件生命周期的終點。
除了正常移除組件外巍糯，組件的銷毀還可能是由其他情況引起的啸驯，如系統(tǒng)遇到錯誤崩潰、系統(tǒng)內存空間不足祟峦，以及用戶退出應用等罚斗。
函數(shù)名稱 解釋 componentWillUnmount() 在組件卸載和銷毀之前被立即調用≌悖可以在此方法中執(zhí)行 -
函數(shù)的調用次數(shù)
在組件的整個生命周期中针姿，每一個生命周期函數(shù)并不是只被調用一次袱吆，有的生命周期函數(shù)在整個生命周期階段可能被調用多次
函數(shù)名稱 調用次數(shù) 是否更新狀態(tài) defaultProps 1(全局僅1次) 否 constructor 1 否 componentWillMount 1 是 render ≥1 否 componentDidMount 1 是 componentWillReceiveProps ≥0 是 shouldComponentUpdate ≥0 否 componentWillUpdate ≥0 否 componentDidUpdate ≥0 否 componentWillUnmount 1 否 -
虛擬DOM
????眾所周知，Web界面本質上是由DOM樹構成的距淫，當其中某個部分發(fā)生變化時绞绒，其實就是對應的DOM節(jié)點發(fā)生了變化。
????在 jQuery出現(xiàn)以前榕暇，前端開發(fā)人員如果要修改界面蓬衡，需要直接操作DOM節(jié)點。在這一時期彤枢，程序的代碼結構混亂狰晚，復雜度高、可維護性和兼容性都較差缴啡。不過壁晒，隨著 jQuery以及高度封裝AP的出現(xiàn)，開發(fā)人員慢慢地從煩瑣的DOM操作中解脫出來业栅。MVM使用的數(shù)據(jù)雙向綁定和自動更新技術使得前端開發(fā)效率大幅提升秒咐，但是大量的事件綁定導致的執(zhí)行性能低下的問題依然存在。
????那么有沒有一種兼顧開發(fā)效率和執(zhí)行效率的方案呢式镐？答案是有的反镇。 ReactJS就是這么一種同時兼顧開發(fā)效率和執(zhí)行效率的技術框架雖然其JSX語法受到很多開發(fā)者的質疑，但是它的虛擬DOM技術卻得到了開發(fā)者的一致認可娘汞。此外歹茶，Vue框架也在2.0版本引入了這一機制。
????React中的組件并不是真實的DOM節(jié)點你弦，而是存在于內存之中的一種數(shù)據(jù)結構惊豺，叫作虛擬DOM。只有當它被插入文檔以后禽作，才會變成真實的DOM虛擬DOM
根據(jù) React的設計尸昧，所有的DOM變動都需要先反映在虛擬DOM上，再將實際發(fā)生變動的部分反映在真實DOM上旷偿，而這一過程的核心就是 DOM diff算法它可以減少不必要的DOM渲染烹俗，極大地提高組件的渲染性能。
