React Native07 - 组件的声明周期、组件的属性和状态、获取真实的DOM节点

前言

本篇的重点如下

• 组件的生命周期
• 组件的属性和状态
• 获取真实的DOM节点

一、组件的生命周期

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,                     
         });
   
   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上的操作
   

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

   1) componentWillReceiveProps

   已加载组件收到新的参数时调用
   

   2) shouldComponentUpdate

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

   3) componentWillUpdate

   组件刷新前调用，类似componentWillMount
   

   4) componentDidUpdate

   组件更新结束之后执行，在初始化render时不执行
   

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

   componentWillUnmount

    用于清理一些无用的内容，如：点击事件Listener
   

6. 注意

   a. this.props表示那些一旦定义，就不再改变的特性
   
   b. this.state是会随着用户互动而产生变化的特性
   

二、组件的属性和状态

1. 属性和状态其实在生命周期中我们已经提到，但由于他真的特别重要，在这里我们单独再学习一下。

2. 组件的属性

   1) 使用getDefaultProps函数来设置组件的属性

   var myView = React.createClass({
   
     //通过getDefaultProps设置组件的属性对象
     getDefaultProps(){
   
        return {
   
           props1Name:"",
                
        }
     },
   
     render(){
   
         return (
            
               {{this.props.props1Name}}
            
         )
     }
   
   });
   
   属性一旦定义，就不再改变，通过this.props.props1Name来获取getDefaultProps中定义的属性对象的值
   

2) 通过自定义属性来设置组件的属性

       //自定义组件
       var MyView = React.createClass({

             render(){

                 return(

                    
                       {{this.props.props1Name}}
                    

                 )
             }

          });

       //使用自定义组件myView时给组件设置自定义的属性，也可以通过this.props来获取到该值
       var TestView = React.createClass({

            render(){

               return(
                  {/*给myView设置自定义属性*/}
                  
                  }
               )
            }

       })

       AppRegistry.registerComponent('demo1', () => TestView);
      
#### 3. 组件的状态

       var MyView = React.createClass({

         //通过getInitialState设置组件的状态对象
         getInitialState(){

             return {

                value:"",
               
             }
         },

         render(){

             
                {{this.state.value}}
             
         }

      });

      状态定义过后，可以通过this.state.value来获取getInitialState中定义的状态对象的值，也可以通过this.setState({ value:"test", })来修改状态值

三、获取真实的DOM节点

1. JSX

    

2. JS

    this.refs.myTextInput 

四、声明周期和

获取DOM节点的案例和注释见Demo1

11.png