请选择 进入手机版 | 继续访问电脑版

技术控

    今日:4| 主题:61818
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] [React Native Android 安利系列]ReactNative中的reactjs基础

[复制链接]
双面小丑 发表于 2016-10-1 15:03:13
141 1
这一系列课程说了很多关于react-native的知识,都是有关于样式,底层,环境等知识的,现在我们来学习一下reactjs的基础知识。我们的代码,我们创建的组件的相关知识。
  欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有:
   https://segmentfault.com/blog...
  回顾前几期,我们做过了这么多实践,是时候回过头来看看我们写的JS文件了。
  1. 语法

  我们书写reactjs的时候,当然可以使用ES5的语法。
  1. var reactNative = require('react-native');
  2. var React = require('react');
  3. var View = reactNative.View;
  4. var Text = reactNative.Text;
  5. var StyleSheet = reactNative.StyleSheet;
  6. var AppRegistry = reactNative.AppRegistry;
  7. var hellowReact = React.createClass({
  8.     render: function () {
  9.         return (
  10.             <View>
  11.                 <Text>欢迎收看react-native-android系列教程</Text>
  12.             </View>
  13.         );  
  14.     }   
  15. });
  16. AppRegistry.registerComponent('hellowReact', () => hellowReact);
复制代码
也可以使用ES6的语法,react中内置了packager帮我们进行转换。
  如果使用了es5的语法的话,我们可以看到,我们创建了一个『类』---hellowReact,确切的说,是一个组件。这个『类』必须要有一个render方法。这个render方法的返回值,指定了渲染在APP上的原生层。个人感觉这与android中的xml布局文件类似。
  当然,我们也可以像之前一样,使用es6的语法进行描述。使用真正的类。这里,笔者建议使用ES6的语法去书写RN程序:
  1. import React, {Component} from 'react';
  2. import {
  3.     StyleSheet,
  4.     Text,
  5.     View,
  6.     AppRegistry
  7. } from 'react-native';
  8. class hellowReact extends Component {
  9.     render() {
  10.         return (
  11.             <View>
  12.                 <Text>欢迎收看react-native-android系列教程</Text>
  13.             </View>
  14.         );  
  15.     }   
  16. }
  17. AppRegistry.registerComponent('hellowReact', () => hellowReact);
复制代码
2. JSX

   不得不说,jsx真是一个神奇的设计,在js代码中,混入xml风格的标签。刚开始接触的话,可能你会不习惯这样的代码形式,但当你习惯了这种语法之后,将浴霸不能

[React Native Android 安利系列]ReactNative中的reactjs基础

[React Native Android 安利系列]ReactNative中的reactjs基础-1-技术控-我们,hellowReact,react,状态,Component

  1. class hellowReact extends Component {
  2.     render() {
  3.         return (
  4.             <View style={styles.container}>
  5.                 <Text>欢迎收看react-native-android系列教程</Text>
  6.             </View>
  7.         );  
  8.     }   
  9. }
复制代码
  从上述代码我们可以看出,jsx中标签的形式与html类似,同样也是需要嵌套的标签层。同样需要闭合的标签。如果需要在JSX中混入js变量的话,则需要使用界符 {} 进行包裹。其中的js会被解析。JSX中的标签,由react-native基础库提供。当然,我们的标签也可以使用自己创建的组件。如下:
  1. class Com extends Component {
  2.     render() {
  3.         return (
  4.             <Text>欢迎收看react-native-android系列教程</Text>
  5.         );  
  6.     }   
  7. }
  8. class hellowReact extends Component {
  9.     render() {
  10.         return (
  11.             <View style={styles.container}>
  12.                 <Com />
  13.             </View>
  14.         );  
  15.     }   
  16. }
复制代码
这里需要注意下,文字需要包裹在Text标签中。标签开头接受属性。每个标签的样式可以加载在自己的style属性中。另外还需注意,我们渲染的jsx,最外层只能有一个顶级的元素进行包裹。
  3. 组件

  上面,我们已经说到了标签可以是自己创建的组件。我们也写了一个简单的组件。react中,书写自己的组件,可以将应用更加细化的拆分为多个模块。便于模块化的维护代码。自定义的组件在渲染时,可以传入一些属性,在组件内这些属性可以被获取,如图3.0.1:
  1. class Com extends Component {
  2.     render() {
  3.         return (
  4.             <Text>传过来的参数是:{this.props.param}</Text>
  5.         );
  6.     }
  7. }
  8. class hellowReact extends Component {
  9.     render() {
  10.         return (
  11.             <View style={styles.container}>
  12.                 <Com param={'我是传入的参数!'} />
  13.             </View>
  14.         );  
  15.     }   
  16. }
复制代码
  

[React Native Android 安利系列]ReactNative中的reactjs基础

[React Native Android 安利系列]ReactNative中的reactjs基础-2-技术控-我们,hellowReact,react,状态,Component

  图3.0.1
     其实我们在JSX中插入的是一个类名,但是在渲染的时候,会生成一个类的实例。 这里提示一下大家,类的第一个字母需要大写,否则你会收到一个错误.....(如图3.0.2):
   

[React Native Android 安利系列]ReactNative中的reactjs基础

[React Native Android 安利系列]ReactNative中的reactjs基础-3-技术控-我们,hellowReact,react,状态,Component
    图3.0.2
  4 状态与更新

  在网页开发中,我们的思维总是自己获取数据,自己去更改视图。但是reactjs给我们带来了完全不同的体验。reactjs认为,我们的程序是一个状态机。reactjs为我们提供了VM层,其实我们再回头来看看,我们在写render函数的返回值的时候,不就已经将我们的状态与视图融合在一起了吗?
  1. class hellowReact extends Component {
  2.     constructor(props) {
  3.         super(props);
  4.         this.state = {
  5.             name: 'hy'
  6.         };
  7.     }
  8.     render() {
  9.         return (
  10.             <View style={styles.container}>
  11.                 <Text>当前的状态是:{this.state.name}</Text>
  12.             </View>
  13.         );  
  14.     }   
  15. }
复制代码
上面的代码展示了,我们将当前组建的状态(this.state)混入到了当前组件的视图中。我们在组件创建的时候会给定一个初始状态(initialState),这个状态在getInitialState这个钩子函数的返回值中给到组件。
  reactjs支持我们更改状态,从而引起视图的变化。我们将上述代码进行改造,增加更改视图的时机:
  1. import React, {Component} from 'react';
  2. import {
  3.     StyleSheet,
  4.     Text,
  5.     View,
  6.     AppRegistry
  7. } from 'react-native';
  8. class hellowReact extends Component {
  9.     constructor(props) {
  10.         super(props);
  11.         this.state = {
  12.             name: 'hy'
  13.         };
  14.     }
  15.     changeState() {
  16.         this.setState({
  17.             name: 'hysg'
  18.         });
  19.     }
  20.     render() {
  21.         return (
  22.             <View style={styles.container} onTouchEnd={this.changeState.bind(this)}>
  23.                 <Text>当前的状态是:{this.state.name}</Text>
  24.             </View>
  25.         );  
  26.     }
  27. }
  28. const styles = StyleSheet.create({
  29.     container: {
  30.         flex: 1,
  31.         flexDirection: 'row',
  32.         alignItems: 'flex-start',
  33.         backgroundColor: '#fff',
  34.     },
  35. });
  36. AppRegistry.registerComponent('hellowReact', () => hellowReact);
复制代码
    我们看一下上面的代码,在view点击的时候,更新当前组件的状态。并没有强制去更改状态。但是,状态改变了,随即而来的就是视图自动发生了变化,初始状态如图4.0.1,点击后,状态更新,视图随即更新至图4.0.2:
   

[React Native Android 安利系列]ReactNative中的reactjs基础

[React Native Android 安利系列]ReactNative中的reactjs基础-4-技术控-我们,hellowReact,react,状态,Component
    图4.0.1
   

[React Native Android 安利系列]ReactNative中的reactjs基础

