ReactNative语法基础

ES6特性
类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const
1、类

引入类的概念，让其具有面向对象的开发

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
}
 
2、模块化

模块之间的相互调用关系是通过export来规定模块对外暴露的接口，通过import来引用其它模块提供的接口

export var name = 'Rainbow';                        //导出变量
export const sqrt = Math.sqrt;                      //导出常量

var name = 'Rainbow';                               //导出多个变量
var age = '24';
export {name, age};

export function myModule(someArg) {                 //导出函数
  return someArg;
}

export default class MyComponent extends Componet{  //导出组件
    render(){
        <Text>自定义组件</Text>
    }
}
 
定义好模块的输出以后就可以在另外一个模块通过import引用

import {myModule} from 'myModule';    //导入函数
import {name,age} from 'test';        //导入变量
import MyComponent from 'MyComponent' //导入组件
 
3、箭头函数

箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题

()=>{
    alert("foo");
}
 
错误示范

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    
    }
}
 
正确示范

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
    
    }
}
 
4、函数参数默认值

function foo(height = 50, color = 'red'){}
 
5、模板字符串

var name = `Your name is ${firstname} ${lastname}`
 
6、解构赋值

从数组中获取值

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
 
交换两个变量的值

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
 
获取对象中的值

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'
};

const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age);  // "18"
console.log(city); // "Shanghai"
 
7、延展操作符

延展操作符...，可以对数组、对象、string进行展开操作

myFunction(...iterableObj);             //对函数展开
[...iterableObj, '4', ...'hello', 6];   //对数组展开
let objClone = { ...obj };              //对对象展开
 
对数组展开

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2]; // 将 arr2 中所有元素附加到 arr1 后面并返回
 
对对象展开

var params = {
    name: '123',
    title: '456',
    type: 'aaa'
}

var { type, ...other } = params;

<CustomComponent type='normal' number={2} {...other} />
//等同于
<CustomComponent type='normal' number={2} name='123' title='456' />

8、对象属性简写

简写前

const name='Ming',age='18',city='Shanghai';

const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);

简写后

const name='Ming',age='18',city='Shanghai';

const student = {
    name,
    age,
    city
};
console.log(student);

9、Promise

Promise是异步编程的一种解决方案，在不使用Promise的时候需要嵌套多层代码

setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒后输出"Hi"
    }, 1000);
}, 1000);
 
使用Promise后，只需要通过then操作符进行操作

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
        console.log("Hello"); // 1秒后输出"Hello"
        return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });
 
10、Let与Const

const与let都是块级作用域

{
  var a = 10;   // 全局作用域
}
console.log(a); // 输出10

{
  let a = 10;   // const或let，块级作用域
}
console.log(a); //-1 or Error“ReferenceError: a is not defined”
 
ES7特性
includes()
指数操作符
1、includes()

includes()函数用来判断一个数组是否包含一个指定的值

arr.includes(x)
//等同于
arr.indexOf(x) >= 0   
 
2、指数操作符

引入了指数运算符**，**具有与Math.pow(..)等效的计算结果

console.log(Math.pow(2, 10)); // 输出1024
console.log(2**10);           // 输出1024
 
ES8特性
async/await
Object.values()
Object.entries()
String padding
函数参数列表结尾允许逗号
Object.getOwnPropertyDescriptors()
1、async/await

async/await是异步函数，结合Promise，在使用上使整个代码看起来很简洁

//登陆用户
login(userName) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('1001');
        }, 600);
    });
}
//获取用户数据
getData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === '1001') {
                resolve('Success');
            } else {
                reject('Fail');
            }
        }, 600);
    });
}

// 不使用async/await
doLogin(userName) {
    this.login(userName)
        .then(this.getData)
        .then(result => {
            console.log(result)
        })
}

// 使用async/await
async doLogin(userName) {
    const userId=await this.login(userName);
    const result=await this.getData(userId);
}
doLogin('Hensen').then(console.log); //通过then获取异步函数的返回值

async/await支持并发操作，我们通过Promise.all来实现await的并发调用

async function charCountAdd(data1, data2) {
    const [d1,d2]=await Promise.all([charCount(data1),charCount(data2)]);
    return d1+d2;
}

charCountAdd('Hello','Hi')
    .then(console.log)
    .catch(console.log); //捕捉整个async/await函数的错误

function charCount(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data.length);
        }, 1000);
    });
}

