[MobX] MobX fundamentals: deriving computed values and managing side effects with reactions

最新推荐文章于 2024-04-26 22:35:19 发布

weixin_30328063

最新推荐文章于 2024-04-26 22:35:19 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6071447.html

本文通过实例演示了如何使用MobX进行状态管理。主要介绍了MobX中Observables、Computed属性和Reactions的作用及其实现原理。通过温度转换的例子展示了如何响应式地更新UI并优化计算过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Derivations form the backbone of MobX and come in two flavors: computed values are values that can be derived from the state automatically. And reactions can be used to manage side effects, such as drawing the user interface. In this lesson you will learn how these concepts relate to each other and how they are optimized automatically by MobX.

const {observable, computed} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const DevTools = mobxDevtools.default;

const t = new class Temperature {
  @observable unit = "C";
  @observable temperatureCelsius = 25;

  @computed get temperatureKelvin() {
    console.log("calculating Kelvin")
    return this.temperatureCelsius * (9/5) + 32
  }
   
  @computed get temperatureFahrenheit() {
    console.log("calculating Fahrenheit")
    return this.temperatureCelsius + 273.15
  }
   
  @computed get temperature() {
    console.log("calculating temperature")
    switch(this.unit) {
      case "K": return this.temperatureKelvin + "ºK"
      case "F": return this.temperatureFahrenheit + "ºF"
      case "C": return this.temperatureCelsius + "ºC"
    }
  }
}
   
const App = observer(({ temperature }) => (
  <div>
    {temperature.temperature}
    <DevTools />
  </div>
))

ReactDOM.render(
  <App temperature={t} />,
  document.getElementById("app")
)