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

时间 2019-11-06

标签 react native android 安利系列 reactnative reactjs 基础栏目 React 繁體版

原文原文链接

这一系列课程说了不少关于react-native的知识，都是有关于样式，底层，环境等知识的，如今咱们来学习一下reactjs的基础知识。咱们的代码，咱们建立的组件的相关知识。
欢迎你们收看react-native-android系列教程，跟着本系列教程学习，能够熟练掌握react-native-android的开发，你值得拥有：
https://segmentfault.com/blog...
回顾前几期，咱们作过了这么多实践，是时候回过头来看看咱们写的JS文件了。html

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布局文件相似。react

固然，咱们也能够像以前同样，使用es6的语法进行描述。使用真正的类。这里，笔者建议使用ES6的语法去书写RN程序:android

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风格的标签。刚开始接触的话，可能你会不习惯这样的代码形式，但当你习惯了这种语法以后，将浴霸不能。webpack

class hellowReact extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>欢迎收看react-native-android系列教程</Text>
            </View>
        );  
    }   
}

从上述代码咱们能够看出，jsx中标签的形式与html相似，一样也是须要嵌套的标签层。一样须要闭合的标签。若是须要在JSX中混入js变量的话，则须要使用界符{}进行包裹。其中的js会被解析。JSX中的标签，由react-native基础库提供。固然，咱们的标签也可使用本身建立的组件。以下：ios

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，最外层只能有一个顶级的元素进行包裹。es6

3. 组件

上面，咱们已经说到了标签能够是本身建立的组件。咱们也写了一个简单的组件。react中，书写本身的组件，能够将应用更加细化的拆分为多个模块。便于模块化的维护代码。自定义的组件在渲染时，能够传入一些属性，在组件内这些属性能够被获取，如图3.0.1：web

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.1segmentfault

其实咱们在JSX中插入的是一个类名，可是在渲染的时候，会生成一个类的实例。这里提示一下你们，类的第一个字母须要大写，不然你会收到一个错误.....(如图3.0.2)：
react-native

图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的系列教程，不要走开，请关注我.....

若是喜欢本文请点击下方的推荐哦，你的推荐会变为我继续更文的动力。