文档章节

初体验react的状态机

fir01
 fir01
发布于 2016/03/03 22:41
字数 949
阅读 782
收藏 3

「深度学习福利」大神带你进阶工程师,立即查看>>>

一、什么是状态机

状态机可归纳为4个要素,即现态、条件、动作、次态。这样的归纳,主要是出于对状态机的内在因果关系的考虑。“现态”和“条件”是因,“动作”和“次态”是果。详解如下:

①现态:是指当前所处的状态。
②条件:当一个条件被满足,将会触发一次状态的迁移。
③动作:条件满足后执行的动作。动作执行完毕后,可以迁移到新的状态,也可以仍旧保持原状态。动作不是必需的,当条件满足后,也可以不执行任何动作,直接迁移到新状态。
④次态:条件满足后要迁往的新状态。“次态”是相对于“现态”而言的,“次态”一旦被激活,就转变成新的“现态”了


二、什么是事件

当类对象的某个状态发生变化时,系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。


三、比较状态机和事件的区别


状态机
事件
状态机仅仅是状态迁移,并不关注状态变化后大家干什么。perfect,分离了关注点,所有组件可以选择自己想关注的“状态”来自适应变化。
关注事件和结果
谁都能得到状态

广播状态,主动选择适应。基本可以不用事件监听机制了。 注册-监听,全局监听管理。及耗浏览器性能
只管生不管养,如果土壤好,环境好,长的自然好
如果没有强硬的编码规范约束,肯定是一锅粥
管生管养,成本高,效率低
状态控制UI,导致UI的重用率高,界面和数据完整分开 通常的js框架界面模板多数用完即销毁,反复服务器存取


handleAdd: function() {
........
this.setState({items: oldItems});
.........
this.setState({items: oldItems});
}



五、原则

1)如果使用react你的第一原则就是使用状态机去解决一切,别用flux这些插件。

非官方的react-router,react-motion,他们都是使用非状态机的方式来做的,更应该避而远之。

2)让状态进入系统设计,变为系统开发过程全程可控的。

3)UI被状态全程控制。状态不能滥用,只能用于UI控制

4)状态双向绑定:系统设计严格区分层级,控制状态传递在父子之间,祖辈之间禁止传递状态。react原则上状态是可以任意传递的。

5)不要使用框架。react自己本身都还在反复完善阶段。你用框架是给自己挖坑。原生的和使用jquery这类框架也没什么区别

如有三层:A->B->C->D,AB之间可以互通,BC,CD都可以,但是AC,AD这类跨层次需要严格禁止。

6)react原则上不建议在原生html的dom中写数据的,如下面一种方式是不建议使用,二是建议包装下div,作为重复可用组件:


<div key="123"
            viewState="1234"
            viewdState={StateCode.MainBoxItem}
            data-view-state={StateCode.MainBoxItem}
            onClick={this.handleItemShow}
          >
            1\main  page.click me
          </div>
经编译后在谷歌浏览器看到的结果:
<div data-view-state="MainBoxItem" data-reactid=".0.0.0.0.2.$123">1\main  page.click me</div>

说明了只有前缀为"data-"的属性才会最终被渲染到真实dom,另外我们怎么获取到这个data-view-state的属性值呢?在handleItemShow方法中使用


console.log(event.nativeEvent.target.getAttribute("data-view-state"));
注意:区分状数据双向绑定。官方是严格要求数据是单向传递的,个人也赞同
fir01
粉丝 19
博文 110
码字总数 34117
作品 0
长沙
项目经理
私信 提问
加载中
请先登录后再评论。
硬实时操作系统--Raw OS

Raw-OS 起飞于2012年,Raw-OS志在制作中国人自己的最优秀硬实时操作系统。 Raw-OS 操作系统特性 内核最大关中断时间无限接近0us, s3c2440系统最大关中断时间实测0.8us。 支持idle任务级别的事...

jorya_txj
2013/03/19
6.4K
1
神经网络库--GoNN

GoNN是一个用GO语言写的神经网络库 GoNN目前实现了BP网络,RBF网络和感知机 在著名的手写体字符识别数据库MNIST上,GoNN达到了98.2%的正确率。 此外,项目中还包含简单的例子:sin曲线拟合、鸾...

fxsjy
2012/11/01
4.2K
0
给你一面3D墙看图片视频--Cooliris

想要更酷的3D浏览体验,试试这款扩展吧。浏览本地图片、google图片搜索结果,或是查看新闻、影音网站,都可以实现流畅的3D效果哟~~ 点击浏览器右上方的Cooliris按钮,出现Cooliris页面,Cha...

匿名
2012/11/09
1.6K
0
编程语言--Tcl/Tk

Tcl/Tk 是一种简明,高效,可移植性好的编程语言。在信息产业领域具有广泛的应用。 Tcl/Tk 的发明人 John Ousterhout 教授在八十年代初,是伯克利大学的教授。在其教学过程中,他发现在集成电...

匿名
2012/11/11
8.7K
0
手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的) react-native...

Common1140
2015/12/24
1.1W
45

没有更多内容

加载失败,请刷新页面

加载更多

如何查找Linux中所有777权限的文件?

正确的设置文件权限是Linux系统管理中最关键的部分。一个权限为777的文件对每个人都是开放的,可以读和写。任何登录到系统的用户都可以对这个文件进行写入。这对您的服务器系统是具有很大的安...

osc_3grma05a
15分钟前
10
0
信越KBM-403--高质量复合材料

     信越KBM-403硅烷偶联剂是由有机物以及硅构成的化合物。硅烷偶联剂的分子中,具有能够与无机材料进行化学性结合的,和能够与有机材料进行化学性结合的两种以上的不同的反应基团。  ...

feiyoufei
16分钟前
9
0
Spring定时任务 2步轻松搞定

这短时间工作需求中涉及到Spring定时任务,今天来整理一下 Spring定时任务其实很简单,只需要两步,就好像把大象放进冰箱需要两步一样 1,打开冰箱门 2,把大象放进去 同理Spring两步编码实现定时...

lixingsikao
16分钟前
70
0
nginx启用域名访问,禁止ip直接访问

最近为公司客户搭建一套ToB的平台,该平台的部署机器在客户那边(无法直接登录,需要通过***访问)。为了方便从外部直接访问平台的web页面,我通过frps工具反向代理到我一台公有云机器,这样...

osc_qvtw8r10
17分钟前
0
0
快速搭建一台私有化KMS激活服务器

KMS是批量激活服务器(Key Management Server)的英文缩写,从Windows Vista开始,Microsoft使用多次激活密钥(MAK, Multiple Activation Keys)和密钥管理服务器(KMS, Key Management Ser...

osc_wfhwwd4t
18分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部