react 进阶（react进阶之路百度网盘）

React-day01 入门知识

React介绍

官网

React开发环境初始化 SPA

脚手架初始化项目（方便，稳定）*
通过webpack进行初始化
配置镜像地址

开发工具配置
元素渲染
组件及组件状态

函数定义组件(无状态)
类定义组件(有状态)*
组合组件
Props属性*
State状态*

组件生命周期
事件处理

定义组件事件
属性初始化器语法*
参数传递*
计数器游戏

style样式(JSX写法)
style样式

React 进阶提升

条件渲染
受控组件*
状态提升*

组件数据流

TODO-LIST
设置服务器端口

列表渲染
条目PropTypes检查类型

export & import
Refs 和 DOM
非受控组件*
路由
组合

包含
特殊实例

三方UI设计语言
打包及发布
今天所有安装的包

React-day03 RN移动端开发

了解React-Native
了解React-Native工作流程
创建第一个React-Native项目 *
了解React-Native项目及结构
开发资料
项目开发

路由(react-native-router-flux)
开发组件(swiper)
网络请求(fetch) *
长列表(FlatList) *
滚动视图(ScrollView)

日志与调试
打包及发布
今天所有安装的包

当能够说这么一句话你才算是掌握了：切已经Out了

Facebook脸书-> Instagram照片墙。于2013年5月开源

帮助开发者简洁、直观地构建高性能的UI界面

高效：模拟Doument Object Model，减少DOM交互 (速度快)
灵活：可以与已知的库配合使用
声明式：帮助开发者直观的创建UI
组件化：把相似的代码通过封装成组件进行复用

官网

官方网站： https://reactjs.org/

中文网站： https://doc.react-china.org/

react ：React开发必备库
react-dom：web开发时使用的库，用于虚拟DOM，移动开发使用ReactNative

脚手架初始化项目（方便，稳定）*

执行初始化命令：

npm和yarn命令对比

通过webpack进行初始化

步骤文档

配置镜像地址

查看当前镜像配置：npm config listnpm config get registry
设置当前镜像地址npm config set registry https://registry.npm.taobao.org/npm config set disturl https://npm.taobao.org/dist

添加JavaScript语法支持
安装开发插件： JavaScript，npm, markdown, Node.js, Reactjs

元素是构成React应用的最小单位

React对JSX语法转换

转换js后

组件可以将界面分割成独立的、可复用的组成部分。只需要专注于构建每个单独的部分。比如按钮，对话框，列表，输入框都是组件。

组件可以接受参数（props）,可以返回一个在页面上展示的React元素

函数定义组件(无状态)

无状态组件：一般用于简单的页面展示

类定义组件(有状态)*

class 必须要ES6支持

有状态组件：可以维护自己的状态State信息，完成更加复杂的显示逻辑

以上两种组件效果在React相同

类定义组件名称必须是大写

建议在return元素时，用小括号()包裹

组合组件

组件之间可以相互引用，通常把App作为根组件

注意：组件的返回值只能有一个根元素，所以用一个div包裹所有Hello元素
在google插件市场搜索安装React查看DOM结构

Props属性*

props有两种输入方式：

引号"" ：输入字符串值，
大括号{} ：输入JavaScript表达式，大括号外不要再添加引号。

props的值不可修改，属性只读，强行修改报错
类定义组件中使用props需要在前边加 this.

State状态*

自动更新的时钟

应用一般执行一次ReactDOM.reader() 渲染

在组件内部进行更新，每个时钟内部都维护一个独立的date信息

在组件内部使用局部state状态属性

state特性：

state 一般在构造函数初始化。this.state={...}
state可以修改，必须通过this.setState({...})更新并渲染组件
调用setState更新状态时，React最自动将最新的state合并到当前state中。

生命周期常用的函数

componentDidMount：组件已挂载，进行一些初始化操作

componentWillUnmount：组件将要卸载，进行回收操作，清理任务

定义组件事件

属性初始化器语法*

参数传递*

参数要和调用者传入的一一对应

计数器游戏

直接写在style属性中

通关变量声明样式并引用

#脚手架安装和样式处理

使用yarn安装脚手架

有道翻译Api: key

直接写在style属性中

通关变量声明样式并引用

通过css样式文件设置

创建css文件

? 2. 引入

? 3. 使用className

[TOC]

if条件渲染: 如果用户输入的金额>=10元, 购买成功

&& 连接符判断

三目运算符判断

阻止组件渲染 (很少用到)

