zoukankan      html  css  js  c++  java
  • mobx的一个记录

       脑子疼,前一段时间工作太忙,忙完一阵子就生病了,脑子疼

      前端的工作时间接触了很多新东西,最近整理了一番

     Mobx :总算找到合适的概括mobx的词了: 状态管理库

    React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

    对于应用开发中的常见问题,React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制, 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持是最新的

    核心概念:

    1.@observable: 可观察者(Observable state(可观察的状态)

    2.@observer:标记组件,可以把你的(无状态函数)组件变成响应式组件 

    3.@computed: 相关数据(可观察者)发生变化时自动更新的值

     黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed

    4.@action:是任一一段可以改变状态的代码

    如果是在严格模式下使用 MobX的话,MobX 会强制只有在动作之中才可以修改状态。

    实用工具:

    1.provider:传递 store 给子组件

    2.inject:挑选 store 作为 prop 传递给目标组件(注入)

    3.tojs:把 observable 数据结构转换成普通的 javascript 对象并忽略计算值

    现认识到的:

    when(表达式,表达式为true时执行的回调函数)

    autorun: 

     

    原则

    MobX 支持单向数据流,也就是动作改变状态,而状态的改变会更新所有受影响的视图。

    Action, State, View

    当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。

    所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值。

    计算值 是延迟更新的。任何不在使用状态的计算值将不会更新,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。

    所有的计算值都应该是纯净的。它们不应该用来改变状态。

  • 相关阅读:
    rancher 2.X 搭建小型web集群+mysql主从复制
    harbor 仓库搭建
    k8s 集群搭建
    oracle sql命令
    IIS实现反向代理
    高并发的大型网站架构设计
    .net core集成vue
    使用TFS玩转Docker自动化部署
    动态创建IIS站点
    网站架构设计(草稿)
  • 原文地址:https://www.cnblogs.com/ljh-zw/p/11177441.html
Copyright © 2011-2022 走看看