从 React到React Native

最新推荐文章于 2023-04-10 21:21:49 发布

星空守候

最新推荐文章于 2023-04-10 21:21:49 发布

阅读量305

点赞数

分类专栏： ReactNativ 文章标签： native RN

本文链接：https://blog.csdn.net/qq_26764181/article/details/52400981

版权

本文介绍了从React基础知识到React Native的过渡，强调了React的虚拟DOM和单向数据流的特点，并提供了三个React实例，包括组件和数据传递、通过state更新视图。还探讨了React Native的引入，讨论了如何在开发成本和用户体验之间取得平衡，以及RN允许前端开发者利用原生UI组件和API的优势。

摘要由CSDN通过智能技术生成

React简介

RN基于React设计，了解React有利于我们开发RN应用。
React希望功能分解化，让开发像搭积木一样，快速而且可维护。

React的3个特点

作为UI（Just the UI）
虚拟DOM(Virtual DOM)
这是亮点,是React最重要的一个特性
更新View很快，放进内存,最小更新的视图
差异部分更新 diff算法
数据（Data Flow）单向数据流

学习React要掌握的只是：

JSX语法类似XML
ES6相关
前端基础 CSS+DIV JS

举例说明React的用法，IDE工具：WebStorm(JavaScript 开发工具 Web前端开发神器插件很丰富,智能代码提示，自动补全)
比如：ReactNative 代码智能提醒（Webstorm）
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTempate
下载模板：https://github.com/wix/react-templates
安装命令：npm install react-templates -g

点击下载Webstorm
点击下载Webstorm破解版

例子

1.例子一（简单组件和数据传递）使用this.props 指向自己的属性

从http://facebook.github.io/react/downloads.html 下载react Kit

react.js react-dom.js：React 的核心文件

JSXTransformer.js browser.min.js：讲JSX转译成js和html的工具

最新的react版本：react-15.3.1

在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后，这个依赖的库改为browser.js，页面script标签的type也由text/jsx改为text/babel 但是以上只能用来测试学习react
生产环境需要借助编译工具事先将jsx编译成js

例如可以使用Node.js做预编译，可以安装react-tools工具
npm install -g react-tools

例子源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第一个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src

最低0.47元/天解锁文章

星空守候

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从 React到React Native

React简介RN基于React设计，了解React有利于我们开发RN应用。 React希望功能分解化，让开发像搭积木一样，快速而且可维护。React的3个特点 * 作为UI（Just the UI） * 虚拟DOM(Virtual DOM) 这是亮点,是React最重要的一个特性更新View很快，放进内存,最小更新的视图差异部分更新 diff算法 * 数据（Data Flow）
复制链接

扫一扫