一. Touchable系列組件

1. RN的組件基本上默認都是不支持點擊事件彤断，也不能響應基本觸摸事件

2. 不透明觸摸TouchableOpacity

   1. 該組件封裝了響應觸摸事件凝果，當點擊按下的時候，該組件的透明度會降低

   2. 常用屬性

      activeOpacity number

      設置組件在進行觸摸的時候哲嘲，顯示的不透明度(取值0-1之間)
      

      onHideUnderlay function方法

      當?shù)讓颖浑[藏的時候調(diào)用
      

      onShowUnderlay function方法

      當?shù)讓语@示的時候調(diào)用
      

      style

      可以設置控件的風格演示，該風格演示可以參考View組件的style
      

      underlayColor

      當觸摸或者點擊控件的時候顯示出的顏色

3. 常見的觸摸事件

   注意：調(diào)用得用箭頭函數(shù)

   1. onPress 點擊

   2. onPressIn 按下

   3. onPressOut 抬起

   4. onLongPress 長按不放

二. 組件的聲明周期

1. ReactNative組件的聲明周期大致上可以劃分為實例化階段竞膳、存在階段挽铁、銷毀階段卸耘，

2. 最常用的為實例化階段，該階段就是組件的構建伍俘、展示時期邪锌，需要我們根據(jù)幾個函數(shù)的調(diào)用過程，控制好組件的展示和邏輯的處理

3. 實例化階段函數(shù)功能分析

 1) getDefaultProps

    a. 改函數(shù)用于初始化一些默認的屬性癌瘾，通常會將固定的內(nèi)容放在這個函數(shù)中進行賦值

    b. 在組件中觅丰，可以利用this.props獲取這里屬性，由于組件初始化后妨退，再次使用該組件不會調(diào)用getDefaultProps函數(shù)妇萄，所以組件自己不可以自己修改props蜕企，只可有其他組件調(diào)用它時在外部修改

    c. 使用組件時，可以自定義屬性冠句，在該組件內(nèi)部使用this.props.xxx獲取到

 2) getInitialState

    a. 該函數(shù)是用于對組件的一些狀態(tài)進行初始化轻掩，由于該函數(shù)不同于getDefaultProps,在以后的過程中，會再次調(diào)用懦底，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化唇牧，如控件上顯示的文字，可以通過this.state來獲取值基茵，通過this.setState來修改state值奋构，比如

      this.setState({
        activePage: activePage, 
        currentX: contentOffSetX  
      });

    b. 一旦調(diào)用了this.setState方法，組件一定會調(diào)用render方法拱层，對組件再次進行渲染弥臼，不過，react框架會自動根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染

 3) componentWillMount

    在組件將要被加載在視圖之前調(diào)用根灯，功能相對較少

4. render

   a. render是一個組件中必須有的方法径缅，本質(zhì)上是一個函數(shù)，并返回JSX或其他組件來構成DOM,和Android的XML布局類似烙肺，只能返回一個頂級元素

   b. 在render函數(shù)中纳猪，只可通過this.state和this.props來訪問在之前函數(shù)中初始化的數(shù)據(jù)值

5. componentDidMount

   a. 在調(diào)用了render方法后，組件加載成功并被成功渲染出來以后桃笙，所要執(zhí)行的后續(xù)操作氏堤，一般會在這個函數(shù)中處理網(wǎng)絡請求等加載數(shù)據(jù)的操作

   b. 因為UI已經(jīng)成功被渲染出來，所以放在這個函數(shù)里進行請求操作搏明，不會出現(xiàn)UI上的操作

6. 存在期階段函數(shù)功能分析

 1) componentWillReceiveProps

     指父元素對控件的props或state進行了修改

 2) shouldComponentUpdate

     一般用于優(yōu)化鼠锈，可以返回false或true來控制是否進行渲染

 3) componentWillUpdate

      組件刷新前調(diào)用，類似componentWillMount

 4) componentDidUpdate

      更新后的hook 

5. 銷毀期階段函數(shù)功能分析

   1. 用于清理一些無用的內(nèi)容星著，如：點擊事件Listener,只有一個過程componentWillUnmount

6. 注意

7. this.props表示那些一旦定義购笆，就不再改變的特性

8. this.state是會隨著用戶互動而產(chǎn)生變化的特性

三. 獲取真實的DOM節(jié)點

1. 有時需要獲取真實的DOM的節(jié)點，這就要用到ref屬性

   <TextInput ref="myTextInput">

   this.refs.myTextInput

四. ScrollView組件

1. ScrollView是一個通用的可滾動的容器虚循，你可以在其中放入多個組件和視圖同欠，而且這些組件并不需要是同類型的。ScrollView不僅可以垂直滾動横缔，還能水平滾動（通過horizontal屬性來設置）铺遂。

2. 可以幫我們做輪播圖和引導頁等一些可以滾動的效果

3. ScrollView中常用的屬性

   1. contentContainerStyle

      這些樣式會應用到一個內(nèi)層容器上，所有的子視圖都會包裹在內(nèi)容容器里

   2. horizontal

      當次屬性為true的時候剪廉，所有的子視圖會在水平方向上排成一行

   3. keyboardDismissMode

      用戶拖拽滾動視圖時娃循，是否要隱藏軟鍵盤

      none：拖拽時不隱藏軟鍵盤

      on-drag: 當拖拽開始的時候隱藏軟鍵盤

      interactive：軟鍵盤伴隨拖拽操作同步地消失，并且如果往上滑動會恢復鍵盤斗蒋，安卓設備上不支持這個選項捌斧，會表現(xiàn)的和none一樣

   4. keyboardShouldPersistTaps

      false: 在軟鍵盤激活之后笛质，點擊焦點文本輸入框意外的地方，鍵盤就會隱藏

      true: 滾動視圖不會響應點擊操作捞蚂，并且鍵盤不會自動消失妇押，默認值為false

   5. onScroll

      在滾動過程中，每幀最多調(diào)用一次此回調(diào)函數(shù)姓迅，調(diào)用的頻率可以用scrollEventThrottle屬性來控制

   6. refreshControl：element

      指定RefreshControl組件敲霍，用于為ScrollView提供下拉刷新功能

   7. removeClippedSubviews:

      true: 當此屬性為true時，屏幕之外的子視圖(子視圖overflow樣式需要設為hidden)會被移除丁存，這個可以提升大列表的滾動性能肩杈，默認值為true

   8. showsHorizontalScrollIndicator bool

      true: 顯示一個水平方向的滾動條。

   9. showsVerticalScrollIndicator bool

      true: 顯示一個垂直方向的滾動條解寝。

   10. OnMomentumScrollEnd

   當一幀滾動完畢的時候調(diào)用
   

   11. onScrollBeginDrag

   當開始手動拖拽的時候調(diào)用
   

   12. onScrollEndDrag

   當結束手動拖拽的時候調(diào)用
   

五. 補充

1. DOM Diff算法

   1. web界面由DOM樹來構成扩然，當其中某一部分發(fā)生變化時，其實就是對應某個DOM節(jié)點發(fā)生了變化

   2. 在React中聋伦，構建UI界面的思路是由當前狀態(tài)決定界面夫偶，前后兩個狀態(tài)就是對應兩套界面，然后由React來比較兩個界面的區(qū)別觉增，這就需要對DOM樹進行DIff算法分析找到變化的部分兵拢，然后只更新變化的內(nèi)容