发现Reactjs的闪光点(this.state)
发布于 9 年前 作者 deemstone 4699 次浏览 最后一次编辑是 8 年前 来自 分享

前两天用了一下reactjs,比较容易上手,概念设计很直接,编码风格很直观(虽说是jsx语法) 嗯,虽说jsx是自造的语法,但是用起来很直观,几乎没有学习成本(其实我早就想把组件的HTML和js放到一个文件中维护了) 昨天看了几篇老外的文章(Google关键字:React.js vs Angular.js vs ember.js)问区别、优缺点、适合什么样的场景。

其中有人着重提到:http://discuss.emberjs.com/t/can-reactjs-be-used-as-a-view-within-emberjs/3470/10

Because we always have the entire state of the UI in a single piece of data we can trivially serialize all of the important app state - we don’t need to bother with serialization protocols, or making sure that everyone implements them correctly. Om UI states are always serializable, always snapshotable.

This also means that Om UIs get undo for free. You can simply snapshot any state in memory and reinstate it whenever you like. It’s memory efficient as ClojureScript data structures work by sharing structure.

其实写“交互程序”,就是维护一堆状态 ,用户动作之后触发状态改变,界面要根据最新状态做相应的改变来反馈用户。 我经常举例的模型是“打电话”(座机)

  1. 首先要“提机”,这时候状态:可以拨号、有忙音、开始计时器
  2. 拨号之后,只能等待对方接听、挂机
  3. 接通后,只能挂机或对方挂机(不考虑高级功能,电话会议啥的……)
  4. 一方挂断后,嘟…嘟…嘟… 只能挂机
  5. 挂机后,只等待提机、没声音、键盘不响应 我只想说,这么简单的交互过程,写代码至少要管理3个标志位,在至少5种状态之间的变化……

reactjs把这些状态直接抽象到一个独立的数据结构中:this.state (跟agular的model差不多)不过,这个state来的更纯粹,改变state的值,就像控制动画的时间轴 这使得 undo redo 的功能在reactjs中很容易实现,并且可以像VCR一样随时回访。

这是我欣赏到的Reactjs的亮点,它对“交互程序”的抽象很实用,以至于可以翻译出 React Native !

2 回复

给你一个 react + nwjs 写的代码。

https://github.com/XadillaX/zhaofuli-reader

@xadillax 值得学习 棒!(我是说源码呢哈 …… ) 学习你的源码目录结构,很清晰。

回到顶部