mobx

感谢支持ayqy个人订阅号，每周义务推送1篇（ only unique one ）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译） 如果觉得弱水三千，一瓢太少，可以去 http://blog.ayqy.net 看个痛快 一.出发点 在 React 现有的组件模型下，存在很多难以解决的问题： 难以跨组件复用状态逻辑 组件复杂度高难以理解 Class 的诸多弊病 …… 而 Hooks， 肩负着破局使命 组件间逻辑复用 组件间逻辑复用一直是个问题，Render Props、Higher-Order Components等常用 套路 模式都是为了分离横切关注点（Cross-cutting concern），复用诸如： 日志 缓存/同步/持久化 数据校验 错误捕获/异常处理 的逻辑，目的是 将横切关注点与核心业务逻辑分离开 ，以便专注于业务逻辑 P.S.关于切面、关注点等 AOP 概念的更多信息，见AOP(Aspect-Oriented Programming) 然而，HOC 与 Render Props 虽然能以组件形式分离横切关注点，但也带来了一些新问题： 扩展性限制 Ref 传递问题 Wrapper Hell 之所以会出现这些问题，根本原因在于： 细粒度代码复用不应该与组件复用捆绑在一起

　　前端开发框架从最开始的jquery时代，到后来backbone，angular1，再到现在vue和react两分天下，也才用了不到十年的光景。 　　最开始jquery是为了解决浏览器兼容性的问题而火起来的，准确的说它只是一个库，而不能成为框架。但随着前端页面的复杂度的增加，渐渐数据驱动和mv*的思想开始形成，有了backbone，angular等先驱。再之后随着AST，Bable，Webpack等技术的兴起，一个逐渐晚上的前端框架体系也随之建立了起来，如今最入门的就是vue和react了。 　　但由于vue和react要解决的事情和思想非常相近，所以导致很多人在选择到底使用哪种框架进行学习和开发的时候异常头痛。这个问题还是比较难解决的，仁者见仁智者见智，目前看来不仅公司和公司之间选择不同，就连很多大厂在部门之间也存在分歧，一个公司里很多部门都在使用不同的框架。 今天我就我自己的经验来分析一下这两款框架的区别，看看你看重那个方面。 模板引擎：vue的视图模板采用类html的写法加上自己的指令与自定义属性组成，在多数情况下是要比react的JSX写法开发效率高和清晰的。但是在复杂场景下，类html的写法有时候很比较麻烦或者难以胜任，这个时候就凸显出JSX的语言表现力的丰富了。不过vue目前也支持jsx的写法。 样式：vue的样式和模板可以写在同一个文件里

李熠：前端架构 101（一）：在谈论它们之前我们需要达成的共识 ​ zhuanlan.zhihu.com 李熠：前端架构 101（二）： MVC 初探 ​ zhuanlan.zhihu.com 李熠：前端架构 101（三）：MVC 启示录：模块的职责，作用域和通信 ​ zhuanlan.zhihu.com MVC 的不足 事件 在前几篇中，我演示了一个前端 Backbone.js MVC 框架用于解决实际问题的例子。但 MVC 依然存在几个问题 不可预测：当一个事件发生之后，你并不知道会有谁响应这个事件，是单个对象还是多个对象会响应这个事件 级联修改：当一个事件发生之后，A 组件在接收到事件之后在响应的过程中，还可能发出其他的事件触发后续的修改，你并不知道这个事件会在何处结束，会造成什么样的结果。这也和上一条「不可预测」相对应 响应顺序：如果存在多个对象响应同一个事件的话，有时候对响应的顺序是有要求的，某些变更不可以出现在其他的变更之前 有条件响应：对于传播方而言，并非希望所有的时间都一视同仁的广播出去；对于消费方而言，也并不希望一视同仁的响应所有的事件 你可能会认为事件机制存在的问题是否只存在于 Backbone.js 中，那 AngularJS 这个 MVC 框架会不会好一些呢？ 首先 AngularJS（AngularJS 代指 1.x 版本，Angular 代指 2

MobX一直是主要用于JS的主要的状态管理技术。flutter 现在关于状态管理的方案有 Scoped Model，Inherited Widget，Redux for Flutter，甚至是BLoC 。 之前写React的时候就有用过mobx,很是喜欢 , 现在发现提供了dart版本,于是来学习一下. 也许会成为最好用的状态管理工具呢 介绍 MobX只是一个状态管理库，可以很容易地将应用程序的被动数据与UI连接起来. 使用 导包 首先，我们将导入mobx，flutter_mobx，作为我们的依赖项。 此外，我们必须导入mobx_codegen和build_runner作为dev依赖项。 dependencies: flutter: sdk: flutter mobx: ^0.1.4 flutter_mobx: ^0.1.3 dev_dependencies: flutter_test: sdk: flutter mobx_codegen: ^0.1.3 build_runner: ^1.4.0 创建可观察对象 然后我们先创建一个dart文件: /* * author: Created by 李卓原 on 2019/5/16. * email: zhuoyuan93@gmail.com * */ import 'package:mobx/mobx.dart'; part

分享一个RN快速开发库： react-native-easy-app 。一款为React Native App开发提供基础服务的纯JS库( 支持 IOS & Android )，可以为开发者开发项目提供强有力的支持，可以大幅度提高编码的效率，特别是在项目搭建初期，至少可以为开发者减少30%的工作量。 由于前面的文章已经做过介绍，在这里就不详细介绍了，通过本开源库，你可以有以下高级的“操作”： 可以像访问内存对象一样访问AsyncStorage 相关文章： 一分钟实现，一个RN持久数据管理器 ； react-native-easy-app 详解与使用之（一） AsyncStorage 只需要几十行代码就能实现，一个完整的app与服务器的Http请求交互 相关文章： 二十分钟封装，一个App前后台Http交互的实现 ； react-native-easy-app 详解与使用之（二） fetch 一行配置 + 基础组件的使用就即可以实现，UI自动屏幕适配 相关文章： 详解与使用之（三） View，Text，Image，Flatlist ； react-native-easy-app 详解与使用之（四）屏幕适配 另附有多个不同版本的Demo供大家参考用法： Sample Sample_Mobx Sample_Redux 以下为Sample_Redux示例程序的UI部分截图：

使用mobx5，针对babel 7.0+版本。折腾了好长时间，总算可以了。 如下： 在babel.config.js 文件中加入： plugins: [ [ '@babel/plugin-proposal-decorators', { 'legacy': true } ] ] 来源： oschina 链接： https://my.oschina.net/jack088/blog/4310374

一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制 必须使用它的依赖注入 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React，原因就在这里，我反对的是整个业务应用的函数式倾向，很多人都是看到有很多好用的React组件，就会倾向于把它引入，然后

前言 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制 必须使用它的依赖注入 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React