【React Native入门系列文章 一】小白扫盲篇

0、学完本篇blog，你将收获什么？

作者写本篇blog的目的是让读者看完这篇blog就可以知道完全了解react native的由来、设计思想，并可以顺利过渡到学习react native语法的阶段。因为，作者在学习完react native的语法之后还是有以下几个疑问：

1、ES6是什么？我之前学过JavaScript，它和JavaScript有什么关系？是不是学了JavaScript就可以不用学ES6了？

2、react.js好像是一种js框架，类似于vue.js，react native和react.js有什么关系？我用不用去专门学习一下react.js?

3、react native的js代码里好像有html标签，为什么可以这样写？

4、配置react native环境时配置了node.js环境，它和react native有什么关系？

5、react native好像是有自己的结构，给我一个react native编写的程序，我该如何读懂？类与类是如何关联的？

 

1、ES6与JavaScript关系

ES5是第五次更新过的JavaScript，在2009年完成，它已被所有主要浏览器支持多年。

ES6是第六次更新过的JavaScript，添加了一些不错的语法和功能，在2015年完成，大部分主要浏览器都支持。

babel是一个广泛使用的转码器，可以将ES6代码转化为ES5代码，而不用担心现有浏览器环境是否支持。

 

2、ReactJs和React Native关系

（1）ReactJs的目的是为了使前端的View层更具组件化，能更好的复用。它能够使用简单的html标签创建更多的自定义组件标签，内部绑定事件，同时可以从操作dom中解脱出来，只需要操作数据就会改变相应的dom。

（2）ReactJs和React Native原理相同，都是由js实现的虚拟dom来驱动界面View层渲染。只不过ReactJs是驱动html dom渲染，React Native是驱动android/ios原生组件渲染。

（3）React基于组件开发，然后组件和组件之间通过props传递方法，每个组件都有一个状态state，当某个方法改变了这个状态值，组件中相应的部分就会更新。

（4）虚拟dom机制：基于React组件进行开发是所有的DOM元素构建都是通过虚拟dom进行，每当数据变化时，React都会重新创建整个dom树，然后React将当前整个dom树和上一次dom树进行对比，得到dom结构的区别，然后仅仅将需要变化的部分进行实际浏览器dom更新。

3、React相比传统JavaScript的优势是什么？

（1）传统JavaScript每次数据变动都要整体重新渲染，性能会非常差，尤其在数据变动频繁、界面复杂时。

（2）每次渲染都重新生成所有dom节点。

（3）React组件化设计思想更符合程序员编程思维。

 

4、什么是JSX语句？

全称是JavaScript XML，是一种React组件内部构建HTML标签的类似于XML的语言，它允许我们编写看起来像HTML的JavaScript，在render()方法中直接把HTML嵌套在JS中的写法就叫做JSX。这种语法结合了JavaScript和HTML的优点，既可以像平常一样使用HTML，也可以在里面嵌套JavaScript语法。例如，一个React组件要呈现一个文本：

class Header extends React.Component {
    render() {
        return (
            <h1>Hello World</h1>
        );
    }
}

这个Header组件的render()函数看起来直接返回了一组HTML标签，但其实这是JSX语句。它被翻译后的代码如下：

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}

在JS里输出HTML DOM元素其实是通过React.createElement()实现。

 

5、模块的导入导出

React核心思想就是组件化开发，项目中一些功能组件在许多页面都可以复用。

（1）模块

编写大一点的程序时都会将代码模块化。一般将代码合理拆分到不同的js文件中，每一个文件就是一个模块，而文件路径就是模块名。这里需要了解两个概念：模块初始化、主模块。

a）模块初始化

一个模块中的js代码仅在模块第一次被使用时执行一次，并且在执行过程中初始化模块的导出对象。之后，缓存起来的导出模块被重复利用。例如，

counter.js模块内容如下：

var i = 0;

function count() {
    return ++i;
}

exports.count = count;

在使用counter模块时：

var counter1 = require('./util/counter');
var    counter2 = require('./util/counter');

console.log(counter1.count());
console.log(counter2.count());
console.log(counter2.count());

运行结果为：

1

2

3

可以看到，counter.js并没有因为被require了两次而初始化两次。

 

b）主模块

主模块时react native程序的入口，它负责调度组成整个程序的其他模块完成工作。入口组件这样定义：

AppRegistry.registerComponent('HelloWorldReactNative', () => App)

其中registerComponent()方法的第一个参数代表react native工程的名字，App代表入口主模块的名字。

 

（2）模块的导入导出

我们需要知道如何把一个组件导出，使其可以在任何页面使用；还需要知道如何把一个组件导入，因为只有导入到当前页面，才可以使用该组件。

以下面这个Header组件为例，

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 PixelRatio,
} from 'react-native';
 
export default class Header extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Text style={styles.font}>hangge.com</Text>
       </View>
     );
   }
}
 
const styles = StyleSheet.create({
 flex:{
    marginTop:20,
    height:50,
    borderBottomWidth:3/PixelRatio.get(),
    borderBottomColor:'#2D9900',
    alignItems:'center', /*使Text组件水平居中*/
    justifyContent:'center' /*使Text组件垂直居中*/
 },
 font:{
    color:"#2D9900",
    fontSize:25,
    fontWeight:'bold',
    textAlign:'center' /*使文字在Text组件中居中*/
  },
});

我们把这个组件的代码放到header.js文件中，然后将其export成独立的模块。

export default class Header extends Component

使用时，我们通过import将Header组件加载进来。

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
} from 'react-native';
 
import Header from './header'
 
class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Header></Header>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
  flex:{
     flex:1
  },
 });
 
 AppRegistry.registerComponent('HelloWorld', () => Main);

6、为什么React Native需要Node.JS？

因为react native使用了node.js环境。正是因为这个原因，我们需要对node.js有一个基本的了解。

（1）npm是什么？

npm是随同node.js一起安装的包管理工具，其使用场景主要有以下几种：

 

• 允许用户从npm服务器下载别人编写的第三方包到本地使用（使用命令npm install ***，下载好的包放在node_modules目录中。如果需要的第三方包比较多，那一个一个下载肯定是不合理的，npm允许在package.json中通过dependencies字段指明第三方包依赖，以达到批量安装第三方包的目的）
• 允许用户从npm服务器下载并安装别人编写的命令行程序供别人使用
• 允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用

可以看到，npm建立了一个node.js生态圈，node.js开发者和用户可以在里边互通。

（2）packager是什么？

 

 

7、线上参考手册

 

8、Chrome简单练习

 

9、附上demo

demo地址（觉得ok，可以先star，会持续优化）