RN入门到进阶，打造高质量上线App 2-5 ES6，ES7，ES8学习指南-1

内容描述：本课程从0开始讲述用RN开发一款github阅读APP

学习心得： 目前处于巩固基础知识截断，学习如何用RN编写类 以及函数

highlight: arta

本章目标：

• 完成RN开发环境搭建
• 熟悉ES基础语法
• 掌握RN调试技巧
• 熟悉VS Code开发RN的一些使用技巧

开发环境搭建指导Mac平台

VSCode开发ReactNative实用技巧

快捷键

1. 快速修复： Command + .
2. 查找文件/查看最近打开过的文件 command + P
3. 打开console ：Command +J
4. 代码格式化： shift + option + F
5. 当前行代码和上一行/下一行互换位置 option + 上/下
6. 重新打开 关闭的编辑页面 command + shift + T
7. 通过匹配文本打开文件 command +T
8. 查看源码 长摁command 然后点击
9. 查看类的子类 选中要查看的类 然后 command + F12
10. 跟踪代码的时候，经常跳转其他类，后退快捷键 ctrl + -
11. 导入类的快捷键 command + 。
12. 全局搜索 command + shift + F
    运行项目相关命令
13. npm run android
14. npm run ios

ES基础

类

class Animal{
    constructor(name,color){
        this.name = name;
        this.color = color;
    }
    
    toString(){
    console.log('name:'+ this.name+',color:'+this.color)
    }
}
class Cat extends Animal{
    constructor(action){
        super('cat','white')
    }
}

模块化
export var name = ‘Rainbow’
//test.js
var name = ‘Rainbow’;
var age = ‘24’;
export {name,age};
//myModule.js
export function myModule(someArg){
return someArg;
}
导入
import {myModule} from ‘myModule’;
import {name,age} from ‘test’;

箭头函数

() => 1
v =>v +1
()=>{
    alert("foo")
}
e=>{
 if(e==0){
     return 0;
 }
 return 1000/e;
}

卸载监听陷阱

class pausMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change',this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
    //卸载时创建一个新的对象
     AppStateIOS.removeEventListener('change',this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}
//正确
class pausMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this)
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change',this._onAppPaused);
    }
    componentWillUnmount(){
    //卸载时创建一个新的对象
     AppStateIOS.removeEventListener('change',this._onAppPaused);
    }
    onAppPaused(event){
    }
    
    //正确
    class pausMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change',this.onAppPaused);
    }
    componentWillUnmount(){
    //卸载时创建一个新的对象
     AppStateIOS.removeEventListener('change',this.onAppPaused);
    }
    onAppPaused = (event)=>{
    }
}

函数参数默认值

function foo(height=50,color=‘red’){
}