Mobx总结

Mobx要点

使用Mobx将一个应用变为响应式：

1. 定义状态并使其可观察
   可以用任何数据结构来存储状态，为属性标记上mobx标记使其可观察即可，通过observable修饰属性使其可观察。
   Tips: mobx可能无法检测到复杂结构数据深层次的变动，导致无法带动视图渲染。因此尽量使用简单结构，层次浅的数据。在必要时也可使用@map修饰你的数据，使其深层次可观察。这可能是你常见的数据变化却无法看到视图重新渲染的原因。

2. 创建视图以相应状态的变化
   创建视图，标记视图让其观察所依赖的可被观测的数据，当数据发生改变时，视图会自动更新。mobx以最小限度的改变更新视图。
   observable: 被观察者（数据模型）
   observer: 观察者(视图或任意函数)
   Tips: 当你具备数据驱动视图渲染的思维之后，便很容易能够理解和接受以数据为核心的驱动方案。视图骨架需要在数据血液的充盈下才能够焕发活力与生机，变得生动而形象。

3. 更改状态
   更改状态，根据你的需要，变动你的数据模型。变动后的数据会反馈到视图上，重新渲染必要的部门。
   Tips: 在mobx中我们通过action来修饰数据控制器，尽量标准化你的代码，仅在acion中修改你的数据模型。

API

Observable

• 对象上只有初始化时便存在的属性会被观察到变化，创建键是动态的对象使用Observable Map。
• @observable key = value 同 extendObservable(this, { key: value })

computed

计算值是可以根据现有的状态或其它计算值衍生出的值。无需常见新的observable变量来存储，类似于excel的公式。
Tips: computed创建的函数只有当它有自己的观察者时才会重新计算。

Autorun

autorun创建的响应式函数，本身不会有观察者。使用autorun时，函数立即被触发一次，每次它的依赖数据改变时会再次被触发。

构建大型可扩展可维护项目的最佳实践

Stores
主要职责: 将逻辑和状态从组件中移至一个独立的，可测试的单元。

优化React组件渲染

• 使用大量的小组件，组件越小，重新渲染产生的变化越小。
• 在专用组件中渲染列表，react协调（差异树比较算法）十分损耗性能。用单独的组件只渲染列表，使其渲染环境闭合。
• 不要使用数组索引或可能改变的值作为key。
• 尽量晚的使用间接引用值。
  快的：<DisplayName person={person} />
  慢的：<DisplayName name={person.name} />
  name属性变化时，第一种情况只会触发DisplayName组件重新渲染，第二张情况DisplayName的父组件也需要重新渲染。
• 尽早绑定函数。

不好的：

render() {
    return <MyWidget onClick={() => { alert('hi') }} />
}

好的：

render() {
    return <MyWidget onClick={this.handleClick} />
}
handleClick = () => {
    alert('hi')
}

---

• ← Previous Post
• Next Post →