React + mobx分享（黄英杰）
- 2. Mobx是什么
- 4. Redux已经很火了
- 5. Redux的初始化
- 10. 我是来买手机的 ~~
- 11. 坊间传闻： 谁用Redux谁加班
- 12. Mobx
- 13. Mobx vs Redux simple straightforward
- 14. Define observable state import { observable } from 'mobx'; const store = observable({ count: 0 });
- 15. Create observer View import { observer } from ‘mobx-react'; @observer class CountView extends React.Component { render() { const { store } = this.props; return (<button>{store.count}</button>); } } React.render(<CountView store={store} />, document.body);
- 16. Modify State …. class CountView extends React.Component { onClick = () => this.props.store.count +=1 render() { … return (<button onClick={this.onClick}>{store.count}</button>); } }
- 17. Mobx VS Redux Mission all complete!
- 18. Mobx vs Redux • Define your state and make it observable • Create a view that responds to changes in the State • Modify the State
- 21. Mobx vs Redux
- 22. Redux • 全局setState（万恶之源） • shouldComponentUpdate • immutable.js
- 23. SCU + Immutable • 繁琐 • 改变开发习惯
- 24. @Observer import { observer } from ‘mobx-react'; @observer class CountView extends React.Component { …… }
- 25. @observer • 依赖了observable 变量的组件都加上 @observer 注解 • @observer 使用越多性能越高
- 26. Mobx 高性能是如何实现的？
- 28. Mobx：@observer • 自动判断哪些state被改变 • 自动且仅更新state已改变的Component • forceUpdate，弃用全局setState
- 30. 实战演练环节
- 31. • What is MobX ? https://jsfiddle.net/huangyingjie1111/r41g4f3k/ • What does @observer do ? https://jsfiddle.net/huangyingjie1111/egu3j7v0/2/
- 32. Mobx @observer react mixins mobx.Reaction+=@observer forceUpdate lifecircles
- 33. Mobx：@observer new mobx.Reaction(name, function() { …… // Update DOM React.Component.prototype .forceUpdate.call(self) });
- 34. React生命周期?
- 35. import { autorun } from ‘mobx'; @observer export default class App extends Component { componentDidMount() { autorun(this.loadMessage); } loadMessage = () => {…} … }
- 36. Mobx优势 • Simple、Straightforward • high performance
- 37. Observe原理 • Getter / Setter • 函数式响应编程(FRP：functional reactive programming) • 观察者模式
- 42. 如何选择
- 43. Redux VS Mobx • Redux = CPU + 主板 + 显卡 + 键盘 + … • Mobx = 品牌笔记本
- 44. Redux VS Mobx • Redux = 地毯式轰炸（全局setState） • Mobx = 精确制导（Reactive）
- 45. 兼容IE8 • Redux: Yes • Mobx: No
- 46. 像Vue.js ?
- 47. Mobx It is inspired by MVVM frameworks like knockout…. vue.js
- 49. Mobx + React = 强化版Vue.js
- 50. Mobx VS Vue.js Mobx的简洁 + React的虚拟 DOM > Vue.js
- 51. 参考资料 • mobx getting start • an in-deep explannation of mobx • mobx git book