写在前面的话,要用好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是十分重要的,控件的生命周期如下:
注:该图片来源于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中。整体思路如下
b、通过ref进行通信
使用this.refs.相应的控件ref属性值,即可取得相应的控件,进而可以调用setState,或者拿到props和state。
两者的比较:
最后举个例子说明一下为什么可能不被调用。假设父组件通过点击事件,重新渲染,同时改变子的props。
然而子是一个list,它的数量是不定的。比如一开始进入页面,list中有一个item,这个时候该item组件调用
componentWillMount和componentDidMount钩子函数。通过点击事件,假如这个时候list有三个item。那么第一个item
会走componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate这组钩子函数。其他两个item
则是走componentWillMount和componentDidMount钩子函数。
也就是,父子通过props通信时,如果之前子有dom了,那么就走componentWillReceiveProps、
shouldComponentUpdate、componentWillUpdate这组钩子函数。否则走componentWillMount、
componentDidMount钩子函数。
这一点一定要注意。
通过以上总结,可以灵活的处理任何交互。如果存在奇怪的现象,一定是思路不正确,而且没有理解透以上内容。