Mobx 学习成果

 

• 主要技术栈是使用 React ，所以主要写关于Mobx-React

Mobx核心API

• observable、 computed、 reactions 和 actions

• observable 将数据制作成可观察数据，当数据更改时，使用该数据且被observer(mobx-react提供)包裹的组件会re-render

• computed 根据 observable 数据自动计算出新值，computed 是惰性计算，当使用到该值时才会运行，Mobx可以自动垃圾回收

• actions 改变observables 建议对任何修改 observables 或具有副作用的函数使用 (@)action

  • runInAction(f) 实际上是 action(f)() 的语法糖。在副作用函数中，可以将Promise函数返回的数据设置写在 runInAction(f) 中

• reactions 用法: reaction(() => data, (data, reaction) => { sideEffect }, options?) reaction 是 computed(expression).observe(action(sideEffect)) 或 autorun(() => action(sideEffect)(expression)) 的语法糖。接收两个函数参数，即第一个参数计算出的数据，作为第二个函数的入参，可以使用computed observe实现同样效果，我一般不用

Mobx-React

两种包裹组件的方式

• 使用装饰器 @observer

  // ---- ESNext syntax with decorators ----
  ​
  @observer
  class TodoView extends React.Component {
      render() {
          return <div>{this.props.todo.title}</div>
      }
  }
  ​
  // ---- or just use a stateless component function: ----
  ​
  const TodoView = observer(({ todo }) => <div>{todo.title}</div>)

   

• Observer 包裹使用了 observable 的组件

  <Observer>{() => <div>{this.props.person.name}</div>}</Observer>

Global error handler with onError

• 使用 onError 全局处理错误

  import { onError } from "mobx-react"
  ​
  onError(error => {
      console.log(error)
  })

• 组件有错误记录到控制台但是页面没有崩溃，可能会忽略该错误，使用这个全局拦截观察组件抛出的错误

Notice

• 使用 @observer 不要实现 shouldComponentUpdate

  • 原因

    • 会覆盖Mobx提供的默认实现

  • 一定要实现sCU

    • split the component into two, a reactive and non-reactive (with the sCU) part

      将组件分为响应的和带有sCU不响应的

    • use <Observer> sections instead of observer on the entire component

      使用Observer包裹使用了可观察数据部分

• PureComponent不要与observer一起用

  • 原因

    • PureComponent用于不会自己自动更新的组件

    • observer运行在父组件不知道的情况下自己更新自己

Provider and inject

• Provider 可传递stores给子组件，当不想显式地通过多个组件层传递一些属性(主要使用了React's context 机制)

• inject 可以从 Provider 提供的stores中挑选出需要用的

• observer 注解should be the inner decorator

  // 子组件注入 color store, 通过 this.props.color 访问
  @inject("color")
  @observer
  class Button extends React.Component {
      render() {
          return <button style={{ background: this.props.color }}>{this.props.children}</button>
      }
  }
  ​
  class Message extends React.Component {
      render() {
          return (
              <div>
                  {this.props.text} <Button>Delete</Button>
              </div>
          )
      }
  }
  // 父组件提供了 color store
  class MessageList extends React.Component {
      render() {
          const children = this.props.messages.map(message => <Message text={message.text} />)
          return (
              <Provider color="red">
                  <div>{children}</div>
              </Provider>
          )
      }
  }

componentWillReact (lifecycle hook)

• 当组件的可变数据变动时，componentWillReact 触发

• 该生命周期在初始化render时不会触发，用 componentDidMount or constructor

• 要触发 componentWillReact 必须要在render里面有用到该变量

PropTypes

用于给组件添加属性的验证

MobX-react provides the following additional PropTypes which can be used to validate against MobX structures:

• observableArray

• observableArrayOf(React.PropTypes.number)

• observableMap

• observableObject

• arrayOrObservableArray

• arrayOrObservableArrayOf(React.PropTypes.number)

• objectOrObservableObject

Use import { PropTypes } from "mobx-react" to import them, then use for example PropTypes.observableArray