React Native之React基础

React Native 的基础是React， 是在 web 端非常流行的开源 UI 框架。要想掌握 React Native，先了解 React 框架还是很有帮助的。主要理解三个概念：组件、状态和 JSX。

使用组件的方式描述 UI

 

使用组件的方式描述 UI在 React 中，所有的 UI 都是通过组件去描述和组织的。可以认为，React 中所有的元素都是组件，具体而言分为两种。

 

内置组件。内置组件其实就是映射到 HTML 节点的组件，例如 div、input、table 等等，作为一种约定，它们都是小写字母。

 

自定义组件。自定义组件其实就是自己创建的组件，使用时必须以大写字母开头，例如 TopicList、TopicDetail。

 

和 DOM 的节点定义类似，React 组件是以树状结构组织到一起的，一个 React 的应用通常只有一个根组件。

使用 state 和 props 管理状态

 

React 的核心机制是能够在数据发生变化的时候自动重新渲染 UI，那么势必要有一个让我们保存状态的地方，这个保存状态的机制就是 state。而 props 就是类似于 Html 标记上属性的概念，是为了在父子组件之间传递状态。

理解 JSX 语法的本质

 

从本质上来说，JSX 并不是一个新的模板语言，而可以认为是一个语法糖。也就是说，不用 JSX 的写法，其实也是能够写 React 的。

 

JSX 其实是一种语法糖。理解这一点非常重要，因为它意味着两点：

 

JSX 的表达能力等价于 JavaScript 的表达能力，那么所有我们可能需要的机制，比如循环、条件语句等等，JSX 其实都能灵活表达。

JSX 几乎不需要学习，只要你会用 JavaScript，就也会用 JSX。

 

所以这也是 React 的“模板语言”区别于 Angluar 和 Vue 的地方，JSX 不是一个新的概念，而只是原生 JavaScript 的另一种写法。但是换成这种写法，就会大大降低你上手 React 的难度。

 

2. React中的核心概念

 

1 虚拟DOM（Virtual DOM）

2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

1. 虚拟DOM（Vitural DOM）

 

React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。

 

为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大。

 

VituralDOM的处理方式

1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中

2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了