2、Object.values()

遍历对象的所有值

const obj = {a: 1, b: 2, c: 3};

const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]

const values=Object.values(obj1);
console.log(values);//[1, 2, 3]

3、Object.entries()

遍历对象的所有key和value

Object.keys(obj).forEach(key=>{
    console.log('key:'+key+' value:'+obj[key]);
})

for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}

4、String padding

PadStart和PadEnd函数可向左、右填充字符串（如空格），如果目标长度太短则不填充，如果目标长度有多余的空位，则填补参数padString的值

// String.prototype.padStart(targetLength [, padString])
'hello'.padStart(10); // '     hello'
'hello'.padStart(10, '0'); // '00000hello'
'hello'.padStart(); // 'hello'
'hello'.padStart(6, '123'); // '1hello'
'hello'.padStart(3); // 'hello'
'hello'.padStart(3, '123'); // 'hello';

// String.prototype.padEnd(targetLength [, padString])
'hello'.padEnd(10); // 'hello     '
'hello'.padEnd(10, '0'); // 'hello00000'
'hello'.padEnd(); // 'hello'
'hello'.padEnd(6, '123'); // 'hello1'
'hello'.padEnd(3); // 'hello'
'hello'.padEnd(3, '123'); // 'hello';

5、函数参数列表结尾允许逗号

var f = function(a,b,c,d,) {}

6、Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()获取一个对象的所有自身属性的描述符

const obj2 = {
    name: 'Jine',
    get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)

Prop
Prop可以理解为组件中的属性，它可以通过外界传递进来的参数，类似于构造函数的参数

1、属性参数

使用自定义组件的时候，传递参数到自定义组件中

<View>
    <PropsText
        name = "小明",
        age = 18
    />
</View>

2、默认属性

在React中可以提供默认参数defaultProps属性

class PropsText extends Component{
    
    static defaultProps = {
        name: "小俊",
        age: 18
    }
    
    render(){
        <Text>Hello{this.props.name}</Text>
    }
}

3、属性检测

在React中的参数中可以增加类型判断propTypes属性，如果类型不准确，则会报错通知开发者

class PropsText extends Component{
    
    static defaultProps = {
        name: "小俊",
        age: 18
    }
    
    static propTypes = {
        name:PropTypes.string,
        number:PropTypes.number.isRequired
    }
    
    render(){
        <Text>Hello{this.props.name}</Text>
    }
}

State
State可以理解为组件中的成员变量，通过改变成员变量的值去更新组件

1、初始化State

通过getInitialState()初始化state，在组件的生命周期中仅执行一次

getInitialState(){
    return {
        favorite:false
    };
}

2、更新State

通过this.setState()方法来更新state，组件就会重新渲染，执行render()

handleClick:function(event){
    this.setState({
        favorite:!this.state.favorite
    });
},

render(){
    var text=this.state.favorite? 'favorite':'un favorite';
    return (
      <div type='button' onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
}

ref
ref可以作为Dom节点的标识，可以获取到某个Dom节点

1、获取组件实例

<View>
    <Text onPress={()=>{
        this.refs.refText  //获取组件实例
        this.refs[refText] //获取组件实例
    }}
    <Text ref="refText"/>
</View>

2、获取组件方法

<View>
    <Text onPress={()=>{
        this.refs.refText.getSize();  //获取组件方法
        this.refs[refText].getSize(); //获取组件方法
    }}
    <Text ref="refText"/>
</View>

this
在方法中使用this对象，会报错找不到，原因是这里的this指的是当前_onPressItem方法中的对象

_onPressItem() {
    let navigator = this.props.navigator;
}

解决方法是在构造函数中将当前的方法的this对象进行绑定

constructor(props) {
    super(props);

    this.state = {}
    this._onPressItem = this._onPressItem.bind(this);
}

或者在使用该方法的时候直接使用箭头函数，能自动将this对象进行绑定

<TouchableOpacity onPress={()=>{
    let navigator = this.props.navigator
}}>

</TouchableOpacity>

组件方法
1、render()

该方法表示组件创建的时候进行渲染的回调函数。它会检测this.props和this.state，并返回一个单子级组件

2、getInitialState()

该方法表示初始化组件状态，在组件挂载之前调用一次

3、getDefaultProps()

该方法表示设置组件属性的默认值，在组件类创建的时候调用一次

4、propTypes

该对象用于验证传入到组件的props的类型

5、statics

该对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。这些方法不能获取组件的props和state。如果你想在静态方法中检查props的值，在调用处把props作为参数传入到静态方法

class MyComponent extends Componet{
  
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  }
  
  render: function() {
  
  }
}

