react-native 的常用知识

安装

• 软件

   java
   android Studio
   	下载安装  sdk  版本28
   NodeJs
   模拟器
  

• cmd安装

   nrm 管理npm下载源
   npm install nrm -g nrm use taobao react-native-cli native脚手架
    npm install react-native-cli -g
  

• 配置环境变量

   ANDROID_HOME
   	安卓sdk所在对的目录
   platform-tools 平台工具
  

安装的环境

1、安装Node.js
2、安装 React Native命令运行工具
3、安装ios开发工具XCode/android开发工具android studio
4、还可以安装一些有用的命令行工具
5、创建自己第一个react-native项目

• 组件和模块的导出和引入

1）export 命令
一个独立的文件就是一个模块。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

1.constructor构造函数

从上一个界面传过来的数据props在作为constructor的参数，在constructor中做一些初始化的操作，如props，state等初始化；函数原型：void constructor(props)

2.componentWillMount

第一次绘制组件(render)前触发该生命周期函数;函数原型：void componentWillMount()

3.render

绘制组件到界面上；函数原型：void render()

4.componentDidMount

第一次挥之组件(render)后触发该生命周期函数，触发该函数说明RN组件绘制已经完成了，虚拟DOM已经构建完成；从这个函数开始我们就可以和JS其他框架开始交互了，例如定时器，网络请求等操作。函数原型：void componentDidMount()

5.componentWillReceiveProps

当组件收到新的属性时，触发该函数。函数原型：void componentWillReceiveProps( object nextProps )

6.shouldComponentUpdate

当组件属性（props）或者状态（state）发生变化时，都会触发该函数。函数原型：boolean shouldComponentUpdate( object nextProps, object nextState )； 若函数返回true，则继续触发componentWillUpdate，render，componentDidUpdate等方法；若函数返回false，则不做任何处理；默认情况下，这个函数永远返回true用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

7.componentWillUpdate

如果组件状态或者属性改变，并且上面的shouldComponentUpdate(object nextProps, object nextState)返回为true，则触发该方法，函数原型：void componentWillUpdate(object nextProps, object nextState)，函数中参数实际上与shouldComponentUpdate中的参数一样，是同一个数据源；需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态，否则会循环调用该函数导致堆栈溢出。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了。

8.componentDidUpdate

更新render结束后，则调用该方法，函数原型：void componentDidUpdate(object prevProps, object prevState)；因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了prevProps和prevState。

9.componentWillUnmount

当组件要被从界面上移除的时候，就会调用componentWillUnmount()，函数原型：void componentWillUnmount();在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

为什么要用React Native

1、跨平台兼容性
2、React Native卓越性能
3、社区力量
4、学习成本低
5、调试方便
6、热更新