Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React + mobx分享(黄英杰)

1,754 views

Published on

Sharing how to development with mobx + react.
Unhappy with redux? try mobx which can save you life.
MobX can make react state managment super easy and natural again.

Published in: Technology

React + mobx分享(黄英杰)

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

×