6、displayName

该字符串用于输出调试信息

7、isMounted()

该方法通常用于异步任务完成后修改state前的检查，以避免修改一个没有被渲染的组件的state。当组件被渲染到DOM，该方法返回true，否则返回false

组件生命周期
1、Mounting(装载)

getInitialState(): 在组件挂载之前调用一次。返回值将会作为this.state的初始值
componentWillMount()：服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用
componentDidMount()：在初始化渲染执行之后立刻调用一次，仅客户端有效
2、Updating(更新)

componentWillReceiveProps()：在组件接收到新的props的时候调用
shouldComponentUpdate()：在接收到新的props或者state
componentWillUpdate()：在接收到新的 props 或者 state 之前立刻调用
componentDidUpdate()：在组件的更新已经同步到DOM中之后立刻被调用
3、Unmounting(移除)

componentWillUnmount()：在组件从DOM中移除的时候立刻被调用
4、完整生命周期

持久化存储
1、基础使用

ReactNative提供AsyncStorage用于持久化保存key-value

static getItem(key: string, callback:(error, result))：根据键来获取值，获取的结果会在回调函数中
static setItem(key: string, value: string, callback:(error))：根据键来设置值
static removeItem(key: string, callback:(error))：根据键来移除项
static mergeItem(key: string, value: string, callback:(error))：合并现有值和输入值
static clear(callback:(error))：清除所有的项目
static getAllKeys(callback:(error, keys))：获取所有的键
static flushGetRequests()：清除所有进行中的查询操作
static multiGet(keys, callback:(errors, result))：获取多项数据，keys是字符串数组
static multiSet(keyValuePairs, callback:(errors))：设置多项，keyValuePairs是字符串的二维数组
static multiRemove(keys, callback:(errors))：删除多项，keys是字符串数组
static multiMerge(keyValuePairs, callback:(errors))：多个键值合并，keyValuePairs是字符串的二维数组
2、封装使用

import {
   AsyncStorage
}from 'react-native';

export default class StorageUtils{

    static get(key) {
           return AsyncStorage.getItem(key).then((value) => {
             const jsonValue = JSON.parse(value);
             return jsonValue;
        });
     }
     
     static save(key, value) {
         return AsyncStorage.setItem(key, JSON.stringify(value));
     }
     
     static update(key, value) {
         return DeviceStorage.get(key).then((item) => {
             value = typeof value === 'string' ? value : Object.assign({}, item, value);
            return AsyncStorage.setItem(key, JSON.stringify(value));
        });
     }
     
     static delete(key) {
         return AsyncStorage.removeItem(key);
     }
}

布局
1、像素

在React Native中尺寸是没有单位的，它代表了设备独立像素。运行在Android上时，长和宽的尺寸单位被解释为dp，字体的尺寸单位被解释为sp，运行在iOS上时，尺寸单位被解释为pt

2、flexBox

约束父视图的属性

flexDirection：属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式
flexWrap：属性定义了子元素在父视图内是否允许多行排列，默认为nowrap
justifyContent：属性定义了子元素的主轴的对齐方式
alignItems：属性定义了子元素的侧轴的对齐方式
约束子视图的属性

alignSelf：属性定义了flex容器内被选中项目的对齐方式
flex：属性当前元素的位置的占比权重，默认为0
其他属性

尺寸：可以定义容器的宽高
边框：可以定义容器的上下左右的边框和颜色
内边距：可以定义容器的上下左右的内边距
外边距：可以定义容器的上下左右的外边距
定位：可以定义容器的绝对位置或相对位置
调试
1、日志调试

可以通过不同级别的日志就行输出调试

console.warn()
console.error()
 
2、Chrome调试

在开发中遇到最大的问题是Window下的Chrome调试，尝试了很久后终于找到可调试的办法

摇一摇打开调试菜单，选择Debug JS Remotely
在弹出来的Chrome中将ip地址改为localhost，刷新Chrome
摇一摇打开调试菜单，选择Reload
F12打开开发者界面，进行断点调试
————————————————
版权声明：本文为CSDN博主「Hensen_」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_30379689/article/details/88936894