react-native 初步接触要点总结

写在前面的话,要用好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钩子函数。

这一点一定要注意。

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










猜你喜欢

转载自blog.csdn.net/guduyishuai/article/details/79130237