为React Native开发写的JS和React入门知识
来自Leo的原创博客,转载请著名出处 我的stackoverflow 前言
准备工作先安装React Native,然后初始化一个示例工程 react-native init JSReactBasics
会生成如下一个目录 然后,XCode打开JSReactBasics.xcodeproj,运行模拟器会看到如下截图 本文,示例代码都是修改的 默认创建的index.ios.js如下 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
//导入一些必要的模块
import React,{
AppRegistry,Component,StyleSheet,Text,View
} from 'react-native';
//类,这是默认的载入类,继承自Component,Component类似于Android和iOS中的View
class JSReactBasics extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started,edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
//定义风格
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
fontSize: 20,textAlign: 'center',margin: 10,instructions: {
textAlign: 'center',color: '#333333',marginBottom: 5,});
AppRegistry.registerComponent('JSReactBasics',() => JSReactBasics);
什么是JavaScript?
JavaScript的标准是 ECMAScript,React Native的语法是基于ECMAScript 6,简称ES6. Tips:Java和JavaScript语法很像,但是用处完全不同,而且也是两个几乎没关系的东西 关于Java和JS的区分,可以见如下表
JS的基础知识声明
Tips:JS是大小写敏感的 变量,常量
var mainText = "来自Leo的博客"
var subText = "欢迎阅读"
Tips:JS是一个动态类型语言(dynamically typed language)中,所以变量不需声明类型,必要的时候自动转换 然后,让Text来显示这个这两个变量 return (
<View style={styles.container}>
<Text style={styles.welcome}>
{mainText}
</Text>
<Text style={styles.instructions}>
{subText}
</Text>
</View>
);
然后save,选择模拟器,Command+R刷新,会看到截图如下 常量可以看到index.ios.js文件最下面有类似 const styles = StyleSheet.create({....
就是一个常量。在声明的时候,必须初始化 数据结构和类型六种基本的原型数据类型
以及Object类型 流程控制
这个各个语言大同小异,不浪费篇幅了,有一点要提一下,JS中的Switch Case中可以是String 有一点要注意,以下值在JS中是会识别为false false
undefined
null
0
NaN
空字符串 ("")
注释// 这是一个单行注释.
/* 这是一个多行注释。它可以是任意长度,你可以在这里随便写什么。 */
Promises
一个promise有以下几种状态
控制图如下 函数函数的定义如下,由 function globalFunction(input){
console.log(input);
}
我们接着上述的工程,添加一个可点击的 TouchableHighlight 重新定义变量和类的内容 var mainText = "点击屏幕任意位置"
function globalFunction(input){
console.log(input);
}
class JSReactBasics extends Component {
render() {
return (
<TouchableHighlight
onPress={() => globalFunction("输入")}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
}
然后,save,command+R刷新,再点击屏幕任意位置,会发现如下log 通过this.functionName来访问 var mainText = "点击屏幕任意位置"
class JSReactBasics extends Component {
render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
backgorundClicked(){
console.log("类中的方法");
}
}
箭头函数(Arrow functions)没接触过JS的同学可能会对 onPress={() => this.backgorundClicked()
这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS中的箭头函数,他提供了一种更简洁的函数表达方式 backgorundClicked(){
var a = [
"Hydrogen","Helium","Lithium","Beryl-lium"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( (s) => s.length ); console.log(a2); console.log(a3); }
然后,save,Commnad+R刷新,可以看到两个log的内容是一样的。也就是说, 数组可以由以下三种方式创建数组,访问数组的方式还是通过角标来访访问 var a = ["1","2","3","4"];
var b = new Array("1","4")
var c = Array("1","4")
console.log(a[1]);
数组有一些方便的方法,例如合并,排序,检索等,可以在MDN上找到 字典Mapsvar map = {"key1":"value1","key2":"value2"}
var map = {"key1":"value1","key2":"value2"}
map["key4"] = "value4"
console.log(map["key1"])
console.log(map["key4"])
对象JS中的对象的属性可以不先声明,而在运行时候动态添加,例如 var obj = new Object()
obj.name = "1234"
console.log(obj.name);
所以,在React Native中,写代码的时候,存储数据直接 JavaScript是基于原型的面对象语言理解这一点,对使用JS开发还是比较重要的。
基于原型的面向对象
Tips:React Native引入了基于类的面向对象编程概念,这个在后面讲解React基础的时候来介绍 通过比较Java和JS可以了解二者的区分
什么是React?
Tips:通过名字就可以看出来,ReactNative是基于React来写的支持编写原生App的框架 React的基础知识ReactReact是整个React框架的入口 React.ComponentComponent是React类的基类,类似于iOS的UIView和Android的View,React和React native都定义了很多方便的子类来给开发者使用。 React.createClass创建一个Component Component 相关对象方法render调用 render() { return ( <TouchableHighlight onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
getInitialState()在Component被加载之前调用一次,这个方法的返回值回被设置为 Tips:这个方法只能在用 getInitialState(){
return {key:"value"}
}
会提示如下警告 getDefaultProps()在Class 创建的时候,调用一次,这个方法在调用的时候,任何实例还没有被创建。还有一点要注意,这个方法返回的任何Object 对象,在各个实例中是共享的,而不是每个实例一个copy。 staticsstatics对象,用来定义Components可以调用的静态方法,例如 var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},render: function() {
}
});
MyComponent.customMethod('bar'); // true
生命周期componentWillMount在最初的渲染之前调用一次,在React中,设置 componentDidMount在渲染结束后,调用一次 componentWillReceiveProps在component接收到新的参数前调用,在这个方法中调用this.setState不会触发二次渲染,第一次渲染的时候不会调用这个方法 shouldComponentUpdateboolean shouldComponentUpdate(
object nextProps,object nextState
)
在每次重新触发渲染之前调用,其中 shouldComponentUpdate: function(nextProps,nextState) {
return nextProps.id !== this.props.id;
}
componentWillUpdate在重新渲染之前调用 componentDidUpdate在渲染之后调用 componentWillUnmount在被删除之前调用 为了更好的理解生命周期,我们来用React的风格重写示例代码 var JSReactBasics = React.createClass({
getInitialState(){
console.log("getInitialState");
return {key:"点击屏幕任意位置"}//设置最初的值
},componentWillMount(){
console.log("componentWillMount");
},componentDidMount(){
console.log("componentDidMount");
},shouldComponentUpdate(nextProps,nextState){
console.log("shouldComponentUpdate");
return true
},componentWillUpdate(nextProps,nextState){
console.log("componentWillUpdate");
},componentDidUpdate(prevProps,prevState){
console.log("componentDidUpdate");
},render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{this.state.key}</Text>
</TouchableHighlight>
);
},backgorundClicked(){
this.setState({
key:"设置了新的值"
});
}
});
然后,save,Command+R,会看到Log以及效果 2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
2016-04-20 16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount
然后,点击屏幕任何位置,会看到Log和截图 2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
2016-04-20 16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate
后续从今天十点上班写道下午四点,想了想,应该还有些基础的部分要写的,先发布出来吧,后边继续写。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |