React以及生态圈
React生态圈中技术:
ReactJS ReactNative ReactVR(React360)
Redux…
ReactRouter ReactNavigation AntDesign 。。。
概述:
slogan:learn once,write anywhere(只需要学习一次react中的核心概念，就可以使用reactjs写网页，使用reactnative写nativeapp，使用react360来实现虚拟现实的app)

1、reactjs（才用react实现网页编程）
1.1 3w1h
what?
reactjs是facebook,一个编写ui界面的js库
when?
reactjs就是为了实现DOM操作非常频繁的应用场景(VDOM:virtual DOM 虚拟DOM)
why?
组件化的开发方式
引入了VDOM
单向数据流
。。。
how?
搭建环境
方式1:cli
npx create-react-app my-app
cd my-app
npm start

   方式2:引入对应的js文件找到C:\xampp\htdocs\codes\forStu\react\reactjs文件\ 的目录;拷贝三个js文件到C:\xampp\htdocs\codes\reactjs\jsreact.js...编程方式1.2 第一个demo知识点1:方法ReactDOM.render(a,b) //方法：将a渲染到b这个地方去知识点2:jsx知识点3:babel 1.3 核心概念①jsx语法jsx只是js语法的一个扩展：①允许在js中直接写标签 < ②在jsx中通过花括号来执行一些表达式 {babel：编译器 支持将jsx、es6转换为浏览器能识别的js注意:不可以直接渲染多个标签(放在一个容器)每一个标签有开始和结束标记(比如<input/>)优缺点:更方便的封装视图提高效率jsx需要通过babel来转换（class->className for-》htmlFor...）jsx将数据和视图揉在一起②component组件:是可被反复使用的，带有特定功能的视图回顾:vue: vue.component('',{components:{}})angular:@Component()export class Demo01Component{}React: 创建:var Test = React.createClass({render:function(){return ***}})调用:<Test></Test>注意事项：组件类的名字必须得是全驼峰在组件的render方法来渲染内容时，不要直接换行如果要渲染多个元素，放在一个顶层容器练习:demo04_lianxi.html (:- 15:30)需求：准备3个组件:MyInput MyList MyPageMyInput：input button(add)MyList: ul li*3MyPage = MyInput+MyList最终将MyPage作为根组件 渲染到id为example的容器③props回顾:vue:<son myValue='100'></son>props:['myValue'] //this.myValueAngular:<son myValue='100'></son>import {Input} from '@angular/core'@Input() myValue=""//this.myValueReact:知识点1:使用props来完成父--》子的通信<Son myValue='100'></Son>this.props.myValue知识点2:背景知识:// 任何一个组件类的实例 都有一个props对象；一个props对象的keyValue的个数 取决于组件调用时的属性的个数，其实有一个例外:this.props.children(当前组件作为标签来调用时，开、闭标签内部的一些子标签的集合)// this.props.children类型是不确定的，如果有一个子标签，它是对象；如果有0个子标签，就是undefined;如果有2个或者以上的子标签，就是一个数组获取所有的子标签来做操作React.Children.map(this.props.children,(value)=>{return value})知识点3:事件绑定：<any onEvent={this.handleEvent}></any>共识:一个组件在被调用的时候，通过属性传值，这个值还可以是一个方法步骤1:父组件准备一个有参数的方法rcvMsg(msg){}步骤2:将有参数的方法传给子组件<Son func={this.rcvMsg}></Son>步骤3:子组件内部 可以调用通过属性传来的这个有参数的方法，将传递的数据传递给父组件this.props.func(123)练习:demo07_lianxi.html需求:(:- 16:55)完成组件的创建MyList、MyItem//list={[1,2,3]}MyList作为根组件来调用，调用的时候传递一个数组过去；接收到数组，动态的创建多个MyItem(同时将数组中值传递给MyItem)MyItem显示一个h1,显示传来的数据④refreference 引用基础语法:步骤1: <input ref="myInput"/>步骤2: this.refs.myInput目的:为了让父组件可以通过ref快速的找到子组件的实例，调用子组件内部所定义的属性和方法练习:(:- 10:50)demo10_lianxi.html页面:准备一个组件MyList,该组件显示input/button(add)/ul功能:点击button,通过ref获取input的值，添加到数组list,遍历list在ul中创建多个li⑤statestate中的数据是由绑定效果的state的基本操作:初始化 getIntialState:function(){return {count:0}}读this.state.count写this.setState({count:1})this.setState({count:1},()=>{})总结:jsx是基础语法component是构成复杂视图的基础内容props实现组件间的通信ref实现在父组件中操作子组件的state可以实现绑定的效果，数据的管理1.4 进阶知识1.4.1 生命周期的钩子函数组件从创建到消亡的过程，如果需要在一个特定的阶段去执行一个操作，借助于lifecycle hook来指定行为。mount： 初始化componentWillMountcomponentDidMount（推荐:执行初始化工作）update：数据发生变化componentWillUpdatecomponentDidUpdatecomponentWillReceivePropsunmount：清理componentWillUnmount注意事项:①不可以在willMount通过ref定位元素或者子组件做操作②在update相关的钩子函数中，在数据变化时 执行一些逻辑操作，同时记得避免出现死循环③当组件内部的state、传给该组件的prop对应的值发生变化，都会执行componentWillUpdate/DidUpdate④通过props传给子组件的值，子组件只能读，不可以修改⑤什么时候在子组件中，会因为prop变化而执行update相关的钩子函数?父组件准备一个状态，将状态通过属性传递给子组件；当父组件中操作这个状态的时候，子组件通过属性所获取到的值也跟着变化了⑥componentWillReceiveProps只有在通过属性传来的值变化的时候 才会执行(在此钩子函数中 比如将prop传来的值存储在state以方便组件内部的数据操作)练习:(:-15:30)demo13_lianxi.html①准备一个组件 组件渲染一个h1②在组件挂载完毕之后，修改h1的透明度 0~0.1~0.2...~1 0~0.1~0.2<any style={{opacity:this.state.**}}></any>1.4.2 循环<div>{this.state.myList.map(()=>{return <li></li>})}