在html中, input, select, textarea这些表单元素都会默认维护自己的状态，React通过受控组件将用户输入的内容保存到state中，通过渲染表单组件，控制用户输入之后发生的变化。

如果有多个组件需要共享状态数据，把要MoneyInput共享的数据state={money, unit}提升到他们最近的共同父组件App中。

数据源要保证只有一个，并保持自上而下的数据流结构。

组件数据流

用户在MoneyInput组件中输入了数值
在input的onChange函数中，监听到了变化，把money传给父组件
父组件设置并更新到唯一的state中，状态提升完毕
因为this.setState被执行，故而render被重新触发，根据unit，money转成不同的货币
父组件通过money={rmb}属性设置给MoneyInput组件，this.props.money

GTD软件: Getting things done

在package.json的scripts下配置

"start": "SET PORT=3456 & react-scripts start",

列表渲染

.map可以帮我们把数组转换成元素的数列
.filter 根据每个条目返回的boolean, 决定去留. true保留, false删除
列表key注意:

key的作用时在DOM中的元素被添加或移除时, 帮助react识别是哪些元素发生了变化
每个元素key需要是当前列表唯一的字符串, 一般使用id, 没有id时才使用index索引
key要放在列表条目的根组件 (有嵌套时)

条目PropTypes检查类型

导包 import PropTypes from 'prop-types';
propTypes只在开发模式下进行检查，当给组件传入错误的值（或未传值），JS控制台会打印警告信息。在生产环境不会进行检查（影响页面效率）
属性类型及Required检查

设置属性默认值(当父组件没有传入指定值时，使用默认值)

ref用来访问DOM节点或React元素 ref是reference的缩写

使用方式：

在组件得属性中添加ref={(input) => {this.inputNode = input}}
在需要用其值或引用的地方通过this.inputNode即可

注意事项:

ref在html元素上使用， ref的引用的是DOM节点
ref在自定义的class组件上使用，ref的引用的是当前组件的实例
ref不可以在函数式声明的组件上使用，因为其没有实例，但是可以在内部使用ref

如果希望表单数据由DOM处理，可以使用非受控组件方式。
常见的表单受控组件及设置/获取值方式如下：

在受控组件和非受控组件之间抉择：参考文档

如果表单的UI交互非常简单：通过refs实现非受控组件即可。

如果表单的UI交互比较复杂：官方推荐使用受控组件实现表单，把DOM节点/React元素的值或数据交给React组件处理(保存到state)。

参考链接1

中文参考文档

安装：

yarn add react-router-dom

导入Module：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

声明路由器及路由：

通过Link跳转

通过path声明路由路径；
exact={true}表示严格匹配path
通过component指定要渲染的组件；
通过render属性配合箭头函数，可以给组件传入属性参数。
通过Link的to属性指定要跳转的路径

React提供了强大的组合模型，官方建议使用组合（而非继承）来复用组件代码。

包含

当一些组件不能提前知道他们的全部子组件是什么，比如Dialog，Menu, Sidebar
通过组件内render声明{props.children}，使用时在标签内部填入自定义的元素内容即可。
通过自定义字段可以使组件拥有多个自定义元素入口。比如subTitle

声明：

使用：

特殊实例

蚂蚁金服：https://ant.design/index-cn
Material-UI：https://material-ui.com/

npm run build

运行服务器代码: build包含index.html文件的文件夹

前台运行: serve -s build

后台运行(指定端口80): nohup serve -s build -l 80 &

react-router-dom 路由

应用场景：页面切换

安装方式：yarn add react-router-dom

serve 开启服务

应用场景：部署打包好的应用

安装方式：yarn global add serve

移动开发

[TOC]

Facebook发起的开源的一套新的APP开发方案，Facebook在当初深入研究Hybrid开发后，觉得这种模式有先天的缺陷，所以果断放弃，转而自行研究，后来推出了自己的“React Native”方案，不同于H5，也不同于原生Native，更像是用JS写出原生应用

优点

开发成本小于Native模式 Andriod-Java-Kotlin IOS-OC-Swift
性能体验高于Hybrid
一次学习,跨平台开发Android和iOS, 小程序
社区繁荣

缺点

不同平台代码有所区别
开发人员学习有一定成本

几种开发技术对比：应用质量和开发效率的平衡折衷的结果

项目开发：使用Node初始化项目（需要安装Node），使用JavaScript/JSX语言开发
语言翻译：Python, C++将js翻译成java代码（需要安装Python2）
代码编译：Android-SDK将java编译成字节码（二进制），打包成可安装的apk（需要JDK8 & Android-SDK）
安装运行：通过Adb工具，把apk运行到Android模拟器

