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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom