React Native状态机和应用设计思路

  在原生Android开发中:当用户点击“登录”按钮时,从用户名输入框中读取用户输入的用户名,从密码输入框中读取用户输入的密码,然后交给注册模块去处理。但是,React Native不是这样的思维。

一、状态机

1.1 状态机思维

  React框架将所有的UI视为一个简单的状态机,那么任意一个UI场景就是状态机的一种状态。根据决定状态的状态机变量的值,React框架渲染状态机的当前状态——对于开发者来说,单个UI场景就被渲染出来了。随着状态机变量值的改变,UI状态机也在不停地改变状态,UI场景也随之不停地被重新渲染。这样一个过程可以很轻松地做到数据与UI保持一致。

  每一个通过React.createClass(这是ES5的语法,也可以用ES6的语法)建立的组件都可以有一个名为setInitialState的函数。当组件被初始化时,该函数被执行。通常在这个函数中声明需要用到的状态机变量。

  在上图中,声明了三个状态机变量。

1.2 状态机变量

  在React Native代码中,我们可以通过“this.state.状态机变量名”来访问状态机变量。访问意味着可以读取变量的值,也可以改变变量的值。

  在React Native开发中,开发者需要将状态机变量视为“不可变的变量”。在开发者的代码中,永远不要出现“this.state.某状态机变量名 = 某值;”这样的语句。当开发者需要改变状态机变量的值时,一定要并且只能用this.setState函数。

  状态机变量的改变会导致React Native组件的重新渲染。提高React Native应用程序的性能的一种方法就是努力减少状态机变量的数目。

  React Native应用程序工作时,React Native组件接收各种事件,对所接收到的事件的处理可能导致处理结果中的某些数据需要显示在UI界面上。这些数据可以成为该React Native组件的状态机变量。我们把他们称作状态机变量备选名单。

  开发者需要对这份名单上的数据做进一步分析,找出重复的数据。重复的数据是指:(1)该数据可以由备选名单上的其他数据通过某种规则计算得出;(2)该数据可以由组件中的数据通过某种规则计算得出;(3)该数据可以由备选名单上的其他数据再加上属性上的某些数据按某种规则计算得出。

  把这些重复的数据踢出备选名单,就得到了一个状态机变量的最小集。

  不要把一个React Native组件放在状态机变量中,应该把它放在render函数中,让它成为本组件的子组件。

二、React Native设计思路

  一个好的React Native设计思路是:创建多个只负责渲染数据的无状态React Native组件,将它们封装在一个有状态的React Native组件中,并把这个有状态的React Native组件的状态机变量的值通过props传给无状态的React Native组件(这时这些无状态的React Native组件是有状态的React Native组件的子组件)。

时间: 2024-10-12 06:54:16

React Native状态机和应用设计思路的相关文章

React Native 技术 开发跨平台 Native App 初探

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/64190798 我们已经了解像 Titanium 和 PhoneGap 等框架,它们能让开发者用 Web 技术构建移动应用.这是一个优势,支持开发者使用原先网络和移动开发的相关技术.仅如此,相同的代码库经过小幅度的修改便能适用多个平台--这就是著名的一次编写,到处运行.然而,当涉及到构建应用的性能时,这些框架的缺点显露无遗,尽管它们有一些吸引力,但却一直更适用于构建原生应用.Rea

JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士.曾任沈阳东软股份项目经理.51CTO学院签约讲师.从事软件研究和开发超过20年.长久以来一直从事Java.Android.iOS.C++.Swift.Objective-C以及跨平台游戏引擎(Cocos2d-x.Unity3D等)的开发和技术指导工作.对国内外相关领域的技术.理论和实践有很深的理解和研究. 主要著作包括<Cocos2d-x实战游戏开发指南>(即将出版).<Swift权威指南>.<Android深度探索 卷1和卷2>

[转] 在React Native中使用ART

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中

React-Native(三):React Native是基于React设计的

React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 这个项目

谈谈APP架构选型:React Native还是HBuilder

原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid app开发技术方案:RN(react native),HBuilder.React Native是大名鼎鼎的Facebook的开源技术框架,而HBuilder是国内的H5工具开发公 司DCLOUD的产品.我自己先总结下吧:这两个技术框架在开发效率上基本上可以媲美WEB开发的速度,RN强调的是“Learn

React Native资料

React Native 环境搭建 React Native 配置和起步 Sublime Text 3 搭建 React.js 开发环境 集成 ReactNative集成到已有工程中-IOS React Native集成到现有项目(非cocoa pods) 语法 ES 6入门 ES6新特性概览 React入门教程 React中文网 React Native中文网 布局 Flex布局 Flex 布局教程:语法篇 Flex 布局教程:实例篇 混编 React Native构建本地视图组件 React

【React Native】源码分析之Native UI的封装和管理

??ReactNative作为使用React开发Native应用的新框架,随着时间的增加,无论是社区还是个人对她的兴趣与日递增.此文目的是希望和大家一起欣赏一下ReactNative的部分源码.阅读源码好处多多,让攻城狮更溜的开发ReactNative应用的同时,也能梳理RN项目的设计思路,增加自己的内功修为,^_^. ??好的,就让我们轻松的开始吧.此篇是以Android平台源码分析为主,分享Native UI的封装和管理,重点涉及react-native源码中com.facebook.rea

一个资深iOS开发者对于React Native的看法

一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头.毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具. 我已经创造了一些我引以为傲的iOS应用——一些使用Object-C和Xcode构建的应用,通常人们都是这么做的.这两样工具是苹果公司

React Native Android 应用层实战沦陷记

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 一眨眼又一年快要过去了,原计划今年的最后一个小目标(React Native)看样子要留尾巴到明年了,React Native 想说爱你不容易.怎么评价你呢?应用层 JSX 编写还是很友好的,尼玛框架接入的各种锅却让人痛哭不已,万事开头难,对于 React Native 的接入可以说大量工作可能都需要投入到框架接入中(各种灰度实验的兼容性.各种锅),一旦接入稳定以