技术标签: 笔记
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
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland