官方文档、环境配置

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

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

初始启动

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

observable和autorun(mobx@5)

监听基本数据类型

import { observable, autorun } from "mobx";

const observableNumber = observable.box(10)
const observableName = observable.box('zzf')

// 自动监听基本数据类型observableNumber变化
// auto首先默认会自动执行一次
autorun(() => {
  console.log(observableNumber.get())
})
setTimeout(() => {
  observableNumber.set(20)
}, 1000);

// 监听基本数据类型observableName变化,两个监听互不干扰
// 需要用到什么就监听什么数据
autorun(() => {
  console.log(observableName.get())
})
setTimeout(() => {
  observableName.set('zzz')
}, 2000);

function App() {
  return (
    <div className="App">App</div>
  );
}

export default App;

SEO搜索引擎优化

SSG静态站点(适用于文档型的网站)

• SSG 应用一般在构建阶段就确定了网站的内容。
• 如果网站的内容需要更新了，那必须得重新再次构建和部署。
• 构建 SSG 应用常见的库和框架有： Vue Nuxt、 React Next.js 等。

• 使用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

uniapp

原生VS跨平台

• 原生开发的特点：

 性能稳定，使用流畅，用户体验好、功能齐全，安全性有保证，兼容性好，可使用手机所有硬件功能等

缺点

 但是开发周期长、维护成本高、迭代慢、部署慢、新版本必须重新下载应用

丰富的图表类型

• 提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合；

强劲的渲染引擎

• Canvas、SVG 双引擎一键切换，增量渲染等技术实现千万级数据的流畅交互；

简单易容，上手容易

• 直接通过编写配置，便可以生成各种图表，并且支持多种集成方式；

活跃的社区

• 活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求；

SVG介绍

• SVG 全称为（Scalable Vector Graphics），即可缩放矢量图形。
• SVG 是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画。
• SVG 规范是万维网联盟(W3C) 自 1998 年以来开发的标准。
• SVG 图像可在不损失质量的情况下按比例缩放，并支持压缩。
• 基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示。SVG

2D动画transform

常见的函数transform function有：

• 平移：translate(x, y)

• 缩放：scale(x, y)

• 旋转：rotate(deg) 在lineTo前使用

• 倾斜：skew(deg, deg)

• CSS 中的每个元素都有一个坐标系，其原点位于元素的左上角，左上角这被称为初始坐标系。

• 用transform时，坐标系的原点默认会移动到元素的中心(重点)。

• 因为transform-origin属性的默认值为50% 50%，即该原点将会作为变换元素的中心点。

• 用transform属性旋转或倾斜元素，会变换或倾斜元素的坐标系。并且该元素所有后续变换都将基于新坐标系的变换。

• 因此，transform属性中变换函数的顺序非常重要——不同的顺序会导致不同的变换结果。