react-native 初步接触要点总结

叁歲伎倆 2022-06-01 06:09 158阅读 0赞

写在前面的话，要用好react-native，必须要先了解es6 和 jsx，之后再开始react-native之旅

目前用react-native已经有一个星期了，记录其中一些要点

1、props是只读的，唯一的修改时机为父渲染的时候，将新的props传递给子

2、定义自己的props的时候使用defaultProps才能指定默认值

3、定义自己的props的时候最好使用propTypes进行校验

4、state的更改将导致重新渲染

5、由于state的改变将导致重新渲染，因此在render中不能修改state，如果需要修改，一定是设计的问题

6、由于state的改变将导致重新渲染，因此了解控件的生命周期对于安全的改变state是十分重要的，控件的生命周期如下：

![SouthEast][]

注：该图片来源于[https://www.race604.com/react-native-component-lifecycle][https_www.race604.com_react-native-component-lifecycle]这篇文章

可以看出来，安全更新state的hook有componentWillMount，componentDidMount，

componentWillReceiveProps，shouldComponentUpdate

7、几个hook的常见应用场景

a、componentWillMount：进入界面后进行一些初始化操作，比如表单通过服务器获取默认值。

b、componentDidMount：进入界面后初始化或者调用一些其他框架，因为此时真实的dom已经创建。

c、componentWillReceiveProps：渲染控件的时候，通过属性的变化修改state。

d、shouldComponentUpdate：父子通信，或者ref通信的时候，过滤不需要渲染的情况。也可以修改state。

e、componentWillUpdate：用来处理每次更新前需要做的事情，不能修改state。

8、控件之间的通信

a、利用父子及回调完成通信

如果子需要向父通信，需要在子中定义一个回调函数，放在props中。整体思路如下

![SouthEast 1][]

b、通过ref进行通信

使用this.refs.相应的控件ref属性值，即可取得相应的控件，进而可以调用setState，或者拿到props和state。

两者的比较：

![SouthEast 2][]

最后举个例子说明一下为什么可能不被调用。假设父组件通过点击事件，重新渲染，同时改变子的props。

然而子是一个list，它的数量是不定的。比如一开始进入页面，list中有一个item，这个时候该item组件调用

componentWillMount和componentDidMount钩子函数。通过点击事件，假如这个时候list有三个item。那么第一个item

会走componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate这组钩子函数。其他两个item

则是走componentWillMount和componentDidMount钩子函数。

也就是，父子通过props通信时，如果之前子有dom了，那么就走componentWillReceiveProps、

shouldComponentUpdate、componentWillUpdate这组钩子函数。否则走componentWillMount、

componentDidMount钩子函数。

这一点一定要注意。

通过以上总结，可以灵活的处理任何交互。如果存在奇怪的现象，一定是思路不正确，而且没有理解透以上内容。

[SouthEast]: /images/20220601/6a69f7bd7f59476da02288a19774aee9.png
[https_www.race604.com_react-native-component-lifecycle]: https://www.race604.com/react-native-component-lifecycle/
[SouthEast 1]: /images/20220601/5d2e933fb2a246af9489c684be63ce20.png
[SouthEast 2]: /images/20220601/5082ceab0c0b48b1bff409741378b408.png

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactNative布局样式总结

flex number 用于设置或检索弹性盒模型对象的子元素如何分配空间 flexDirection enum('row', 'row-reverse' ,'column'

骑猪看日落/ 2023年10月17日 21:03/ 0 赞/ 30 阅读

相关 590-初步接触Golang语言

对Golang语言的认识 C语言诞生50年了 Golang语言是在2009年发布的 Go的特征 Go是个“大杂烩" ![在这里插入图片描述][waterm

深藏阁楼爱情的钟/ 2022年09月12日 02:52/ 0 赞/ 123 阅读

相关 Servlet 要点总结

Servlet是JaveEE API定义的规范，是Java Web开发中的核心技术。 Servlet 是运行在web服务器端的java应用程序，Servlet对象具

末蓝、/ 2022年08月09日 01:53/ 0 赞/ 165 阅读

相关 JavaScript :cookie初步接触使--登录

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而Cookie是运行在客户端的，所以可以用JS来设置

逃离我推掉我的手/ 2022年08月06日 03:21/ 0 赞/ 109 阅读

相关初步接触正则表达式

记录一下这两天接触的正则表达式一、基本知识 1.定义：符合一定规则的表达式 2.作用：用于专门操作字符串。 3.特点：用于一些特定的符合来表示一些代码操作

迷南。/ 2022年07月15日 14:22/ 0 赞/ 133 阅读

相关四大组件之Activity（初步接触）

Activity简介目录 Activity简介 1、所谓Activity一个应用的界面。 2、android四大组件只要使用了，就要在AndroidManifes

一时失言乱红尘/ 2022年07月15日 10:53/ 0 赞/ 135 阅读

相关初步接触ubuntu

1、文件部分 helloworld 创建文件 sudo vi aa.txt //由于权限问题所以加上管理员权限sudo 然后进入编辑界面写入helloworl

约定不等于承诺〃/ 2022年07月14日 13:49/ 0 赞/ 105 阅读

相关初步接触ibatis

相对Hibernate和Apache OJB 等“一站式”ORM解决方案而言，ibatis 是一种“半自动化”的ORM实现。所谓“半自动”，

雨点打透心脏的1/2处/ 2022年07月10日 11:28/ 0 赞/ 91 阅读

相关 Hibernate总结要点

概念：针对数据库的持久化框架，帮助完成对数据库的增删改查工作重点:ORM 开发步骤： 1.配置环境：导入jar包，目前共17个； 2.Build path; 3.创

约定不等于承诺〃/ 2022年06月17日 09:23/ 0 赞/ 176 阅读

相关 react-native 初步接触要点总结

写在前面的话，要用好react-native，必须要先了解es6 和 jsx，之后再开始react-native之旅目前用react-native已经有一个星期了，记录其中

叁歲伎倆/ 2022年06月01日 06:09/ 0 赞/ 159 阅读