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\js

      react.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 MyPage

       MyInput：input button(add)
       MyList: ul li*3
       MyPage = MyInput+MyList

       最终将MyPage作为根组件 渲染到id为example的容器

   ③props
     回顾:
   vue:
     <son myValue='100'></son>

     props:['myValue'] //this.myValue
   Angular:
     <son myValue='100'></son>

     import {Input} from '@angular/core'

     @Input() myValue=""//this.myValue
 React:
   知识点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,显示传来的数据


   ④ref
     reference 引用
 基础语法:
   步骤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

   ⑤state
     state中的数据是由绑定效果的
 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： 初始化
   componentWillMount
   componentDidMount（推荐:执行初始化工作）
 update：数据发生变化
   componentWillUpdate
   componentDidUpdate
   componentWillReceiveProps
 unmount：清理
   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 + btn
  MyList: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 remotely


 2.1 概述
  rn的竞品: weex/native script
   
  reactNative:
   Build native mobile apps using JavaScript and React
   rn是由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-->ipconfig
      172.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 fetch
      fetch是负责和服务器端做交互的

  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 style
     rn中几乎所有的核心组件都支持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，
保存在状态list
 this.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 onChangeText
   
    
onPress
onChangeText
onValueChange

   2.3.11 布局
    ReactNative支持c3中flexbox

主轴默认是column

alignItems/justifyContent/flexDirection
    

 2.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 --> CartComponent
 demo19_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/hybridApp
   vue+mintui/mui/vux 实现一个webApp

   实现一个NativeApp:
     weex/native script/react native
   目标：
     ①熟练使用react的核心概念
   jsx/props/state/...
 ②熟练使用rn中所封装的各种组件
   View/Text/TextInput/Image/..
 ③具备编写NativeApp的能力
  View-->android.View/uiView