[React Native Android 安利系列]ReactNative中的reactjs基础
这一系列课程说了很多关于react-native的知识，都是有关于样式，底层，环境等知识的，现在我们来学习一下reactjs的基础知识。我们的代码，我们创建的组件的相关知识。
欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：
https://segmentfault.com/blog...
回顾前几期，我们做过了这么多实践，是时候回过头来看看我们写的JS文件了。
1. 语法
我们书写reactjs的时候，当然可以使用ES5的语法。
var reactNative = require(\'react-native\');var React = require(\'react\');
var View = reactNative.View;
var Text = reactNative.Text;
var StyleSheet = reactNative.StyleSheet;
var AppRegistry = reactNative.AppRegistry;
var hellowReact = React.createClass({
render: function () {
return (
<View>
<Text>欢迎收看react-native-android系列教程</Text>
</View>
);
}
});
AppRegistry.registerComponent(\'hellowReact\', () => hellowReact);
也可以使用ES6的语法，react中内置了packager帮我们进行转换。
如果使用了es5的语法的话，我们可以看到，我们创建了一个『类』---hellowReact，确切的说，是一个组件。这个『类』必须要有一个render方法。这个render方法的返回值，指定了渲染在APP上的原生层。个人感觉这与android中的xml布局文件类似。
当然，我们也可以像之前一样，使用es6的语法进行描述。使用真正的类。这里，笔者建议使用ES6的语法去书写RN程序:
import React, {Component} from \'react\';import {
StyleSheet,
Text,
View,
AppRegistry
} from \'react-native\';
class hellowReact extends Component {
render() {
return (
<View>
<Text>欢迎收看react-native-android系列教程</Text>
</View>
);
}
}
AppRegistry.registerComponent(\'hellowReact\', () => hellowReact);
2. JSX
不得不说，jsx真是一个神奇的设计，在js代码中，混入xml风格的标签。刚开始接触的话，可能你会不习惯这样的代码形式，但当你习惯了这种语法之后，将浴霸不能。
class hellowReact extends Component { render() {
return (
<View style={styles.container}>
<Text>欢迎收看react-native-android系列教程</Text>
</View>
);
}
}
从上述代码我们可以看出，jsx中标签的形式与html类似，同样也是需要嵌套的标签层。同样需要闭合的标签。如果需要在JSX中混入js变量的话，则需要使用界符{}进行包裹。其中的js会被解析。JSX中的标签，由react-native基础库提供。当然，我们的标签也可以使用自己创建的组件。如下：
class Com extends Component { render() {
return (
<Text>欢迎收看react-native-android系列教程</Text>
);
}
}
class hellowReact extends Component {
render() {
return (
<View style={styles.container}>
<Com />
</View>
);
}
}
这里需要注意下，文字需要包裹在Text标签中。标签开头接受属性。每个标签的样式可以加载在自己的style属性中。另外还需注意，我们渲染的jsx，最外层只能有一个顶级的元素进行包裹。
3. 组件
上面，我们已经说到了标签可以是自己创建的组件。我们也写了一个简单的组件。react中，书写自己的组件，可以将应用更加细化的拆分为多个模块。便于模块化的维护代码。自定义的组件在渲染时，可以传入一些属性，在组件内这些属性可以被获取，如图3.0.1：
class Com extends Component { render() {
return (
<Text>传过来的参数是：{this.props.param}</Text>
);
}
}
class hellowReact extends Component {
render() {
return (
<View style={styles.container}>
<Com param={\'我是传入的参数!\'} />
</View>
);
}
}
图3.0.1
其实我们在JSX中插入的是一个类名，但是在渲染的时候，会生成一个类的实例。 这里提示一下大家，类的第一个字母需要大写，否则你会收到一个错误.....(如图3.0.2)：
图3.0.2
4 状态与更新
在网页开发中，我们的思维总是自己获取数据，自己去更改视图。但是reactjs给我们带来了完全不同的体验。reactjs认为，我们的程序是一个状态机。reactjs为我们提供了VM层，其实我们再回头来看看，我们在写render函数的返回值的时候，不就已经将我们的状态与视图融合在一起了吗？
class hellowReact extends Component { constructor(props) {
super(props);
this.state = {
name: \'hy\'
};
}
render() {
return (
<View style={styles.container}>
<Text>当前的状态是：{this.state.name}</Text>
</View>
);
}
}
上面的代码展示了，我们将当前组建的状态(this.state)混入到了当前组件的视图中。我们在组件创建的时候会给定一个初始状态(initialState)，这个状态在getInitialState这个钩子函数的返回值中给到组件。
reactjs支持我们更改状态，从而引起视图的变化。我们将上述代码进行改造，增加更改视图的时机：
import React, {Component} from \'react\';import {
StyleSheet,
Text,
View,
AppRegistry
} from \'react-native\';
class hellowReact extends Component {
constructor(props) {
super(props);
this.state = {
name: \'hy\'
};
}
changeState() {
this.setState({
name: \'hysg\'
});
}
render() {
return (
<View style={styles.container} onTouchEnd={this.changeState.bind(this)}>
<Text>当前的状态是：{this.state.name}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: \'row\',
alignItems: \'flex-start\',
backgroundColor: \'#fff\',
},
});
AppRegistry.registerComponent(\'hellowReact\', () => hellowReact);
我们看一下上面的代码，在view点击的时候，更新当前组件的状态。并没有强制去更改状态。但是，状态改变了，随即而来的就是视图自动发生了变化，初始状态如图4.0.1，点击后，状态更新，视图随即更新至图4.0.2：
图4.0.1
图4.0.2
其实我们也能猜到，setState方法，最终就是再次调用render，但是其中会有一些特殊的处理。不过，从上述代码的角度看来，我们只是更改了状态(调用了setState)，最终引起了视图的变化，这就是reactjs非常特别的思想。
5 事件的绑定
不同于我们的js或者原生android，我们总是在视图之外，在自己的逻辑代码中，去选取特定元素，并在其上绑定事件。reactjs绑定事件是放在JSX中的。
class hellowReact extends Component { constructor(props) {
super(props);
this.state = {
name: \'hy\'
};
}
changeState() {
this.setState({
name: \'hysg\'
});
}
render() {
return (
<View style={styles.container} onTouchEnd={this.changeState}>
<Text>当前的状态是：{this.state.name}</Text>
</View>
);
}
};
如上，我们把TouchEnd事件绑定在了最外层的View上。事件名称直接写为标签的属性，其值则是对应的事件处理函数。
请注意，与react-web不同的是，事件触发函数的上下文，默认就是本组件。本例中，我们changeState中的this，指代的就是hellowReact的实例。
6 获取元素
相信做前端的同学们，还是习惯了jQuery的模式，用选择器去选择DOM，并操作。但是对于React来讲，平时使用state与jsx更新视图就够了。虽然RN不是DOM，没有选择器去选取DOM，但是我们还是免不了要去获取元素。这时就得使用"对组建的引用---refs属性"了。
举个简单的例子，我们要获取一个元素并测量一个这个元素在页面上的位置与长度&宽度，我们就要使用refs，先来获取到那个元素，再来测量了：
class hellowReact extends Component { getPos() {
this.refs.measureme
.measure((fx, fy, width, height, px, py) => {
console.log(\'我的位置是：\', \'x:\', fx, \'y:\', fy);
});
}
render() {
return (
<View onTouchEnd={this.getPos}>
<Text ref={"measureme"}>测量我</Text>
</View>
);
}
}
这样，点击后就能测量到元素的位置啦。
7 全局对象
在reactNative中，引用全局对象可以使用window或者global，它们都指向一个对象--DedicatedWorkerGlobalScope，其中有jscore提供的方法，也有reactnative注入的方法。我们之后会详细讲解react注入的方法。
8 模块化
ReactNative可以直接使用commonjs的方式去编写模块化的代码，因为使用的packager打包的方式类似于webpack或者browserfy，可以通过require，导入模块，可以通过exports暴露出模块中的方法或者变量。当然，直接使用es6 import的方式，也是可以更加方便的导入自己写的模块的。如下面的例子：
import amodule from \'./amodule\';var hellowReact extends Component {
constructor(props) {
super(props);
this.state = {
name: amodule.getName()
};
}
changeState() {
this.setState({
name: \'hysg\'
});
}
render() {
return (
<View style={styles.container} onTouchEnd={this.changeState}>
<Text>当前的状态是：{this.state.name}</Text>
</View>
);
}
}
amodule.js中的代码如下：
export default function () { return \'hy\';
}
不过切记一个模块是一个单例。
9 课后作业
本节重在基础学习，所以就没有上传代码例子。各位请自行敲一下上面的代码进行实践。
接下来，我会和大家一起聊聊react-native的源码编译。另外，近期我也会开设一套react-native-ios的系列教程，不要走开，请关注我.....
如果喜欢本文请点击下方的推荐哦，你的推荐会变为我继续更文的动力。
以上是 [React Native Android 安利系列]ReactNative中的reactjs基础 的全部内容， 来源链接： utcz.com/z/383873.html
