reactNative项目实例

H大
Code

发布于：2020年11月22日

开发环境安装

主要参考与英文文档。

  1. 安装 python2 node
  2. 安装 Android Studio
    • 配置 Android 虚拟机
    • 设置环境变量
  3. 打开 Android 虚拟机
  4. reactNative 项目初始化
    1
    2
    3
    4
    npx react-native init xxx   //新建xxx项目
    cd xxx
    npx react-native start
    npx react-native run-android //启动 Android app
  5. Welcome to React

RN 基础知识

ES6 语法糖

ES6 全称为 ECMASript 的第六个版本，也可称为 ES2015。

let 与 const

  • let 用于变量声明，与 var 作用域不同，变量不会提升，变量不可重复声明
  • const 用于常量声明，变量值不可更改；但可以使用方法对 const 对象值修改。

模板字符串

···，可以嵌套使用

1
2
3
let str = 'hello'
console.log(`hello ${str==='world' ? '1' : '0'}`)
console.log(`${str} world`)

默认参数

1
2
3
4
5
6
function multiply(a,b=3){
  return a*b;
}

console.log(multiply(5))  //15
console.log(multiply(5,null))  //0

箭头函数

  • 更加简短，不绑定 this, 其 this 指的是上下文的 this
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const arr = [1,2,3,4,5]

    //遍历这个数组
    //arr.map() 有三个函数
    arr.map(function(item)){
      return item*2
    }

    //es6
    arr.map((item)=>{
      return item*2
    })

    //参数和返回值单一时，更简单
    arr.map(item =>  return item*2
    )
  • this 的指向
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Person(){
      this.age=0;
      //每个一秒执行
      setInterval(function growUp(){
        this.age++ //this 指向的是 setInterval 的 this，并不是 Person p 的this
      },1000)
    }

    let p =new Person();

    setTimeout(function(){
      console.log(p.age);
    },3000)     //0
    如何 3s 后是三岁？绑定 Person p 的 this 到 setInterval 上
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Person(){
      this.age=0;
      var that = this;
      setInterval(function growUp(){
        that.age++ 
      },1000)
    }

    let p =new Person();

    setTimeout(function(){
      console.log(p.age);
    },3000)       //3
    箭头函数
    1
    2
    3
    4
    5
    6
    7
    8
    function Person(){
      this.age=0;
      setInterval(()=>this.age++ ,1000)
    }

    let p =new Person();

    setTimeout(()=> console.log(p.age),3000)       //3

    解构赋值

    给对象赋值，传入参数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 对象
    let user={name:'hpl',age:18}

    //别名
    let name = ''
    let {name:userName,age}=user
    //或者
    ({name,age}=user)

    //数组
    let arr = [1,2]

    let [a,b]=arr //a=1,b=2

    //传参
    function test(user){
      console.log(user.name)
    }
    //es6
    function test({name}){
      console.log(name)
    }

对象字面量

是解构赋值的逆过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let name='hpl'
let age=18

let user={
  name:name,
  age:age
}

//es 6
let user={
  name,
  age,
  say(){
    console.log(`my name is ${this.name}`)
  }
}

展开语法

  • 对应赋值
    1
    2
    3
    4
    5
    6
    function setValue(x,y,z){
      ···
    }
    let arr = [1,2,3]

    setValue(...arr)
  • 数组赋值
    浅拷贝，只展开一层
    1
    2
    3
    4
    5
    6
    7
    let arr =[1,2,3,[4,5,6]]

    let arr2 = [...arr]
    arr2[3].push(7)

    console.log(arr) 
    //Array [1, 2, 3, Array [4, 5, 6, 7]]
  • 对象赋值
    1
    2
    3
    4
    5
    6
    let obj1= {foo:'bar', x:18}
    let obj2= {foo:'bax', y:20}

    let mergeObj={...obj1,...obj2}
    console.log(mergeObj) 
    //Object { foo: "bax", x: 18, y: 20 }

    剩余语法

    凝聚多个元素为单个元素，即展开语法的 逆过程。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function sum(){
      return aguments;
    }
    //es6
    function sum(a,b,...rest){
      return rest.reduce((previous,current)=>{
        return previous + current
      })
    }
    console.log(sum(1,2,3,4,5)) //12

    class

    new 关键字的作用是 将 obj的 proto 绑定到构造函数的 prototype 属性上
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    function Person(name,age){
      this.name=name;
      this.age=age
    }

    Person.prototype.say = function(){
      return this.name
    }
    let person = new Person('hpl',18);
    console.log(person.say())


    //es6
    class Person{
      //创建
      //只能有一个
      constructor(name,age){
        this.name=name,
        this.age=age
      }
      say(){
        return `my name is ${this.name}`
      }
    }

    let person = new Person('hpl',18);
    console.log(person.say())

class 的继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//es5
function Person(name,age){
  this.name=name;
  this.age=age
}

