官方文档、环境配置

https://www.react-native.cn/

开发过程如遇到截断性报错，请按照报错源提示路径，冷静细心查找报错原因，解决问题!!!

初始启动

1. 插拔数据线
2. adb reverse tcp:8081 tcp:8081
3. yarn dev(重要：开发模式下必须先确保手机打开了usb调试)
4. 手机点开app

• 使用hooks可以帮助我们在函数式组件中实现类似于class类组件中的state，生命周期的效果
• hooks针对于函数式组件来使用的，不能在class类组件中使用，不能在普通函数中使用hooks，但是可以在以use开头的函数中使用hooks，react会将其认为是自定义hook
• 类组件中使用hooks方式可以自定义高阶函数中使用hooks
• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用

• 安装React Router：
  • 安装时，我们选择react-router-dom；
  • react-router会包含一些react-native的内容，web开发并不需要；

npm install react-router-dom

学习代码地址

纯函数

• 确定的输入，产生确定的输出
• 执行后不会产生任何副作用的函数

store

定义的状态用于管理数据

action

通过派发actions修改store中的数据，action是一个普通的JavaScript对象，用来描述这次更新的type和content

taro基本使用

文件下载(iframe、a)

const getAwardStudentTemplate = () => {
  exportAwardStudentsList({}).then((res) => {
    if (res.data.Data !== null) {
      const a = document.createElement('a') // a标签导出下载
      a.href = res.data.Data.DownloadUrl
      a.click()
      a.remove()
    }
  })
  getImportFileTemplate({ params: { TabName: 'AwardA' } }).then((res) => {
    if (res.data.Data !== null) {
      let downloadUrl2 = res.data.Data.DownloadUrl
      let iframe = document.createElement('iframe') // iframe导出下载
      iframe.id = 'iframe2'
      iframe.style.display = 'none'
      document.body.appendChild(iframe)
      iframe.src = downloadUrl2
    }
  })
}

• 使用hooks可以帮助我们在函数式组件中实现类似于class类组件中的state，生命周期的效果
• hooks针对于函数式组件来使用**的，不能在class类组件中使用
• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用

useState

• 基本使用

import React, { useState } from "react";

export default function HookState() {
  // useState传入一个默认值将赋值给返回数组中的第一个数，第二个数为函数，可针对该数进行专门的赋值
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>当前计数：{count}</h3>
      <button
        onClick={(e) => {
          setCount(count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={(e) => {
          setCount(count - 1);
        }}
      >
        -1
      </button>
    </div>
  );
}

Redux

• Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理
• Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）
• store存储，将数据存入至一个公共的对象中，进行数据共享
• Redux要求所有数据的变化，必须通过派发（dispatch）action来更新；
• 如何将state和action联系在一起？reducer
  • reducer是一个纯函数
  • reducer做的事情就是将传入的state和action结合起来生成一个新的state

TypeScript

typescript简介

• 由微软开发
• ts以js为基础构建的语言
• ts是一个js的超集
• 是可以在任何支持javascript的平台中执行
• ts扩展了js,并添加了类型
• ts不能被js解析器直接执行，需经过编译后成js再执行
• 拥有丰富的配置选项，可选择编译成不同版本的js，适配不同的浏览器

react中axios的使用、react-router(v5)

react中axios的使用

• axios是目前前端使用非常广泛的网络请求库，包括Vue作者也是推荐在vue中使用axios；

• 主要特点包括：在浏览器中发送 XMLHttpRequests 请求、在 node.js 中发送 http请求、支持 Promise API、拦截请求和响应、转换请求和响应数据等等；

• axios: ajax i/o system.