react 状态机是什么?

react 状态机是什么? 下面本篇文章就来和大家一起初体验 react 的状态机. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.

React 把组件看成是一个状态机 (State Machines). 通过与用户的交互, 实现不同状态, 然后渲染 UI, 让用户界面和数据保持一致.

React 里, 只需更新组件的 state, 然后根据新的 state 重新渲染用户界面 (不要操作 DOM).

什么是状态机

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

1现态: 是指当前所处的状态.

2条件: 当一个条件被满足, 将会触发一次状态的迁移.

3动作: 条件满足后执行的动作. 动作执行完毕后, 可以迁移到新的状态, 也可以仍旧保持原状态. 动作不是必需的, 当条件满足后, 也可以不执行任何动作, 直接迁移到新状态.

4次态: 条件满足后要迁往的新状态."次态" 是相对于 "现态" 而言的,"次态" 一旦被激活, 就转变成新的 "现态" 了

什么是事件

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

比较状态机和事件的区别

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"));

注意: 区分状数据双向绑定. 官方是严格要求数据是单向传递的

更多 react 的相关知识, 可访问: web 前端课程 https://www.html.cn/ !!

来源: http://www.css88.com/qa/react/18036.html