安装脚手架react-native-cli 同时安装新的版包管理工具npm install -g yarn react-native-cli
创建项目：doubanMovie（在不包含中文的目录执行）react-native init xxx --version react-native@0.55.4
运行项目

打开USB调试, 配置SDK

ANDROID_HOME=G:Android-SDK
PATH=%PATH%;%ANDROID_HOME%platform-tools
adb devices查看已连接设备

连接模拟器: adb connect 127.0.0.1:62001
更改gradle路径doubanMovieandroidgradlewrappergradle-wrapper.properties

distributionUrl值修改为file:///E:/Lesson/bc1/React/day03/Resource/gradle-2.14.1-all.zip 直接复制过来的路径要把反斜线改成正斜线/

在项目根目录执行react-native run-android

运行期间会开启一个Node服务，不要关闭

第一次运行报错，需要在设备上设置app的Node服务地址

解决方式：打开app > 菜单按钮 > Dev Settings -> Debug server host ...

填写服务ip和端口号, 注意冒号用英文半角，重启服务，重启应用

index.js 项目入口文件
App.js 项目根组件，用户看到的首页组件
package.json 项目配置文件
app.json 配置项目名称

React-Native与React对比

组件写法

RN提供View,Text组件，没有html的dom元素

View -> div 布局容器

Text -> p 显示文字

样式写法

使用const styles = StyleSheet.create({...})

React-Native平台相关代码处理

官方文档

环境初始化：https://facebook.github.io/react-native/docs/getting-started.html
组件及APIs：https://facebook.github.io/react-native/docs/components-and-apis.html

中文文档

环境初始化：https://reactnative.cn/docs/0.51/getting-started.html#content

技术博客

lcode.org

在github.com搜索react

https://github.com/poplartang 在Stars 搜索React

路由(react-native-router-flux)

react-native-router-flux
源码地址：https://github.com/aksonov/react-native-router-flux

应用场景：在RN项目中进行路由跳转时使用

安装方式：yarn add react-native-router-flux

使用：Router（路由）: 一般写在项目的根组件Stack （栈）：给Scene场景提供容器Scene（场景）：设置路由跳转规则Actions （动作）：触发路由跳转

注意事项：

最新版的react-native-router-flux会在react-native 0.55.4版本出现isMounted(...)警告，可在App.js添加以下代码忽略警告。随后两个框架更新后，此警告也可消除。

触发路由：三种方式（注意导入Actions组件）

弹性布局参考: http://www.runoob.com/w3cnote/flex-grammar.html

开发组件(swiper)

开源轮播图react-native-swiper
源码地址：https://github.com/leecade/react-native-swiper

应用场景：在首页展示轮播图

安装方式：yarn add react-native-swiper

常用属性:

网络请求(fetch) *

Axios
fetch
在 componentDidMount执行请求并在回调中执行setState

长列表(FlatList) *

长列表优化

加载指示器

条目点击跳转

滚动视图(ScrollView)

发送网络请求
渲染视图

查看RN日志：

android也可在PC控制台输入

adb logcat *:S ReactNative:V ReactNativeJS:V

应用内的错误与警告

Debug调试

Chrome开发者工具

在Android设备菜单中选择“Debug JS Remotely”，PC会自动通过Chrome浏览器打开调试页面 http://localhost:8081/debugger-ui （需要自行安装Chrome）。这里注意自动打开的主机地址可能不是localhost，需要手动改成localhost （不修改，则手机页面可能是空白）
在Chrome浏览器按Ctrl + Shift + I或F12打开控制台
选中Sources选项卡 -> Network标签 -> debuggerWorker.js 打开指定组件文件即可
如果没有没有debuggerWorker.js, 查看页面最下边的Status提示。

Status: Another debugger is already connected

另一个调试器已连接，直接使用或关闭那个调试器

Status: Waiting, press Ctrl R in simulator to reload and connect.

等待中，建议重新加载模拟器

可以在代码中打断点，Console中执行js代码打印变量、执行脚本
关闭调试：在Android设备菜单中选择“Stop Remote JS Debugging”即可

参见中文官网文档：https://reactnative.cn/docs/0.51/signed-apk-android.html#content
多端统一开发框架：https://github.com/NervJS/taro 生成能运行在微信小程序、H5、React Native 等的应用
修改图标

[项目名称]androidappsrcmain esmipmap-xhdpi

react-native-router-flux 路由