</div>jsx中写注释: {/* it is a comment */}1.4.3 条件判断<div>{this.state.isLogin&&<p>欢迎会员回来</p>}</div>1.4.4 特殊的表单如果表单元素指定了value/selected/checked属性，那么用户直接操作，结果是不对的，受到react控制，称之为受控的表单元素解决受控问题核心思路：借助于状态的绑定特性处理过程:就是状态的3个基本操作(初始化、读、写)1.4.5 事件处理函数自定义传值<button onClick={()=>this.handleClick(30)}>
</button>1.5 综合练习demo18_lianxi.html准备以下组件:MyList MyInput	
模板内容:MyInput: input + btnMyList:MyInput + ul	
功能:点击MyInput中的按钮，获取输入框的值，传递给MyList;MyList接收到值之后，保存在state(这应该是一个数组)，遍历state在ul动态的创建多个li新需求:在li中除了显示值之外，添加一个delete的按钮；点击delete，将li从ul中移除

2、reactnative
使用核心概念，调用ui组件来完成移动端app的开发

 es6模块注意的细节:①导入和引入的方式方案1：export default class Demo01
import Demo01方案2:export class Demo01
import {Demo01}调试技巧：如何开启热更新: 摇一摇--》enable hot reloading如何手工更新:摇一摇--》reload如何在rn中查看console对应的日志信息：摇一摇 --> Debug js remotely2.1 概述rn的竞品: weex/native scriptreactNative:Build native mobile apps using JavaScript and Reactrn是由facebook，才用react中的核心概念结合rn中所封装的组件 来完成NativeApp的编写how?编程方式:使用react中所提供的概念(jsx/component/state/props/ref),来调用rn中所封装的各种组件来构建app的页面搭建环境:步骤1:准备pc端的可以编码的模板项目①将C:\xampp\htdocs\codes\forStu\react\rn_myapp.zip拷贝到C:\xampp\htdocs\codes\rn目录；②将rn_myapp.zip解压缩到了rn_myapp文件夹③通过vscode打开C:\xampp\htdocs\codes\rn\rn_myapp文件夹④启动内置终端，执行npm start⑤通过浏览器来访问localhost:8081端口步骤2:准备手机(模拟器)进行效果的预览打开模拟器(夜神、蓝叠、网易mumu、腾讯手游助手。。。)确认模拟器有没有预置我们安装好的app:myapp如果没有预置myapp这个可以运行android系统的包，将C:\xampp\htdocs\codes\rn\rn_myapp\android\app\build\outputs\apk\app-debug.apk拖拽安装到模拟器启动myapp的android app：情况1：闪退--》卸载重新安装情况2: 出现了红色错误窗口(提示并没有配置要连接的开发服务器地址和端口)设置要连接的ip和port?①按下模拟器的"摇一摇"/"菜单键"来启动开发者菜单②按下dev settings,启动一个菜单③按下debug server host & port for device;弹出一个输入框在输入框中输入ip地址和端口172.163.100.134:8081查看电脑的ip地址?cmd-->ipconfig172.163.100.134④关闭应用程序，重新打开2.2 基础2.2.1 组件创建:export default class Demo01 extends Component{}调用:import Demo01 from '***'<Demo01></Demo01>注意事项:①不允许在组件中编写html元素②所有的类的名称要符合全驼峰③所有的类，要先引入再调用练习:(:- 15:25)①完成一个组件的创建和调用demo02_lianxi.js Demo02Component②组件渲染的内容两个Text(放在View,仿照根组件中View的用户)2.2.2 state两个知识点①state中的数据 是有绑定效果②3个基础操作初始化:放在构造函数中constructor(){super();this.state = {}}读: this.state.**写: this.setState()2.2.3 fetchfetch是负责和服务器端做交互的fetch(url).then((response)=>response.json()).then((result)=>{//result就是服务器端返回我们关心的数据})如果需要进行post请求的处理:var config={method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:"uname=dingding&upwd=123456"}fetch(url,config).then().then()2.2.4 stylern中几乎所有的核心组件都支持style属性的<Text style={{color:'red'}}></Text>怎么封装和复用样式?import {StyleSheet} from 'react-native'const myStyles = StyleSheet.create({myView:{width:200,height:200},myText:{color:'red'}})<View style={myStyles.myView}></View><View style={[myStyles.myView,myStyles.myText]}></View>准备工作:①npm start 启动项目的开发服务器
②启动xampp集成的mysql的数据库服务器
③启动xz_api的app.js所对应的web服务器
④打开模拟器 启动myapp综合练习:demo06_lianxi.js Demo06Component
①组件挂载完毕之后，请求http://172.163.***.***:8080/product/list;fetch
②保存服务器端返回的数据中的data，
保存在状态listthis.setState
③组件要渲染的内容在View中循环的创建多个Text,Text中显示商品的title(Text字体颜色为蓝色)2.3 常用组件Text/View/Image/TextInput/Switch/FlatList/....自定义布局2.3.1 Text目的:展示一段文本内容
使用步骤:import {Text} from 'react-native'<Text>111</Text>2.3.2 View目的:准备一个容器
使用步骤:import {View} from 'react-native'<View>....</View>2.3.3 FlatList目的：实现一个高性能的列表组件
使用步骤:import {FlatList} from 'react-native'showItem(info){//info.item是遍历数组时临时变量 //info.index是下标return <Text></Text>}<FlatList data={} renderItem={this.showItem}></FlatList>注意：如何解决key的warning问题？从data所指向的数组着手，给数组中每一个对象添加一个key的属性，值要具有唯一性2.3.4 Button、目的:实现一个按钮
使用步骤:import {Button} from 'react-native'handlePress=()=>{}<Button title="刷新" onPress={this.handlePress}></Button>练习:①完成demo09_lianxi.js中Demo09Component组件类的封装和调用②模板内容:View Button FlatList(列表项:Text Button)③功能点击Button,准备一个数组[100,200,300,400,500];将数组保存在状态中；将状态的数据给FlatList去用；FlatList列表项中的Text显示数组中临时变量，点击Button时alert弹窗显示下标2.3.5 TextInput目的:获取用户输入的信息
步骤:import {TextInput} from 'react-native'//ChangeText事件的事件处理函数是有参数的，这个参数是当前输入框的值<TextInput placeholder="" onChangeText={} secureTextEntry={true}></TextInput>2.3.6 Switch目的:实现一个滑动开关
注意:Switch默认是一个受控组件，需要根据状态的绑定特性来解决受控问题
步骤:import {Switch} from 'react-native'<Switch onValueChange=""></Switch>2.3.7 Image目的:展示图片使用步骤:import {Image} from 'react-native'//情况1：加载的本地资源图片<Image source={require('../assets/img/3.jpg')}></Image>//情况2:加载网络资源图片<Image source={{uri:""}} style={{width:200,height:200}}></Image>2.3.8 TouchableOpacity目的:放在此容器中的元素 在按下的时候 是会有一个透明度变化的效果使用步骤:import {TouchableOpacity} from 'react-native'<TouchableOpacity>...</TouchableOpacity>2.3.9 ScrollView目的:实现一个支持滚动的容器
步骤:import {ScrollView} from 'react-native'<ScrollView>....</ScrollView>2.3.10 ActivityIndicator目的:实现一个加载中的loading
使用步骤:import {ActivityIndicator} from 'react-native'<ActivityIndicator size="large" color='green'></ActivityIndicator>综合练习:(:- 17:30)①在demo15_lianxi.js文件中 封装一个组件Demo15Component②组件的模板内容View TextInput Button(add) FlatList (列表项:Text,希望Text支持点按的ui变化效果-->TouchableOpacity)③点击add按钮，将TextInput的值保存在一个数组，数组显示FlatList；Text在点按时 通过alert来显示下标在点完add之后，清空一下输入框的值this.state = {list:[],myValue:""}<Button onPress<TouchableOpacity onPress<TextInput onChangeTextonPress
onChangeText
onValueChange2.3.11 布局ReactNative支持c3中flexbox主轴默认是columnalignItems/justifyContent/flexDirection2.4 路由(ReactNavigation)express/vue/angular/ionic路由的本质：建立一种映射关系rn这项技术官方并没有提供路由：可以使用非常受欢迎的reactNativigation开源项目来完成rn的路由的功能①基础概念ReactNavigation是用在rn中的一个路由的开源项目how?yarn add react-navigation# or with npm# npm install --save react-navigation基础用法:步骤1:创建几个组件步骤2:引入react-navigation这个包里边的配置路由的工具，进行路由配置import {createStackNavigator} from 'react-navigation'var myNavigation = createStackNavigator({login:{screen:LoginComponent},})步骤3:调用路由AppRegistry.registerComponent("myapp",()=>myNavigation)注意:在设置路由的时候，第一个keyValue就是默认要访问的组件练习:完成demo17_register.js文件的创建，并在此文件中，封装一个Demo17Register的组件类；希望路由中默认展示Demo17Register稍等....②跳转  //vue:this.$router.push//angular: this.myRouter.navigateByUrl()//ionic:this.navCtrl.push()this.props.navigation.push('detail')③传参步骤1:跳转的同时 发送数据this.props.navigation.push('detail',{id:1,title:'123'})
步骤2:接收数据 this.props.navigation.getParam('id')基础语法+网络+内部数据+路由

总结：在React以及生态圈中学到的知识点
①react 5大核心概念
jsx(语法基础)
component(视图的封装和复用)
props(组件间通信)
state(管理组件内部的数据)
ref(在父组件中主动的获取子组件的数据)
②rn中基础
fetch
实现与远程服务器端的通信
fetch(url).then((response)=>response.json()).then((result)=>{})
style
<Text style={{color:‘red’}}>
StyleSheet
样式的封装和服用
StyleSheet.create()
flexbox
自定义布局
③rn中各种组件
View/Text/TextInput/Button/Image…
(div/p/input/button/img)
④路由ReactNavigation
跳转和传参

 综合练习:(:- 14:55)①完成两个文件demo19_cart.js --> CartComponentdemo19_submit.js-->SubmitComponent
②配置路由两个路由地址:cart(默认)/submit
③demo19_cart.js初始化一个状态list(对象数组，每一个对象包含title/price/count)视图：FlatList(列表项显示title)+Button(点击跳转到submit)(:- 15:35)
④点击cart中的Button时跳转到submit,同时将商品的总价格，发送过去
⑤submit接收传来的价格，显示在Text
....2.5 实现一个基于RN的项目使用ionic来实现一个webApp/hybridAppvue+mintui/mui/vux 实现一个webApp实现一个NativeApp:weex/native script/react native目标：①熟练使用react的核心概念jsx/props/state/...②熟练使用rn中所封装的各种组件View/Text/TextInput/Image/..③具备编写NativeApp的能力View-->android.View/uiView