React Native之React基础

发布时间 2023-05-09 16:29:14作者: 朝阳向日葵
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树上,视图就更新了