React Native 系列(二) -- React入门知识

时间：2024-01-02 08:24:50

前言

本系列是基于React Native版本号0.44.3写的，最初学习React Native的时候，完全没有接触过React和JS，本文的目的是为了给那些JS和React小白提供一个快速入门，让你们能够在看React Native语法的时候不那么费劲，有过前端开发经验的可以直接忽略。

什么是React

React是一个JavaScript框架，用来开发web应用。Web应用开发中，比较流行的有三个框架：

  • react
  • angular
  • vue

从名字上，就能看到react native是基于React（都是Facebook出品）。React的设计思想是：

  • Declarative（交互式的）

    应用都是基于状态的,应用会随着数据的变化切换到不同的状态,React

    将这种状态抽象为一个个View，这样状态改变后，利用React就在不同

    的View之间切换。这样，让代码更清晰可预测，也方便测试。

  • Component-Based（基于组件的）

    把管理状态的View封装成Component，然后再把这些Component

    组合到一起来实现复杂的UI。

  • Learn Once, Write Anywhere（一次编写，多处编译）

    React支持Web开发，Server开发（Node）,同样也支持本文提到的App开发（React Native）。

JSX

JSX是JavaScript语言的扩展，它并不改变JS本身语法。使用起来类型XML，React会对JSX的代码进行编译，生成JavaScript代码，用来描述React中的Element如何渲染。

上篇文章创建的项目中，index.ios.js里面的这段代码就是JSX语法：

render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>

          Welcome to React Native!

        </Text>

      </View>

    );

  }

其中，

<Text style={styles.welcome}>

    Welcome to React Native!

</Text>

会被编译成

React.createElement(

    Text,

    {style: styles.welcom},

    'Welcome to React Native!'

)

注意：使用JSX，一定要在scope中，能够访问到React和对应的Element。比如刚刚的例子，在代码的最上面看到了这样的import：

import React, { Component } from 'react';

import {

    AppRegistry,

    StyleSheet,

    Text,

    View,

    TouchableHighlight

} from 'react-native';

tips: jsx编译结果在线查看

如果你的标签是空的，可以用/>进行close，比如：

<CustomComponent style={styles.welcome} />

大小写

JSX对大小写开头是敏感的

  • 小写字母开头会被认为是html内置的标签。比如div
  • 大写字母开头会被认为是自己创建的或者import的component

所以，自定义的component必须是大写字母开头

举个

相关文章