《React Native 精解与实战》书籍连载「React Native

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。

(一)、图解

金沙官网线上 1

668737-63f32730f8202809.jpg

基本总结:

金沙官网线上 2

生命周期.png

从图看:在React Native中,组件的生命周期大致可以分为3个阶段(实例化阶段,存在阶段,销毁阶段),其中最常接触的为实例化阶段,这个阶段负责组件的构建和展示的时间,需要我们根据几个函数的调用过程,控制好组件的展示和逻辑处理。

书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。

1、实例化阶段函数功能分析

① getDefaultProps:在组件中,我们可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以修改props,只可由其他组件调用它时再外部进行修改。

② getInitialState:该函数用于对组件一些状态进行初始化
该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件状态的一些变量放在这里初始化,比如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值。注意:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次渲染,不过,React框架会根据DOM的状态自动判断是否需要真正渲染

constructor(props) {
    super(props);
    this.state = {
      clickText: "开始点击按钮",
      count: 1,
      detailContent: true
    }
  }
    ...
clickButton(){
    const { count } = this.state;
    this.setState({
      clickText: "我点击了按钮",
      count: count + 1,
      detailContent: false
    })
  }

render() {
    console.log("render1111");
    return (
      <View style={styles.container}>
        <Text>欢迎来到首页</Text>
        <TouchableOpacity
          onPress={() => Actions.notice()}
        >
          <Text>跳转到公告页</Text>
        </TouchableOpacity>
        <Text style={{color: 'blue', fontSize: 40}}>{this.state.count}</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.clickButton()}
        >
          <Text>{this.state.clickText}</Text>
        </TouchableOpacity>
        <HomeDetails detailContent={this.state.detailContent}/>
      </View>
    )
  }

③ componentWillMount: 组件将要被加载到视图之前调用

④ componentDidMount: 在调用了render方法,组件加载成功并被成功渲染出来之后,所要执行的后续操作,一般都会在这个函数中进行,比如经常要面对的网络请求等加载数据操作
*** 因为UI已经成功渲染,而且这里面是异步的,所以放在这个函数进行数据的请求等复杂的操作,不会出现UI错误***

书籍相关所有资料请访问:http://rn.parryqiu.com

2、存在阶段函数功能分析

金沙官网线上,shouldComponentUpdate:一般用于优化,可以返回false或true来控制是否进行渲染(true 的话进行下2步操作,false不会进行下去)
componentWillUpdate: 组件刷新前调用
componentDidUpdate:更新后

shouldComponentUpdate(nextProps, nextState){
    console.log(this.state.detailContent,'detailContent');
    if (this.state.count !== nextState.count) {
      console.log("shouldComponentUpdate1111---组件需要更新");
      return true;
    }
    return false;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate1111---组件将要更新");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate1111---组件更新完毕");
  }

componentWillReceiveProps:指父元素对组件的props或state进行了修改

// 在子组件中对父元素props或state的改变进行监听进行相应的操作
componentWillReceiveProps(nextProps){
    console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
    console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
  }
// componentWillReceiveProps -> 改变后执行父组件中 shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate

3.5 生命周期概念

任何生命体都会经历从出生到消亡的过程,而 React Native 框架中的组件同样具有这样的属性。
在组件生命周期的每个阶段,React Native 提供了多个生命周期函数,供开发者作为切入组件生命周期的钩子(hook),这样在对应的时间点程序就可以做对应的逻辑处理,从而实现相应的功能。
在 React Native 程序启动时,内部的虚拟 DOM 开始建立,生命周期就是建立在此虚拟 DOM 的整个生命周期之中,从虚拟 DOM 的初始化到虚拟 DOM 的卸载,React Native 为组件的不同状态建立了不同的生命周期。

3、销毁阶段函数功能分析

componentWillUnmount
用于清理一些无用的内容,比如:定时器清除

本文由金沙官网线上发布于Web前端,转载请注明出处:《React Native 精解与实战》书籍连载「React Native

您可能还会对下面的文章感兴趣: