精华内容
下载资源
问答
  • React Native 生命周期

    千次阅读 2017-08-17 16:01:13
    前言:  在面向对象编程中,任何对象的存在都会存在生命周期。类似我们iOS 的View,就会有LoadView,ViewWillAppear,ViewDidLoad等等生命周期。RN也不例外,这篇主要学习RN的生命周期,...React Native生命周期简介

    前言:

             在面向对象编程中,任何对象的存在都会存在生命周期。类似我们iOS 的View,就会有LoadView,ViewWillAppear,ViewDidLoad等等生命周期。RN也不例外,这篇主要学习RN的生命周期,在开发中如果掌握了并熟练的运用生命周期函数的话,往往开发能事半功倍。

    • React Native生命周期简介





    如图,可以把组件生命周期大致分为三个阶段:

    • 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
    • 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
    • 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。

    生命周期回调函数(ES5写法)

    下面来详细介绍生命周期中的各回调函数,先说下和上图对应的ES5写法。

    getDefaultProps

    在组件创建之前,会先调用 getDefaultProps(),这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 getInitialState(),来初始化组件的状态。

    componentWillMount

    然后,准备加载组件,会调用 componentWillMount(),其原型如下:

    void componentWillMount()  
    

    这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

    componentDidMount

    在组件第一次绘制之后,会调用 componentDidMount(),通知组件已经加载完成。函数原型如下:

    void componentDidMount()  
    

    这个函数调用的时候,其虚拟 DOM 已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的 componentDidMount(),然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求。这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。

    componentWillReceiveProps

    如果组件收到新的属性(props),就会调用 componentWillReceiveProps(),其原型如下:

    void componentWillReceiveProps(  
      object nextProps
    )
    

    输入参数 nextProps 是即将被设置的属性,旧的属性还是可以通过 this.props 来获取。在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。如下:

    componentWillReceiveProps: function(nextProps) {  
      this.setState({
        likesIncreasing: nextProps.likeCount > this.props.likeCount
      });
    }
    

    shouldComponentUpdate

    当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(...),函数原型如下:

    boolean shouldComponentUpdate(  
      object nextProps, object nextState
    )
    

    输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样,nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件,如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。

    默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。

    componentWillUpdate

    如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),其函数原型如下:

    void componentWillUpdate(  
      object nextProps, object nextState
    )
    

    输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。

    componentDidUpdate

    调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:

    void componentDidUpdate(  
      object prevProps, object prevState
    )
    

    因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState

    componentWillUnmount

    当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),其函数原型如下:

    void componentWillUnmount()  
    

    在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。


    生命周期回调函数学习笔记小例(ES6)


    学习就要与时俱进,试着接受和学习新东西,下面的例子都是用ES6写的。


    1、设置默认属性


    代码:

     class RNHybrid extends Component {
      
      render() {  
          return(  
            <View style={styles.container}> 
              <Text style={{padding:10, fontSize:42}}>
                    {this.props.name}
              </Text>
            </View>  
          );  
       }
    }
    
    
    RNHybrid.defaultProps = {
      name: 'Mary',
    };


    效果:





    ES5和ES6写法对比:

    ES6

    class Greeting extends React.Component {
      // ...
    }
    
    Greeting.defaultProps = {
      name: 'Mary'
    };
    


    ES5

    var Greeting = createReactClass({
      getDefaultProps: function() {
        return {
          name: 'Mary'
        };
      },
    
      // ...
    
    });


    总结:
              props相当于iOS 里的属性,但是这个属性只是readonly。我们可以通过this.props来读取属性。


    2、设置状态


       由图片我们知道,当我们修改状态的时候,会从新调用render函数重新渲染页面,所以一些和界面有关的动态变量需要设置成状态。

       如上一篇的例子,我在从新copy一遍:

    看下效果:





    代码:(生命周期现在还没有说我也是偏面的了解,以后会系统的学习,现在先不介绍)

    [javascript]  view plain  copy
    1. constructor(props) {  
    2.         super(props);  
    3.         //设置当前状态是text  初始值为空  
    4.         this.state = {text: ''};  
    5.     }  
    6.   
    7.   render() {    
    8.       return(    
    9.         <View style={styles.container}>   
    10.           <TextInput style={styles.TextInputStyles}   
    11.               onChangeText={(Text)=>{  
    12.                 this.setState({text:Text});  
    13.               }}  
    14.           />   
    15.           <Text style={{padding:10, fontSize:42}}>  
    16.                 {this.state.text}  
    17.           </Text>  
    18.         </View>    
    19.       );    
    20.    }  

    ES5和ES6写法对比:

    ES6 

    class myClass extends React.Component {
      constructor(props) {
        super(props);    this.state = {text:''};
      }
      // ...
    }
    


    ES5

    var myClass = createReactClass({
      getInitialState: function() {
        return {text: ''};
      },
      // ...
    });
    
        


    ES5和ES6还有一个不同的地方,如果调用事件函数需要bind绑定

    例如:

    class RNHybrid extends Component {
      
    
      constructor(props) {
            super(props);
            this.state = {age:this.props.age};
        }
    
     handleClick() {
        alert(this.state.age);
      }
    
      render() {  
          return(  
            <View style={styles.container}> 
              <Text style={{padding:10, fontSize:42}} onPress={this.handleClick}>
                    {this.props.name}
              </Text>
            </View>  
          );  
       }
    }

    这样写你点击的时候将会报错:



    你需要将函数绑定:

    1.可以在构造函数里绑定

     constructor(props) {
            super(props);
            this.state = {age:this.props.age};
            this.handleClick = this.handleClick.bind(this);
        }

    2.还可以在调用的时候绑定

     <Text style={{padding:10, fontSize:42}} onPress={this.handleClick.bind(this)}>
                    {this.props.name}
     </Text>


    3、其他生命周期函数验证


    代码:

    import React, { Component } from 'react';
    import {
       AppRegistry,
      StyleSheet,
      View,
      Text,
      TextInput,
    } from 'react-native';
    
    var  nowTime = new Date();
    var  showText;
    
    class RNHybrid extends Component {
      
      constructor(props) {  
            super(props);  
            console.log('state:'+nowTime);
            showText = 'state:'+nowTime+'\r\r';   
            //设置当前状态是text  初始值为空  
            this.state = {text: ''};  
      }
    
    
      componentWillMount(){
        console.log('componentWillMount:'+nowTime);
        showText = showText+'componentWillMount:'+nowTime+'\r\r';   
      } 
    
      componentDidMount(){
        console.log('componentDidMount:'+nowTime);
        showText = showText+'componentDidMount:'+nowTime+'\r\r';   
        alert(showText);
      } 
    
      shouldComponentUpdate(){
        console.log('shouldComponentUpdate:'+nowTime);
        showText = showText+'shouldComponentUpdate:'+nowTime+'\r\r';   
        return true;
      } 
       
      componentWillUpdate(){
        console.log('componentWillUpdate:'+nowTime);
        showText = showText+'componentWillUpdate:'+nowTime+'\r\r';       
      } 
    
      componentDidUpdate(){
        console.log('componentDidUpdate:'+nowTime);
        showText = showText+'componentDidUpdate:'+nowTime+'\r\r';       
      } 
    
      componentWillUnmount(){
        console.log('componentWillUnmount:'+nowTime);
        showText = showText+'componentWillUnmount:'+nowTime+'\r\r';       
      }
    
      render() {    
          return(    
            <View style={styles.container}>   
              <TextInput style={styles.TextInputStyles}   
                  onChangeText={(Text)=>{  
                    this.setState({text:Text});  
                  }}  
              />   
              <Text style={{marginTop:10,padding:10, fontSize:15,borderColor:'gray',borderWidth:1}}>  
                    {showText}  
              </Text>  
            </View>    
          );    
       }  
    }
    
    RNHybrid.defaultProps = {
      name: 'Mary',
      age:'18',
    };
    
    
    const styles = StyleSheet.create({
       container:{
       		marginTop:100,
       		flexDirection:'row',
          flexWrap:'wrap',
          justifyContent:'space-around',
       },
       TextInputStyles:{
          width:200,
          height:60,
          borderWidth:2,
          borderColor:'red',
       },
    });
    
    AppRegistry.registerComponent('RNHybrid', () => RNHybrid);


    效果:




    分析:

        当加载时候,按照 构造函数-> componentWillMount -> render->componentDidMount 这个顺序来的。
         细心的人可能会发现,界面上并没有显示componentDidMount,是因为执行了这个函数并没有重新render。
        当你输入的时候改变state就按照图上左下角部分进行。重新render的时候,就会看到componentDidMount出现。

        验证图上的分析是合理的,我们也放心了。

    展开全文
  • react native 生命周期

    2019-01-11 16:29:00
    react native 生命周期经历了三个阶段:实例化,运行和销毁阶段 实例化阶段 getDefaultProps():在组件创建之前,全局调用一次getDefaultProps。 getInitialState():在组件创建并加载后,使用getInitialState...

    react native 生命周期经历了三个阶段:实例化,运行和销毁阶段

    实例化阶段

    getDefaultProps():在组件创建之前,全局调用一次getDefaultProps。

    getInitialState():在组件创建并加载后,使用getInitialState初始化组件状态。

    componentWillMount():在生命周期中仅执行一次,在render()之前,可以对state状态进行改变。

    componentDidMount():在render绘制完成以后,会调用一次componentDidMount,通常用于网络请求,开启定时器。

     

    运行阶段

    componentWillReceiveProps:当props发生改变时,将被调用。新的props作为参数传进来,this.props接收的还是原来的props,我们可以通过调用this.setstate()来更新组件的状态,并且不会造成二次渲染。

    shouldComponentUpdate:当组件接收新的属性和状态改变时,会调用shouldComponentUpdate,会对newProps和newState做一个判断,若为true,进行渲染,反之不渲染。

    componentWillUpdate:在shouldComponentUpdate()判断为true,会调用componentWillUpdate,this.props和this.state将会指向新的newProps和newState,在这里不能更新state和props。

    componentDidUpdate:完成了属性和状态的更新,会调用componentDidUpdate来通知。

     

    销毁阶段

    componentWillUnmount:当组件要被从界面上移除,会调用componentWillUnmount,通常用于解除网络请求,开启定时器。

     

    转载于:https://www.cnblogs.com/xx929/p/10255847.html

    展开全文
  • React Native生命周期

    2018-04-18 14:59:42
    React Native的组件从创建到被渲染再到被销毁有一个过程,在不同的阶段完成不同的任务,通过了解其生命周期可以让我们知道应该在什么阶段对其进行哪些操作。一般人们将其分为三个阶段: 初始化阶段:这个阶段用于...

    React Native的组件从创建到被渲染再到被销毁有一个过程,在不同的阶段完成不同的任务,通过了解其生命周期可以让我们知道应该在什么阶段对其进行哪些操作。一般人们将其分为三个阶段:

    • 初始化阶段:这个阶段用于准备组件所需要的数据,然后将组件渲染到页面上。
    • 运行阶段:组件一直循环监听,当组件中的数据被修改时,组件将重新渲染页面。
    • 销毁阶段:当不再需要组件时,组件会自动进行销毁。

    从上图中可以看到组件在每个生命周期内都有响应的许多钩子函数,我们可以把组件需要执行的操作放在对应的钩子函数中,下面记录这些钩子函数:

    1、初始化阶段

    • getDefaultProps:在此钩子中可以设置组件默认的属性Props
    • getInitialState:在这个钩子中可以对组件的state数据进行设置,通过this.setState()函数对state进行修改,通过this.state进行访问

    注意:React在es6中删除了以上两个钩子,而通过类的构造函数constructor来初始化state,通过声明静态变量来设置props:

    class App extends Component {       //ES6创建组件
      static defaultProps={             //ES6初始化props
        myProps:'myProps'
      };
      constructor(props){
        super(props);
        this.state={                    //ES6初始化state
          myData:'state'
        }
      }
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.instructions}>
              {this.props.myProps}{this.state.myData}
            </Text>
          </View>
        );
      }
    }
    • componentWillMount:组件挂载之前的钩子,需要在组件被渲染到页面之前的操作可以放在这里。
    • render:用于渲染组件的方法,返回一个JSX的语法的DOM,组件据此来渲染页面。
    • componentDidMount:组件挂载之后,需要在组件渲染后的操作可以放在这里。一般在这里进行网络数据请求与加载操作。

    2、运行阶段

    • componentWillReceiveProps:组件在接收父组件更新props之前的执行。
    • shouldComponentUpdate:当props或state改变后,将进行此函数判断,通过返回true或false来控制是否对组件进行重新渲染。
    • componentWillUpdate:组件刷新前调用。
    • componentDidUpdate:组件刷新之后调用。

    3、销毁阶段

    • componentWillUnmount:组件在被销毁之前调用的函数。
    展开全文
  • Touchable组件 import React, { Component } from 'react'; import { Platform, StyleSheet, Text, ... TouchableOpacity, ...} from 'react-native'; export default class Test4 extends Com...

    Touchable组件

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
       Alert
    } from 'react-native';
    
    
    export default class Test4 extends Component{
        state={
            title:'默认值'
        }
    
        render(){
            return(
                <View style={styles.container}>
                  <TouchableOpacity activeOpacity={0.5} onPress={(e)=>this.click('点击')}
                                    onPressIn={()=>this.click('按下')}
                                    onPressOut={()=>this.click('抬起')}
                                    onLongPress={()=>this.click('长按')}
                  >
                      {/*()=>  表示回调,不写会直接触发,属于ES6语法*/}
                     <View>
                        <Text>{this.state.title}</Text>
                      </View>
                   </TouchableOpacity>
              </View>
            );
        }
    
        click(event){
    
            this.setState({
                title:event
            });
        }
    }
    const styles = StyleSheet.create({
       container: {
           flex:1,
           backgroundColor:'#F5FCFF',
           justifyContent:'center',
           alignItems:'center'
       },
    
    });
    
    • Props 属性 相当于OC中的ReadOnly,只读属性
    • state 状态 每个组件有一个系统的setSate方法,用来改变状态,而且会刷新界面(刷新界面就会调用Render()函数 )

    生命周期方法

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
       Alert
    } from 'react-native';
    
    export default class Test4 extends Component{
        state={
            title:'默认值'
        }
    
        //相当于OC中的ViewWillAppear
        componentWillMount() {
            // Alert.alert('WillMount来了');
        }
    
        //
        render(){
            return(
    
              <View style={styles.container}>
                  {Alert.alert('render来了')}
                  <TouchableOpacity onPress={()=>this.click('点击')}>
                      <Text>{this.state.title}</Text>
                  </TouchableOpacity>
    
              </View>
            );
        }
    
        click(event){
             this.setState({
                 title:event
            });
        }
        //在Render之后,刷新UI完以后执行 -- 今后用来发送网络请求(第一次加载的数据)
        componentDidMount() {
            // Alert.alert('DidMount来了');
        }
    
        //这个方法在刷新UI之后调用,第一次加载UI不会执行
        componentDidUpdate() {
            Alert.alert('DidUpdate(来了)');
        }
    }
    const styles = StyleSheet.create({
       container: {
           flex:1,
           backgroundColor:'#F5FCFF',
           justifyContent:'center',
           alignItems:'center'
       },
    
    });
    

    生命周期练习

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      Alert,
      Button,
    } from 'react-native';
    
    export default class Test4 extends Component{
        state={
            title:'默认值',
            person:'张三'
        }
    
        static defaultProps={
            age:18
        }
        //相当于OC中的ViewWillAppear
        componentWillMount() {
            // Alert.alert('WillMount来了');
        }
    
        //
        render(){
            return(
    
              <View ref="topView" style={styles.container}>
    
                   <Text>{this.state.person}</Text>
                   <Text>{this.props.age}</Text>
                   <Button title={'我就是个Button'} color={'red'} onPress={()=>this.click('点了按钮')}></Button>
                  {/*<Button title={'我就是个Button'} color={'red'} onPress={btnClick}></Button>*/}
              </View>
            );
        }
    
        click(event){
             this.setState({
                 title:event
            })
    
            //拿到View
            console.log(this.refs.topView)
        }
        //在Render之后,刷新UI完以后执行 -- 今后用来发送网络请求(第一次加载的数据)
        componentDidMount() {
            // Alert.alert('DidMount来了');
        }
    
        //这个方法在刷新UI之后调用,第一次加载UI不会执行
        componentDidUpdate() {
            Alert.alert('DidUpdate(来了)');
        }
    }
    
    const btnClick = ()=>{
        Alert.alert('btnClick我来了');
    }
    
    const styles = StyleSheet.create({
       container: {
           flex:1,
           backgroundColor:'#F5FCFF',
           justifyContent:'center',
           alignItems:'center'
       },
    
    });
    展开全文
  • React Native生命周期整理

    千次阅读 2016-05-11 22:16:05
    整理的React Native生命周期
  • 生命周期中组建的三种状态:   在组件的生命周期中分为三种状态,第一种是装载状态(Monnting),第二...React Native 生命周期图:  1、装载状态(Monnting):   注意:除了render()以外,在该状态中的...
  • rn组件的生命周期 组件的生命周期分成三个状态:  ● Mounting:已插入真实 DOM  ● Updating:正在被重新渲染  ● Unmounting:已移出真实 DOM React为每个状态都提供了两种处理函数,will 函数在进入状态...
  • Unmounting阶段:组件卸载 生命周期进化的原因 使用Fiber背后的故事 总结 前言 众所周知每个应用的开发框架都有其对应的生命周期函数,ReactNative是基于React开发的,所以其生命周期先关函数也和React一样密不可分...
  • 2019独角兽企业重金招聘Python工程师标准>>> ReactNative生命周期函数: 点击查看 转载于:https://my.oschina.net/xiaoLoo/blog/1800943
  • 今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧在android中,React Native组件的生命周期,大致分为三个阶段,分别是:1、组件第一次绘制阶段,这个阶段主要是组件的加载和初始化;...
  • 生命周期就像页面的加载到关闭的这个过程,下面我将详细给大家介绍组件的生命周期 生命周期图案列 效果图进入页面打印日志 加载阶段 点击我日志 - 点击让他死亡模拟卸载 --------componentWillUnmount组件移除...
  • 间断性小记,仅供自己参考,有不对的地方,非常欢迎各位大...6. ReactNative组件的生命周期:   7,typeof()函数,判断数据类型  parseInt()函数,强制数据类型转换---还有其他类型Float...    
  • ES6 生命周期图解 很多文章里的图解,第一步是 getDefaultProps , 第二步是 getinitialstate ,这是 ES5 的写法; 实际上ES6 中 getinitialstate 是不会再执行的,初始化state都是在 constructor中完成; 强制刷新 ...
  • React Native生命周期

    2017-08-27 20:57:22
    React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分)。如图: 下面简单讲解一下三大阶段中各自的函数:实例化阶段:在日常开发中,最为常用的...
  • React Native组件生命周期一、React Native组件生命周期(ES6)(1)、概念对于组件的生命周期来说分为四个阶段,分别为:创建阶段、实例化阶段、运行(更新)阶段、销毁阶段。(2)、创建阶段该阶段主要发生在创建组件类...
  • React Native Component 生命周期 简介 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态。RN 组件的...
  • React Native生命周期.pdf
  • 1 前言 大家都知道React Native其实是由很多组件构成,开发...2 React Native组件生命周期 RN组件的生命周期分为四个阶段 分别是:创建阶段 实例化阶段 运行(更新)阶段 销毁阶段 整体流程图如下(借用别人的图) ...
  • React的组件一样,RN的组件也有自己的生命周期。在RN应用开发中,组件的生命周期指组件初始化并挂载到虚拟DOM为起始,到组件从虚拟DOM卸载为终结的整个过程,整个生命周期如图所示。 如图可知,rn组件的生命周期...
  • react native 组件生命周期

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,979
精华内容 3,591
关键字:

reactnative生命周期