react-native 初步接触要点总结

react

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

这一点一定要注意。

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