[React Native Android 安利系列]ReactNative中的reactjs基础-5-技术控-我们,hellowReact,react,状态,Component

  图4.0.2
  其实我们也能猜到,setState方法,最终就是再次调用render,但是其中会有一些特殊的处理。不过,从上述代码的角度看来,我们只是更改了状态(调用了setState),最终引起了视图的变化,这就是reactjs非常特别的思想。
  5 事件的绑定

  不同于我们的js或者原生android,我们总是在视图之外,在自己的逻辑代码中,去选取特定元素,并在其上绑定事件。reactjs绑定事件是放在JSX中的。
  1. class hellowReact extends Component {
  2.     constructor(props) {
  3.         super(props);
  4.         this.state = {
  5.             name: 'hy'
  6.         };
  7.     }
  8.     changeState() {
  9.         this.setState({
  10.             name: 'hysg'
  11.         });
  12.     }
  13.     render() {
  14.         return (
  15.             <View style={styles.container} onTouchEnd={this.changeState}>
  16.                 <Text>当前的状态是:{this.state.name}</Text>
  17.             </View>
  18.         );  
  19.     }   
  20. };
复制代码
如上,我们把TouchEnd事件绑定在了最外层的View上。事件名称直接写为标签的属性,其值则是对应的事件处理函数。
  请注意,与react-web不同的是,事件触发函数的上下文,默认就是本组件。本例中,我们changeState中的this,指代的就是hellowReact的实例。
  6 获取元素

  相信做前端的同学们,还是习惯了jQuery的模式,用选择器去选择DOM,并操作。但是对于React来讲,平时使用state与jsx更新视图就够了。虽然RN不是DOM,没有选择器去选取DOM,但是我们还是免不了要去获取元素。这时就得使用"对组建的引用---refs属性"了。
  举个简单的例子,我们要获取一个元素并测量一个这个元素在页面上的位置与长度&宽度,我们就要使用refs,先来获取到那个元素,再来测量了:
  1. class hellowReact extends Component {
  2.     getPos() {
  3.         this.refs.measureme
  4.         .measure((fx, fy, width, height, px, py) => {
  5.             console.log('我的位置是:', 'x:', fx, 'y:', fy);
  6.         });
  7.     }
  8.     render() {
  9.         return (
  10.             <View onTouchEnd={this.getPos}>
  11.                 <Text ref={"measureme"}>测量我</Text>
  12.             </View>
  13.         );  
  14.     }   
  15. }
复制代码
这样,点击后就能测量到元素的位置啦。
  7 全局对象

  在reactNative中,引用全局对象可以使用window或者global,它们都指向一个对象--DedicatedWorkerGlobalScope,其中有jscore提供的方法,也有reactnative注入的方法。我们之后会详细讲解react注入的方法。
  8 模块化

  ReactNative可以直接使用commonjs的方式去编写模块化的代码,因为使用的packager打包的方式类似于webpack或者browserfy,可以通过require,导入模块,可以通过exports暴露出模块中的方法或者变量。当然,直接使用es6 import的方式,也是可以更加方便的导入自己写的模块的。如下面的例子:
  1. import amodule from './amodule';
  2. var hellowReact extends Component {
  3.     constructor(props) {
  4.         super(props);
  5.         this.state = {
  6.             name: amodule.getName()
  7.         };
  8.     }
  9.     changeState() {
  10.         this.setState({
  11.             name: 'hysg'
  12.         });
  13.     }
  14.     render() {
  15.         return (
  16.             <View style={styles.container} onTouchEnd={this.changeState}>
  17.                 <Text>当前的状态是:{this.state.name}</Text>
  18.             </View>
  19.         );  
  20.     }  
  21. }
复制代码
amodule.js中的代码如下:
  1. import React, {Component} from 'react';
  2. import {
  3.     StyleSheet,
  4.     Text,
  5.     View,
  6.     AppRegistry
  7. } from 'react-native';
  8. class hellowReact extends Component {
  9.     render() {
  10.         return (
  11.             <View>
  12.                 <Text>欢迎收看react-native-android系列教程</Text>
  13.             </View>
  14.         );  
  15.     }   
  16. }
  17. AppRegistry.registerComponent('hellowReact', () => hellowReact);0
复制代码
不过切记一个模块是一个单例。
  9 课后作业

  本节重在基础学习,所以就没有上传代码例子。各位请自行敲一下上面的代码进行实践。
  接下来,我会和大家一起聊聊react-native的源码编译。另外,近期我也会开设一套react-native-ios的系列教程,不要走开,请关注我.....
  如果喜欢本文请点击下方的推荐哦,你的推荐会变为我继续更文的动力。
浩南 发表于 2016-10-2 01:10:21
为失踪儿童祈福,我们在等你回家!2016-10-02
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表