• 1. MobX 介绍
  • 1.1. MobX 要点
  • 1.2. 概念与原则
• 2. API概览
• 1. observable 相关
  • 3.1. observable
  • 3.2. @observable
  • 3.3. objects
  • 3.4. arrays
  • 3.5. maps
  • 3.6. boxed values
  • 3.7 decorators
• 1. 对 observables 作出响应
  • 4.1. (@)computed
  • 4.2. autorun
  • 4.3. when
  • 4.4. reaction
  • 4.5. (@)observer
  • 4.6. 理解 MobX 对何作出响应
• 1. 改变 observables
  • 5.1. action
  • 5.2. async actions & flows
  • 5.3. Object api
• 1. 工具函数
  • 6.1. toJS
  • 6.2. extendObservable
  • 6.3. createAtom
  • 6.4. intercept & observe
  • 6.5. mobxUtils.fromPromise
  • 6.6. mobxUtils.fromResource
  • 6.7. mobxUtils.toStream
  • 6.8. mobxUtils.fromStream
  • 6.9. mobxUtils.now
  • 6.10. mobxUtils.createTransformer
  • 6.11. mobxUtils.expr
  • 6.12. complete api overview
• 7. 博客、 视频及相关项目
• 1. 贴士与技巧
  • 8.1. 常见问题解答
  • 8.2. 常见陷阱与最佳实践
  • 8.3. 如何(不)使用装饰器
  • 8.4. 使用 trace 进行调试
  • 8.5. 定义数据存储
  • 8.6. 优化 React 组件
  • 8.7. 开发工具
  • 8.8. spy
• 9. 捐赠
• Published with GitBook

6.11. mobxUtils.expr

Expr

由 mobx-utils 包提供。

expr 可以用来在计算值(computed values)中创建临时性的计算值。 嵌套计算值有助于创建低廉的计算以防止运行昂贵的计算。

在下面示例中，如果 selection 在其他地方改变，表达式会阻止 TodoView 组件重新渲染。 相反，只有当相关待办事项被(取消)选择时，组件才会重新渲染，这样发生的频率要低很多。

const TodoView = observer(({todo, editorState}) => {
    const isSelected = mobxUtils.expr(() => editorState.selection === todo);
    return <div className={isSelected ? "todo todo-selected" : "todo"}>{todo.title}</div>;
});

expr(func) 是 computed(func).get() 的别名。

请注意，传给 expr 的函数将在整个表达式值更改的情况下评估两次。 当它依赖的任何 observables 变化时，它会进行首次评估。 当其值的变化触发外部计算或反应评估时，将对其进行第二次评估，这将重新创建和重新评估表达式。

results matching ""

No results matching ""