正文

reactnative学习笔记(代码片段)

想旅游咯  想旅游咯  2022-10-31  404

关键词：

1、搭建开发环境

英文文档：http://facebook.github.io/react-native/docs/getting-started.html

中文文档：https://reactnative.cn/docs/0.51/getting-started.html

所有的环境配置好后

react-native init myProject
cd myProject
react-native run-ios
react-native run-android

开启调试模式：command+D 选择 Debug JS Remotely

打开浏览器：http://localhost:8081/debugger-ui/ 即可调试

2、RN 组件的生命周期

生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。

***可以把组件生命周期大致分为三个阶段***

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

3、生命周期回调函数

1.getDefaultProps

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

2.componentWillMount

准备加载组件，会调用 componentWillMount()，其原型如下：

void componentWillMount()

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

3.componentDidMount

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

void componentDidMount()

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

4.componentWillReceiveProps

如果组件收到新的属性（props），就会调用 componentWillReceiveProps()，其原型如下：

void componentWillReceiveProps(  
  object nextProps
)

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

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

5.shouldComponentUpdate

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

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

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

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

注意：

默认情况下返回true，如果重新此方法，需要返回返回 boolean 值，否则会报warning 警告。

Warning: App.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false.

6.componentWillUpdate

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

void componentWillUpdate(  
  object nextProps, object nextState
)

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

7.componentDidUpdate

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

void componentDidUpdate(  
  object prevProps, object prevState
)

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

8.componentWillUnmount

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

void componentWillUnmount()

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

9.把生命周期的回调函数总结成如下表格：

生命周期	调用次数	能否使用 setSate()
getDefaultProps	1(全局调用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否

源码地址：https://github.com/zuobaiquan/react-native/tree/master/myExercise

reactnative学习笔记——调用原生模块（android）(代码片段)

以crazyboycode/react-native-splash-screen为例，给一个RN应用添加一个应用启动屏，以掩盖app启动白屏的问题。说明：该模块应用场景是在app启动时，由于RN渲染需要时间，因手机性能的问题可能会导致应用2到3秒的白... 查看详情

reactnative入门基础知识总结(代码片段)

中秋在家闲得无事，想着做点啥，后来想想，为啥不学学reactnative。在学习 ReactNative时，需要对前端（HTML，CSS，JavaScript）知识有所了解。对于JS，可以看看阮一峰老师的《ECMAScript6入门》这篇文章。里面涉及很多ES6的新特性... 查看详情

reactnative学习笔记——win11安卓子系统的安装与使用(代码片段)

写这篇文章的目的是为了学习ReactNative开发打基础，能够更好的运行、测试原生应用，带来比模拟器更好的体验。WSA（适用于Windows的Android™️子系统），全称WindowsSubsystemforAndroid，它能够让你在Windows11系统中安装和使用Android应... 查看详情

reactnative之react速学教程(代码片段)

本文出自《ReactNative学习笔记》系列文章。ReactNative是基于React的，在开发ReactNative过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。通过《ReactNative之React速学教... 查看详情

reactnative笔记(代码片段)

1、<FlatList/>_renderItem=(item)=>return<Viewstyle=[styles.part4Row]><Textstyle=this.props.titleFont>item.name</Text><Textstyle=this.props.valueFont>item.va 查看详情

reactnative学习笔记

React是使用ES6,支持JSX语法,开发组件化web或native的工具.现阶段使用Babel工具转换成ES5代码.组件通过props属性传递不变化的内容,UI通过state属性变动来产生变化.React一个界面框架,数据的管理在js中比较麻烦,容易混乱.有个redux库可以... 查看详情

reactnative学习(代码片段)

学习首先，假使你已经安装了Nodejs6，也有使用npm进行Nodejs的包管理npminstall-greact-native-cli 也可以使用yarn作为包管理工具npminstall-gyarn 安装Android Studio 配置系统变量创建reactnative工程reac 查看详情

reactnative---ios开发学习(代码片段)

作为一名iOS开发者，断断续续一年前开始接触ReactNative，最近由于工作需要，专职学习ReactNative也有一个多月了。网络上知识资源非常的多，但能让人豁然开朗、迅速学习的还是少数，我整理出的这些文章对于... 查看详情

reactnative学习——使用flexbox布局(代码片段)

本文基于ReactNative0.52Demo上传到Git了，有需要可以看看，写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo一、主轴方向flexDirection　　flexDirection决定主轴的排列方向。　　1、column——竖直（默认）　　2、row—... 查看详情

学习reactnative想到的问题(代码片段)

ReactNative中组件的概念是什么？我的理解：一个控件，像Button就是一个组件，一个UI布局也是一个组件，看你如何定义。ReactNative是怎么实现交互的？解：使用JSX的事件捆绑进行交互。使用ReactNative页面... 查看详情

match的reactnative入门之旅(代码片段)

这是一篇学习笔记，注意事项的文章。文中的资料绝大部分出自React中文网一搭建开发环境运行react-nativeinitAwesomeProjectcdAwesomeProjectreact-nativerun-android三State（状态）我们使用两种数据来控制一个组件：props和state。pr... 查看详情

reactnative学习笔记--开发环境搭建

工欲善其事，必先利其器。这次主要介绍macosx下ReactNative的开发环境的搭建。homebrewmac上的包管理工具，用于安装nodejs和其他一些工具软件，在terminal输入下面命令进行安装：/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/in... 查看详情

reactnative的学习笔记

一、安装nodejs查看是否安装：npm-v二、安装react-native命令工具npminstall-greact-native-cli三、查看react-native--help四、安装安卓开发工具https://developer.android.google.cn/index.html开发-AndroidStudio-下载五、react-nativeinit<名字>六、cnp 查看详情

reactnative学习笔记：集成到现有原生应用

前言正如ReactNative中文网上所说，如果你正准备从头开始制作一个新的应用，那么ReactNative会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程，ReactNative也同样不在话下。只需简单几... 查看详情

reactnative环境搭建笔记(代码片段)

下载JDK11编辑环境变量，增加JAVA_HOMEjdk所在路径，添加Path%JAVA_HOME%\\binNode.jshttps://nodejs.org/en/download/安装Node后建议设置npm镜像（淘宝源）配置镜像http://npm.taobao.org=>http://npmmirror.comhttp://registry.npm.taobao.org=>http://registry.npmmirror.com... 查看详情

reactnative环境搭建笔记(代码片段)

reactnative开发-搭建reactnative开发环境(代码片段)

...说，成本还是有的。然而现在有蛮多的公司开发App是基于ReactNative来开发的，这样可以做到一个App，就是一套代码，一个团队。对于公司来说，无疑节约了成本。《ReactNative开发》这系列的文章主要是记录本人利用ReactNative学习开... 查看详情