Person.prototype.say = function(){
  return this.name
}

function Superman(name,age,address){
  this.address=address
  Person.call(this,name,age)
}

//Object.create 将Person.say() 指向了 Superman  
Superman.prototype = Object.create(Person.prototype)
SUperman.protorype.constructor = Superman

let superman = new Superman('hpl',18,'Sun');
console.log(superman.say())

//es6
class Person{
  constructor(name,age){
    this.name= name
    this.age= age
  }
  say(){
    console.log(this.name)
  }
}
class Superman extends Person{
  constructor(name,age,address){
    super(name,age)
    this.address =address
  }
  fly(){
    console.log('i can fly')
  }
}

let superman = new Superman('hpl',1000,'Sun')
superman.say()

Promise 构造函数

异步编程,是指使用回调的方式处理异步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function mockAjax(method,url,data,success,error){
  setTimeout(()=>{
    let time =Math.random()*10;
    if(time < 5){
      const result={
        status:100,
        msg:'success',
        data:[]
      }
      success(result)
    }else{
      error('接口地址错误')
    }
  },1000)
}

function getList(userId){
  mockAjax('GET','/role?userId'+userId,null,(data)=>{
    console.log(data);
    mockAjax('GET','/product/list?roleId'+data.roleID,null,(data)=>{
      console.log(data)
    })
  },(error)=>{
    console.log(error)
  })
}

用 Promise 解决回调函数难以管理的难题。Promise 的三种状态：

  • pending 初始状态
  • fulfilled 操作成功
  • rejected 操作失败
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let promise = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    let time = Math.random()*10
    if(time<5){
      console.log('异步请求')
      resolve('数据')
    }else{
      reject('错误')
    }

    },1000)
})

promise.then((data)=>{
  console.log('data',data)
})

promise.catch(error=>{
  console.log(error)
})
//promise 也可写为链式调用
promise.then((data)=>{
  console.log('data'.data)
}).catch(error=>{
  console.log(error)
}).finally(()=>{
  console.log('清除数据')
})

于是，上文使用 Promise 可写为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function mockAjax(method,url,data){
  return new Promise((resolve,reject)=>{
      setTimeout(()=>{
    let time =Math.random()*10;
    if(time < 5){
      const result={
        status:100,
        msg:'success',
        data:[]
      }
      resolve(result)
    }else{
      reject('接口地址错误')
    }
  },1000)
  })

}

function getList(userId){
  mockAjax('GET','/role?userId'+userId,null).then(data=>{ 
    return mockAjax('GET','/product/list?roleId'+data.roleID,null).then(data=>console.log(data))

  }).catch(()=>console.log('用户角色请求失败'))
}

getList(1)

Promise 的并行异步请求，两个请求均成功之后才渲染页面

1
2
3
4
5
//伪代码
let userId=1
let getUser =mockAjax('GET','/user?userId'+userId,null)
let getRole =mockAjax('GET','/role?userId'+userId,null)
Promise.all([getUser,getRole]).then().catch()

Promise 的超时异步请求，两个或两个以上的请求只要一个成功返回后就渲染页面

1
2
3
4
5
6
//race 竞争伪代码
function timeoutAjax(promise,ms){
  Promise.race([promise,new Promise((resolve,reject)=>{
  reject(new Error('请求超时))
},ms)])
}

generator 函数

用同步的思维操作 异步 请求。generator 函数并不会立即执行，只会返回一个对象。要执行generator 函数，需要调用该对象的 .next 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function *gen(){
  console.log('running')
}

let g = gen()
//异步请求
function mockAjax(method,url,data){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      const result ={status:100,msg:'success',data}
      resolve(result)
    },1000)
  })
}

function* gen(){
  //1.根据用户ID获取角色信息

  //2.根据角色信息获取商品列表
}

ES6 模块

javaScript 把所有变量和函数均可以相互访问，但在大型项目时这个特性并不友好，因此，ES6 支持模块管理使 Js 如虎添翼。

1
2
3
4
5
6
7
import React,{Component} from 'react';

class User extends Component{
  ···
}

export default User;

react 基础

JSX 语法

渲染单位为一个标签 或用 <></> 进行对多个标签包裹。

组件

组建的定义包括 定义函数 和 定义class 两种方法。其中，函数组件又与 class 组件共有两点不同。
class 组件是构造函数的语法糖，每一个 class 组件均是由 new 函数创建的实例，因此有自己的 state 及生命周期函数。

state 与渲染

react 的渲染是自动的，当且仅当 state使用setState方法来改变其组件的值时，会自动得 调动redner()

运行一下

Folding box

标题

shell提取文字的一些方法

https://hasaik.com/posts/19c94341.html

表格

<!– 工具名 描述 备注
–>

gist

内容

内容

更新于：2020年12月2日

react

project

评论