React-native触摸组件

一. Touchable系列组件

1. RN的组件基本上默认都是不支持点击事件，也不能响应基本触摸事件

2. 不透明触摸TouchableOpacity

   1. 该组件封装了响应触摸事件，当点击按下的时候，该组件的透明度会降低

   2. 常用属性

      activeOpacity number

      设置组件在进行触摸的时候，显示的不透明度(取值0-1之间)
      

      onHideUnderlay function方法

      当底层被隐藏的时候调用
      

      onShowUnderlay function方法

      当底层显示的时候调用
      

      style

      可以设置控件的风格演示，该风格演示可以参考View组件的style
      

      underlayColor

      当触摸或者点击控件的时候显示出的颜色

3. 常见的触摸事件

   注意：调用得用箭头函数

   1. onPress 点击

   2. onPressIn 按下

   3. onPressOut 抬起

   4. onLongPress 长按不放

二. 组件的声明周期

1. ReactNative组件的声明周期大致上可以划分为实例化阶段、存在阶段、销毁阶段，

2. 最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理

3. 实例化阶段函数功能分析

 1) getDefaultProps

    a. 改函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数中进行赋值

    b. 在组件中，可以利用this.props获取这里属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props，只可有其他组件调用它时在外部修改

    c. 使用组件时，可以自定义属性，在该组件内部使用this.props.xxx获取到

 2) getInitialState

    a. 该函数是用于对组件的一些状态进行初始化，由于该函数不同于getDefaultProps,在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值，比如

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

    b. 一旦调用了this.setState方法，组件一定会调用render方法，对组件再次进行渲染，不过，react框架会自动根据DOM的状态来判断是否需要真正的渲染

 3) componentWillMount

    在组件将要被加载在视图之前调用，功能相对较少

4. render

   a. render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM,和Android的XML布局类似，只能返回一个顶级元素

   b. 在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值

5. componentDidMount

   a. 在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作

   b. 因为UI已经成功被渲染出来，所以放在这个函数里进行请求操作，不会出现UI上的操作

6. 存在期阶段函数功能分析

 1) componentWillReceiveProps

     指父元素对控件的props或state进行了修改

 2) shouldComponentUpdate

     一般用于优化，可以返回false或true来控制是否进行渲染

 3) componentWillUpdate

      组件刷新前调用，类似componentWillMount

 4) componentDidUpdate

      更新后的hook 

5. 销毁期阶段函数功能分析

   1. 用于清理一些无用的内容，如：点击事件Listener,只有一个过程componentWillUnmount

6. 注意

7. this.props表示那些一旦定义，就不再改变的特性

8. this.state是会随着用户互动而产生变化的特性

三. 获取真实的DOM节点

1. 有时需要获取真实的DOM的节点，这就要用到ref属性

   this.refs.myTextInput

四. ScrollView组件

1. ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。

2. 可以帮我们做轮播图和引导页等一些可以滚动的效果

3. ScrollView中常用的属性

   1. contentContainerStyle

      这些样式会应用到一个内层容器上，所有的子视图都会包裹在内容容器里

   2. horizontal

      当次属性为true的时候，所有的子视图会在水平方向上排成一行

   3. keyboardDismissMode

      用户拖拽滚动视图时，是否要隐藏软键盘

      none：拖拽时不隐藏软键盘

      on-drag: 当拖拽开始的时候隐藏软键盘

      interactive：软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘，安卓设备上不支持这个选项，会表现的和none一样

   4. keyboardShouldPersistTaps

      false: 在软键盘激活之后，点击焦点文本输入框意外的地方，键盘就会隐藏

      true: 滚动视图不会响应点击操作，并且键盘不会自动消失，默认值为false

   5. onScroll

      在滚动过程中，每帧最多调用一次此回调函数，调用的频率可以用scrollEventThrottle属性来控制

   6. refreshControl：element

      指定RefreshControl组件，用于为ScrollView提供下拉刷新功能

   7. removeClippedSubviews:

      true: 当此属性为true时，屏幕之外的子视图(子视图overflow样式需要设为hidden)会被移除，这个可以提升大列表的滚动性能，默认值为true

   8. showsHorizontalScrollIndicator bool

      true: 显示一个水平方向的滚动条。

   9. showsVerticalScrollIndicator bool

      true: 显示一个垂直方向的滚动条。

   10. OnMomentumScrollEnd

   当一帧滚动完毕的时候调用
   

   11. onScrollBeginDrag

   当开始手动拖拽的时候调用
   

   12. onScrollEndDrag

   当结束手动拖拽的时候调用
   

五. 补充

1. DOM Diff算法

   1. web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应某个DOM节点发生了变化

   2. 在React中，构建UI界面的思路是由当前状态决定界面，前后两个状态就是对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行DIff算法分析找到变化的部分，然后只更新变化的内容