生命周期

React Native每个组件从创建到最后从DOM中移除,都有相关的方法被执行,这些方法我们可以植入相关逻辑,例如:拦截不必要的render方法执行以提高性能! 首先有哪些方法呢?

//组件初始化在DOM时
constructor()//构造方法
componentWillMount()//准备插入DOM之前
render()//渲染组件视图
componentDidMount()//插入DOM之后//修改DOM中组件相关内容时
componentWillReceiveProps()//接收到外界传入的属性或状态
shouldComponentUpdate()//判断是否需要进行重新渲染组件视图
componentWillUpdate()//变更视图之前
render()//渲染视图
componentDidUpdate()//渲染变更视图之后调用的方法//从DOM中移除
componentWillUnmount()准备移除时调用
复制代码

我们在重写相关方法的时候,需要特别注意重写方法要适当,尤其是参数部分

shouldComponentUpdate

这个方法对于提高性能应该来说很重要,可以大大降低重复渲染的问题!

该方法有一个返回值为bool类型,返回true:需要调用render进行渲染,返回false:不需要重新渲染调用render方法

在重写这个方法的时候,需要注意一下,如果需要对新传入相关属性和state进行比较时,那么注意重写的方法有两个参数:

boolean shouldComponentUpdate(object nextProps, object nextState
)
复制代码

这个方法只有在组件存在DOM中之后需要进行相关修改时才会调用,初始化的时候不会回调这个方法,此时此刻this.state和this.props的值还没有被修改,依然为就得状态

componentWillReceiveProps

void componentWillReceiveProps(object nextProps
)
复制代码

这个方法是当我们的属性发生变化的时候进行调用,其实对于这个我不太理解,因为在某种程度上我们需要减少对props进行直接操作,而且更多的我们更加希望监听props和state的同时变化!但是这个方法中只有一个参数! 在实际开发中React Native提供了直接操作props的方式,那么为了更好的监听组件本身的属性变化,我们可以通过对这个方法进行监听接收新的参数,从而调用setState方法来进行操作,这里调用更新状态是安全的,并不会触发额外的render调用

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

特定平台代码

Android和iOS在实际开发过程中对于一些操作和技术实现上有很多差异之处,退一万步iOS就一个home按键(iPhone X通过手势取代),但是有Android三大按键,就这个而言一些相关按键操作就存在差异! 在React Native中可以通过几种方式来区分特定代码执行

文件夹路径划分

/common/components/
/android/components/
/ios/components/
复制代码

通过对应的文件夹来划定相关方法执行在特定平台上。

手动判断执行相关方法

首先判断当前是什么平台,然后执行相关文件,至于判断运行平台方法可以用下面的方式:

if (Platform.OS==='ios'){}
复制代码

不同扩展名

React Native会进行检测文件夹是否有.ios或者.android的扩展名,然后根据当前客户端运行的平台进行加载对应的文件,例如:你现在在项目有如下的一些文件:

Button.ios.js
Button.android.js
复制代码

获取Android版本号

if(Platform.Version === 21){console.log('Running on Lollipop!');
}
复制代码

转载于:https://juejin.im/post/5a7cf551f265da4e8b2fcf32

React Native随笔 2--重要函数相关推荐

  1. React Native之导出

    1 React Native里面一般导出函数或者常量或者组件 如果是默认组件或者类(export default修饰)的话,在另外一个地方导入的时候不需要加上{},格式如下   导出 export d ...

  2. React Native使用指南-原生模块

    有时候App需要访问平台API,但React Native可能还没有相应的模块封装:或者你需要复用Objective-C.Swift或C++代码,而不是用JavaScript重新实现一遍:又或者你需要 ...

  3. React Native与React的关系及特点

    一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架 ...

  4. React Native之箭头函数和延展操作符(...)

    箭头函数 在我们学习React Native的过程中,我们经常会遇到"=>"这样形式的书写,如下: import React, {Component} from 'react ...

  5. React Native之函数作为参数传递给另外一个函数去调用

    1 用法 我们一般喜欢把js里面的函数作为参数传递给另外一个函数,然后再调用这个函数,有点像C语言里面的函数指针 2 代码测试 写了一个函数,2个参数分别是函数,然后更具数据决定调用哪个函数 /*** ...

  6. React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)

    1 var和let区别 let左右范围在块里面,var定义的变量可提升,用let声明的变量不可以声明2次 2 简单解构 let [a, b, c] = [1, 2, 3]; 3  map对象遍历 co ...

  7. android 回退函数,详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 发布时间:2020-09-29 09:25:52 来源:脚本之家 阅读:137 作者:lqh 详解React Native监听A ...

  8. react native 实现扫描条形码功能(react-native-camera)

    目录: 思路 安装中间件 确认 iOS .Android 配置信息 封装扫码组件 另一个组件获取扫码数据 思路 安装中间件 react-native-camera: 检查 iOS .Android 是 ...

  9. React Native 网络层分析

    文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...

最新文章

  1. java常见面试题及答案 11-20(JVM篇)
  2. 全面剖析支付宝服务窗功能二次开发
  3. Secret Code(原题和变形题)
  4. 陕西省高级职称 计算机要求,陕西省卫生高级职称评审申报条件
  5. php采集绕过cloudflare,三行代码带你绕过cloudflare反爬
  6. php $_post多个,使用PHP检查多个$ _ POST字词
  7. 2017.9.4 黑白棋 失败总结
  8. Shell中字符串反转的六大方法
  9. 网络安全实验4 SQL注入攻击
  10. PMP_考前冲刺题(2022)(3A通过分享)(180题附答案及解析)
  11. VC6.0工程设置说明
  12. 主机无法Ping通虚拟机
  13. 如何压缩ppt幻灯片
  14. HTML5游戏引擎(一)-egret引擎简介——一个开源免费的游戏框架
  15. 面试自我介绍3分钟通用计算机专业,面试自我介绍3分钟
  16. XMU 1613 刘备闯三国之三顾茅庐(一) 【并查集】
  17. 《孙子兵法》十三篇注译(13--火攻篇)
  18. 原生javascript实现星级评价功能
  19. 微信小程序和微信H5有什么区别?
  20. HCI实验spss数据分析

热门文章

  1. Oracle Database 中 B*Tree 索引内部维护
  2. 运维自动化之使用PHP+MYSQL+SHELL打造私有监控系统(七)
  3. Eclipse--java.lang.OutOfMemoryError: PermGen space
  4. 我的asp.net mvc学习过程
  5. Cisco协议学习笔记(VTP)
  6. 记一次nginx反向代理做转发遇到的坑
  7. HAProxy安装和配置大全
  8. LA 5842 Equipment (状态压缩+dp)
  9. 创建简单的maven archetype
  10. GridView自带的分页功能的实现