We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
unhappy with redux? try mobx.
这是redux作者Dan Abramov主动为自己的成名作推荐的可选库
大家都比较熟悉redux，但是真正使用或是熟练使用redux的同学特别少，而且，当你的应用的规模和复杂度还没到那个级别的时候，其实真的没有必要去使用redux，那样反而让你和你的团队陷入那种为了使用而使用的尴尬处境。
什么时候适合去使用redux呢，除非你和你的团队是比较熟悉函数式编程方式的，以及你和你的团队要习惯redux的规范，这两点也是vue常常抨击的。搞技术的人，有的时候真的是很偏执，知乎上可见热闹场面。
如果你对函数式编程不是那么习惯，如果你熟悉面向对象编程，如果你熟悉之前的前端MVVM框架写法，那么，我们一起拥抱mobx吧，而mobx又是什么呢？
MobX 是社区产出的一个简单、可伸缩的状态管理解决方案，是一个可以单独使用的前端库，但大家一般都会将它和react结合在一起使用，所以接下来我们将一起了解一下如何使用mobx + react。
MobX
如果你熟悉MVVM思想，下面这个例子应该很好理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="react-log"></div> <script src="/https://cdn.jsdelivr.net/g/react@15.4.0-rc.3(react.min.js+react-dom.min.js),lodash@4.16.4"></script> <script src="/https://unpkg.com/mobx@2.6.0/lib/mobx.umd.min.js"></script> <script src="/https://unpkg.com/mobx-react@3.5.8/index.js"></script> <script src="/https://rawgit.com/mattruby/mobx-examples/master/logging-utils.js"></script> <script> wrapConsole(); </script> <script> // 定义模型 var data = { firstName: 'guo', lastName: 'yongfeng', age: 10, get fullName () { console.count('fullName'); return this.firstName + ' ' + this.lastName; } } // 绑定观察 var person = mobx.observable( data ); // autorun 方法用于自动监听执行 mobx.autorun(function () { console.log('autorun: ' + person.fullName + ' ' + person.age); }); // 修改person的firstName字段 // autorun 中的方法监听到person的相关字段变更后会自动执行 person.firstName = 'iuap'; person.firstName = 'design'; </script> </body> </html>
state
大致算是react的state的拓展：state驱动着你的应用，通常是特定的领域对象。比如todo任务的列表，或者ui相关的状态，比如选中的元素，loading状态等。这些state是被观察的本源，其他的东西，都是从这些state派生出来的。
action
一段改变state的代码。这个实在没啥好解释的。
Derivations
从state派生出来的东西.包括
a)派生的属性，比如尚未完成的todo任务列表，使用 todo 列表派生。这些派生属性，也可以作为其他属性的依赖，这样一直派生下去。
b)带有副作用的反应（reactions），比如todo列表变动后，在console里输入些东西，ui上的变动。
如果Derivations所依赖的state一改变，Derivations也要相应的改变或者触发一些副作用。
相对应，mobx提供了几个重要的decorator和重要方法.（api当然不止这些，核心是这几个，还有很多优化类，补强功能类，和规范代码类的api）
decorator
@observable
在你的state（通常是类的实例属性）前，加上这个就可以了，这个字段会成为被观察的本源。比如
被观察的本源
@observable price = 0; @observable amount = 1;
@computed
派生出来的属性。
@computed get total(){ return this.price * this.amount; }
如果price或amount任意一个发生改变，total也会相应改变。
autorun
派生副作用
autorun(()=>{console.log(total.get())})
这个匿名函数，依赖于total产生io的副作用。只要total变化，就会打印total的值。这里实际上形成了一个派生链，（price,amount）=> total => console.log(total.get())
（price,amount）=> total => console.log(total.get())
对于ui来说，ui = f(state,props),把f看成是render函数，那么
ui = f(state,props)
autorun(()=>{render(state,props)}
即可以更新view。 autorun里函数的执行，也是根据state的变化，自动触发的。
根据这几个基本组成，是否能大致想象自动更新view的流程？
mobx和react的结合
（未完待续）
The text was updated successfully, but these errors were encountered:
No branches or pull requests
快速了解mobx+react
这是redux作者Dan Abramov主动为自己的成名作推荐的可选库
大家都比较熟悉redux，但是真正使用或是熟练使用redux的同学特别少，而且，当你的应用的规模和复杂度还没到那个级别的时候，其实真的没有必要去使用redux，那样反而让你和你的团队陷入那种为了使用而使用的尴尬处境。
什么时候适合去使用redux呢，除非你和你的团队是比较熟悉函数式编程方式的，以及你和你的团队要习惯redux的规范，这两点也是vue常常抨击的。搞技术的人，有的时候真的是很偏执，知乎上可见热闹场面。
如果你对函数式编程不是那么习惯，如果你熟悉面向对象编程，如果你熟悉之前的前端MVVM框架写法，那么，我们一起拥抱mobx吧，而mobx又是什么呢？
介绍
MobX是社区产出的一个简单、可伸缩的状态管理解决方案，是一个可以单独使用的前端库，但大家一般都会将它和react结合在一起使用，所以接下来我们将一起了解一下如何使用mobx + react。快速上手示例
如果你熟悉MVVM思想，下面这个例子应该很好理解
核心概念
mobx 的几个关键组成
state
大致算是react的state的拓展：
state驱动着你的应用，通常是特定的领域对象。比如todo任务的列表，或者ui相关的状态，比如选中的元素，loading状态等。这些state是被观察的本源，其他的东西，都是从这些state派生出来的。action
一段改变state的代码。这个实在没啥好解释的。
Derivations
从
state派生出来的东西.包括a)派生的属性，比如尚未完成的todo任务列表，使用 todo 列表派生。这些派生属性，也可以作为其他属性的依赖，这样一直派生下去。
b)带有副作用的反应（reactions），比如todo列表变动后，在console里输入些东西，ui上的变动。
如果Derivations所依赖的state一改变，Derivations也要相应的改变或者触发一些副作用。
相对应，mobx提供了几个重要的
decorator和重要方法.（api当然不止这些，核心是这几个，还有很多优化类，补强功能类，和规范代码类的api）@observable在你的
state（通常是类的实例属性）前，加上这个就可以了，这个字段会成为被观察的本源。比如@computed派生出来的属性。
如果price或amount任意一个发生改变，total也会相应改变。
autorun派生副作用
这个匿名函数，依赖于total产生io的副作用。只要total变化，就会打印total的值。这里实际上形成了一个派生链，
（price,amount）=> total => console.log(total.get())对于ui来说，
ui = f(state,props),把f看成是render函数，那么即可以更新view。 autorun里函数的执行，也是根据state的变化，自动触发的。
根据这几个基本组成，是否能大致想象自动更新view的流程？
mobx-react
mobx和react的结合
（未完待续）
The text was updated successfully, but these errors were encountered: