第二节 显示页面标题

Posted 2020-06-22

# 代码
项目刚创建的时候，只有一个js文件，index.android.js,我们将其简化一下，代码如下：

import React, {
AppRegistry,
Component,
Text} from ‘react-native‘;

class Note extends Component{
render(){
return (
<Text>
写笔记
</Text>
);
};
};
AppRegistry.registerComponent(‘note‘, () => Note);

# React Native程序执行过程
1. index.android.js是入口文件，从这里开始执行。
2. 由于React是组件化的，我们首先要创建一个根组件，这里是Note
3. 我们需要注册根组件
4. 程序启动后，首先显示根组件，这里简单的在屏幕左上方显示"写笔记"

# Es2015的模块系统
import React, {
AppRegistry,
Component,
Text} from ‘react-native‘;
这部分的作用，是导入react-native包的一些功能，这里React是默认导入，只能有一个，其它大括号里的，可能是
类、函数和变量，只要我们用到了，这里就要预先导入。
我们要在js文件里调用其它模块提供的功能，就必须先import它们。

# React的组件概念
class Note extends Component{

这是创建一个组件，继承自Component，实现render函数。
我们创建了这个组件，今后在jsx中就可以用<Note> </Note>这类方式使用该组件，和使用react native封装的
<Text>组件没什么不同，这就是为何说React是组件化的原因。
简单的描述下React概念：React的第一个核心概念是虚拟Dom，无论何种平台该虚拟Dom都抽象了界面的层次结构、
每个组件的属性和状态。状态发生变化时，React比较与前面状态的差异，然后仅仅Render需要修改的部分，不需全部重
绘。React是Web技术，已经将React-Dom分离出来，后者是将html的标签组件化、Render，而反过来，React Native
则仅封装android和ios相关的组件，因此React的核心架构，再实现了一套组件的Render后，就能工作在移动平台。
同样的道理，若我们在win32平台，使用window api实现组件的render，这种技术同样可以用于桌面开发，且是原生的、使用
js的windows应用。目前已经有第三方实现了mac上的Render.

# JSX
这个组件只实现了Render函数，就能够正常工作，该函数的作用是，将自己呈现出来
函数体返回的内容，是jsx语法，这种语法最简单的形式：
<Text>
写笔记
</Text>

为什么是简化的写法呢？因为React原始的写法是这样的
render(){
return (
React.createElement(‘Text‘, null,‘写笔记‘)
)}
createElement最后一个参数，还可能就绪嵌套调用createElement，这样代码十分紊乱。
因此facebook提供了jsx语

法，在运行前，将其转换成createElement这样的形式。

# 注册根组件：
AppRegistry.registerComponent(‘note‘, () => Note);
React Native提供AppRegistry，用于注册第一个呈现的组件，称为根组件。
其参数中，第一个是名字，第二个()=>Note是Es2015的双箭头函数，类似其它语言中的lambda函数，
等同于func(return Note);如果有一个或多个参数，在括号中处理.
Note，是一个类，这里的写法实际上创建了Note类的一个实例，调用了Note类的构造方法

# 分离出单独的Note组件：
一般项目，不会只有一个源文件。
我们创建src目录，在其中创建一个note.js的文件，然后将这里的组件移植过去。加上必要的引用，为组件类
加上默认导出：export default.
在index.android.js里删掉该组件相关的代码和导入，增加对‘.\src\note‘的导入。