React Native随笔 2--重要函数
生命周期
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--重要函数相关推荐
- React Native之导出
1 React Native里面一般导出函数或者常量或者组件 如果是默认组件或者类(export default修饰)的话,在另外一个地方导入的时候不需要加上{},格式如下 导出 export d ...
- React Native使用指南-原生模块
有时候App需要访问平台API,但React Native可能还没有相应的模块封装:或者你需要复用Objective-C.Swift或C++代码,而不是用JavaScript重新实现一遍:又或者你需要 ...
- React Native与React的关系及特点
一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架 ...
- React Native之箭头函数和延展操作符(...)
箭头函数 在我们学习React Native的过程中,我们经常会遇到"=>"这样形式的书写,如下: import React, {Component} from 'react ...
- React Native之函数作为参数传递给另外一个函数去调用
1 用法 我们一般喜欢把js里面的函数作为参数传递给另外一个函数,然后再调用这个函数,有点像C语言里面的函数指针 2 代码测试 写了一个函数,2个参数分别是函数,然后更具数据决定调用哪个函数 /*** ...
- React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
1 var和let区别 let左右范围在块里面,var定义的变量可提升,用let声明的变量不可以声明2次 2 简单解构 let [a, b, c] = [1, 2, 3]; 3 map对象遍历 co ...
- android 回退函数,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用 发布时间:2020-09-29 09:25:52 来源:脚本之家 阅读:137 作者:lqh 详解React Native监听A ...
- react native 实现扫描条形码功能(react-native-camera)
目录: 思路 安装中间件 确认 iOS .Android 配置信息 封装扫码组件 另一个组件获取扫码数据 思路 安装中间件 react-native-camera: 检查 iOS .Android 是 ...
- React Native 网络层分析
文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...
最新文章
- java常见面试题及答案 11-20(JVM篇)
- 全面剖析支付宝服务窗功能二次开发
- Secret Code(原题和变形题)
- 陕西省高级职称 计算机要求,陕西省卫生高级职称评审申报条件
- php采集绕过cloudflare,三行代码带你绕过cloudflare反爬
- php $_post多个,使用PHP检查多个$ _ POST字词
- 2017.9.4 黑白棋 失败总结
- Shell中字符串反转的六大方法
- 网络安全实验4 SQL注入攻击
- PMP_考前冲刺题(2022)(3A通过分享)(180题附答案及解析)
- VC6.0工程设置说明
- 主机无法Ping通虚拟机
- 如何压缩ppt幻灯片
- HTML5游戏引擎(一)-egret引擎简介——一个开源免费的游戏框架
- 面试自我介绍3分钟通用计算机专业,面试自我介绍3分钟
- XMU 1613 刘备闯三国之三顾茅庐(一) 【并查集】
- 《孙子兵法》十三篇注译(13--火攻篇)
- 原生javascript实现星级评价功能
- 微信小程序和微信H5有什么区别?
- HCI实验spss数据分析
热门文章
- Oracle Database 中 B*Tree 索引内部维护
- 运维自动化之使用PHP+MYSQL+SHELL打造私有监控系统(七)
- Eclipse--java.lang.OutOfMemoryError: PermGen space
- 我的asp.net mvc学习过程
- Cisco协议学习笔记(VTP)
- 记一次nginx反向代理做转发遇到的坑
- HAProxy安装和配置大全
- LA 5842 Equipment (状态压缩+dp)
- 创建简单的maven archetype
- GridView自带的分页功能的实现