RN开发入门

目录

 

1、Packager是什么？怎么工作的？

2、图片的 base64 数据

3、组件的mount和unmount是什么时候进行的？

4、 RAM 格式

5、刷新JavaScipt的方法：

6、函数学习

---

1、Packager是什么？怎么工作的？

Packager即开发服务器。

 

要运行应用，首先需要启动开发服务器（即Packager，它负责实时监测js文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行：

$ npm start

Packager只是在开发时需要，便于你快速开发迭代。在正式发布应用时，所有的js文件都会被打包为一整个jsbundle文件离线运行，此时客户端不再需要Packager服务。

 

在用RN开发时是需要在pc上运行packager 服务器终端，默认是8081端口，此服务器会与你真机或者模拟器进行通讯，当你修改了js代码后，你可以点击真机上的Reload JS按钮后，app界面会立马刷新出来显示修改后的一个效果。

如果packager 服务器终端被关闭了怎么办 ？
不用担心，其实只要你切到项目的根目录，命令行输入npm start 回车即可开起终端监听。

 

2、图片的 base64 数据

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环。

如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新，比如背景图。

 

3、组件的mount和unmount是什么时候进行的？

1. 初始化类的构造器，通常在此初始化state数据模型 constructor(props) { super(props); this.state = { //key: true } } 2. 表示组件将要加载到虚拟DOM，在render方法之前执行，整个生命周期只执行一次 componentWillMount() { } 

3. 表示组件已经加载到虚拟DOM，在render方法之后执行，整个生命周期只执行一次。通常在该方法中完成异步网络请求或集成其他JavaScript库 componentDidMount() { }

 4. 在组件接收到其父组件传递的props的时候执行,参数为父组件传递的props。在组件的整个生命周期可以多次执行。通常在此方法接收新的props值，重新设置state。 componentWillReceiveProps(nextProps) { this.setState({ //key : value }); } 

5. shouldComponentUpdate(nextProps, nextState) { return true; } 该函数在componentWillReceiveProps(nextProps)执行之后立刻执行。 componentWillUpdate(nextProps, nextState) 在shouldComponentUpdate(nextProps, nextState)函数执行完毕之后立刻调用 

6. componentDidUpdate(preProps, preState)在在render()方法执行之后立刻调用。可多次执行 

7. render方法，渲染组件 render() { return( <View/> );} 8. componentWillUnmount在组件由虚拟DOM卸载的时候调用。

 

4、 RAM 格式

Random Access Modules，随机存取模块

 

通常对于启动后一段时间内不需要大量代码的应用程序来说是非常有用的。例如应用程序包含复杂的配置文件屏幕或较少使用的功能，但大多数会话只涉及访问应用程序的主屏幕更新。我们可以通过使用RAM格式来优化bundle的加载，并且内联引用这些功能和页面（当它们被实际使用时）。

在 react-native 执行 JS 代码之前，必须将代码加载到内存中并进行解析。如果你加载了一个 50MB 的 bundle，那么所有的 50mb 都必须被加载和解析才能被执行。RAM 格式的 bundle 则对此进行了优化，即启动时只加载 50MB 中实际需要的部分，之后再逐渐按需加载更多的包。

内联引用(require 代替 import)可以延迟模块或文件的加载，直到实际需要该文件。

 

在 Android 上启用 RAM 格式，需要编辑 android/app/build.gradle 文件。在apply from: "../../node_modules/react-native/react.gradle"之前修改或添加project.ext.react：

project.ext.react = [

  bundleCommand: "ram-bundle",

]

如果在 Android 上，你想使用单个索引文件（如前所述），请在 Android 上使用以下行：

project.ext.react = [

  bundleCommand: "ram-bundle",

  extraPackagerArgs: ["--indexed-ram-bundle"]

]

 

5、刷新JavaScipt的方法：

1、Android模拟器中，按两下R；

2、选择开发菜单中的Enable Live Reload开启自动刷新。（Command +M或者adb shell input key event 82）

3、开启开发菜单中的Hot Reloading选项，会自动注入，部分场景失效。

 

6、函数学习

js中没有方法，只有函数，函数中this的取值与函数的调用方式有关。谁调用函数，this就是谁。

箭头函数的this是继承自外围作用域。

https://www.jianshu.com/p/0c28fb550679

 

定义函数的方式：

1、function（）{}

2、=（）=>{}

 

组件外定义的箭头函数，必须用const或者let修饰，使用时，this.fucA

组件内定义，在render()之前定义的，使用时onClick={funcA}

https://blog.csdn.net/well2049/article/details/79430811

 

直接定义的方法，使用时需bind this

this.funcA.bind(this)

https://www.jianshu.com/p/601109471bbb

 

参考文献：

https://blog.csdn.net/gongch0604/article/details/81115633 生命周期部分