RN 基础

最新推荐文章于 2024-08-06 16:45:24 发布

jielp

最新推荐文章于 2024-08-06 16:45:24 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/jielp/article/details/53213105

版权

React和RN:
React是facebook页面组件的抽象和形态的技术方案--Web
RN app 编译后的原生应用
JavaScript用在不同的地方
ReactNative 框架，jsc react
跨平台，组件，web的发布能力
提供了原生ui组件，手势识别，FlexBox的css布局模式，跨平台，可使用npm中的模块，
特点：JSX语法，组件化模式，Virtual DOM ，单向数据流
基本模式：每个React应用组件组合，组件是由属性和状态来配置，当状态发生变化时更新ui，组件结构是由虚拟的DOM来维护，确保了实际更新的DOM只包括真正产生了状态变化的部分
同一套技术应用不同端

环境搭建
 最新系统
 xcode-select --install
 homebrew 环境变量等等一条龙服务
 watchman和flow：监视文件并记录文件改动情况和检查JavaScript的静态类型的检查器，找出JS代码中的类型错误
 git等
 nodejs nvm nvm alias default install 
 检查端口是否在使用
 装RN

使用Sublime Text 编写JSX
SublimeText 3 安装package control
Control+~
Commond+Shift+P
install package control
babel
也就是为了识别JSX

新建项目：

1、// 创建新项目，项目名称为Test
 react-native init HelloReact

2、执行

adb devices 
  // 上述会列出当前可以使用的设备，如果列表为空，则后续的无法运行。
  // 第二步，开启一个命令行控制台，进入项目目录 
  react-native start
  // 上述命令是开启jsbundle服务器，用于测试设备上Reload JS的服务器。
  // 第三步, 再开启一个新的命令行控制台，进入项目目录
  react-native run-android
 在调用react-native run-android命令时，其实这个命令就是执行的两部分操作一是是构建你的android项目并生成apk，另外一个是打开react-native的package管理工具同时编译你的js文件，其实可以在项目根目录的package.json下找到

热更新，页面调试

RN 项目结构：
  package.json记录一些模块版本信息
node_modules/react-native packager 负责读取JSX和构建JavaScript代码打包工具
 local_cli
 node_modules/art 在RN绘制 JS 类库  android 放置源代码地方等等，babel ES5
ios 入口文件
index_android.js 
.flowconfig JS 代码检查
哪些要检查哪些不要 gitignore 

入口文件包含的4个部分：

导入模块 ES6 import
class extends
render return JSX 语法格式

const
registerComponent注册

原理：
1 React Native for Android 和 for IOS的基本原理是一致的，通过android的JavaScriptCore来异步解析js代码(jsbundle文件)，然后根据引入的支持和配置，渲染成原生native组件。 
JSX 允许我们写 HTML 标签或 React 标签，它们终将被转换成原生的 JavaScript 并创建 DOM。

React 是一套可以用简洁的语法高效绘制 DOM 的框架 所谓的“高效”，是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象，它与 DOM 是一一对应的关系，也就是说只要有 Virtual DOM，我们就能渲染出 DOM。
当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM。

2 复用React系统，也减少了一定学习和开发成本，更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json，然后由Native将这个数据映射成真正的布局视图。

组件生命周期：