Jason
Jason
redux 看上去足够简单，但却有非常强的规范约束，作为 react 全家桶中极为重要的组成部分，是 JavaScript 应用程序的可预测状态容器，是一种状态管理的解决方案。 ##### 来看其官网上的一个 gist demo： ``` JavaScript import { createStore } from 'redux' function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return...
## 深入理解Angular2变化监测和ngZone > 废弃【基于zone.js 0.6.x以下版本】 Angular应用程序通过组件实例和模板之间进行数据交互，也就是将组件的数据和页面DOM元素关连起来，当数据有变化后，NG2能够监测到这些变化并更新视图，反之亦然，它的数据流向是单项的，通过属性绑定和事件绑定来实现数据的流入和流出，数据从属性绑定流入组件，从事件流出组件，数据的双向绑定就是通过这样来实现的。那么它是如何实现变化检测的呢？ #### 需要进行变化监测的情形 试想一下，在什么样的场景下，angular才需要去更新视图： - event，在view中绑定事件来监听用户的操作，如果数据有变更则更新视图； - xmlHTTPRequest/webSocket，例如从远端服务拉取对应的数据，这是一个异步的过程； - timeout，例如：`setTimeout`, `setInterval`, `requestAnimationFrame`都是在某个延时后触发。 以上的共同特征是什么？很明显共同点是它们都是异步的处理，即需要使用异步回调函数，这带给我们的结论就是，不管任何时候的一个异步操作，我们应用程序状态可能已经被改变，这就需要告诉Angular去更新视图。 我们创建一个组件来呈现一个Todo例子，我们可以在模板中这样使用这个组件： ``` ``` 这将告诉Angular不管任何时候myTodo发生改变，Angular必须通过调用视图模型设置的myTodo数据(model setter)来自动的更新todo模板组件。 同样的，数据的流出是通过事件绑定来实现的，如果一个`complete`事件被触发，它将调用这个`onCompletingTodo`方法，该方法可能是一个获取后台最新数据的操作，这将需要用后台返回的异步数据与之前的数据参考进行对比来确定是否需要更新视图。 正如上面的例子，Angular2的属性和事件绑定的核心语法是很简单的，我们通过属性绑定实现了数据从父传递给了子，而事件绑定则实现了数据由子到父的传递，这也就是Angular2用来实现数据双向绑定的方法。它实现的是单向流的数据传递，也就是说，你的数据流只能向下流入组件，如果你需要进行数据变化，你可以发射导致变化的事件到顶部，待数据变化处理完成，然后再往下流入组件。那么问题来了，Angular2如何知道数据是否已经处理处理完成，这份新的数据是否有变化，如果数据有变化，那是怎么来通知数据往下流入组件通知组件来改变视图呢？这里我们先理解zone。 #### 关于Zone Zone实际上是Dart的一种语言特性，其是对Javascript某些设计缺陷的一些补充，简单的可以概述成Zone是一个异步事件拦截器，也就是说Zone能够hook到异步任务的执行上下文，以此来处理一些操作，比如说，在我们每次启动或者完成一个异步的操作、进行堆栈的跟踪处理、某段功能代码进入或者离开zone，我们可以在这些关键的节点重写我们所需处理的方法。 Zone中提供了各类hooks，允许在每一个回调函数的开始和结束时，去执行统一的自定义逻辑，其本身是不做任何事的，相反它是依赖其它的代码，获取到这些代码片段的执行上下文，通过hooks来完成相关的功能。Zone的另一个值得一提的是它必须依赖异步操作，当一个异步操作在执行时，它是有必要去捕获的这个异步操作并在该异步功能开始或者完成时建立对应的callback，然后存储到当前的zone，举个例子，如果一个代码片段在fork的zone中执行，并且这段代码中包含一个`setTimeout`的异步任务，那么执行到和完成这个`setTimeout`方法需要包裹一个异步的回调函数，存储到当前zone。 这样是确保每个异步操作之间的相互不受影响，也就是受保护的状态，例如一个页面由业务代码和一些第三方广告代码组成，这两份代码之间是相互独立的，我们需要的是业务代码的异常捕获数据提交到我们自己的后台服务器上，第三方广告代码的异常捕获提交到他们自己的服务器上。当fork了多个zone之后，异步操作将会精准的执行其所在的子zone上面方法。...
### 服务器端渲染流程 ##### 预渲染流程： 使用构建工具生成静态 HTML ； 将生成的 HTML 部署到 CDN 服务器； CDN 提供服务器视图； 服务器视图到客户端视图转换（见下文） ##### 服务器重绘流程： HTTP GET 请求发送到服务器; 服务器生成一个包含渲染的 HTML 和内联 JavaScript 的以便“Preboot”的页面（可以选择添加序列化数据进行缓存）； 服务器视图到客户端视图转换（见下文） ##### 服务器视图到客户端视图转换流程： 浏览器从服务器接收初始化 payload；...
翻译的这篇文章中，我将深入探讨angular2的变化监测系统。 ### 高级概述 一个angular2应用是一个组件树。  一个angular2应用是一个反应系统，变化监测是它的核心。  每一个组件都会有一个负责检查其模板中定义的绑定的更改检测器，例如这样的绑定：{{todo.text}}和[todo]=”t”。变化监测是由根到叶的深度优先顺序来传播绑定的。 Angular2没有一种通用的机制来实现数据的双向绑定（不过你任然可以实现数据绑定行为和ng-model，阅读[这里](http://victorsavkin.com/post/119943127151/angular-2-template-syntax)了解更多）。这就是为什么上图的变化监测图是一颗定向的树并且不是循环的（也就是说是一种树形图），这使得系统的性能变现更好,更重要的是，我们将保障系统更易于预测和调试。 那它到底有多快呢？ 默认情况下，变化检测通过树的每一个节点来检查它是否改变了，并且在每一浏览器事件都实现了它。尽管它看起来非常的低效，但在几毫秒内，Angular2变化监测系统能通过成百上千次简单的检查（次数依赖于不同的平台）。 因为在JavaScript语言中不提供给我们对象的变化通知，所以Angular必须保守的要每一次运行所有的检测。但是我们可能知道我们的某些可确定性的属性，例如使用不可改变的或可观察的对象，以前angular不能利用这些，但是现在可以。 ### 不可变对象(IMMUTABLE OBJECTS) 如果一个组件仅仅只依赖于它的输入属性，并且它是不可变的，那么当其绑定属性变化时该组件也会发生改变，因此我们可以跳过该组件的子树变化监测，直到这样的一个属性事件发生变化。当事件发生时，我们能立马监测子树，然后禁用它，直到下一次的变化（灰色的框框代表禁用了变化监测）。  如果我们使用不可变对象，一个大的变化检测树大部分时间都是被禁用的。  实施这个监测是微不足道的，仅仅是设置了一个变化监测策略到Onpush这个方法上。 ``` @Component({changeDetection:ChangeDetectionStrategy.OnPush}) class ImmutableTodoCmp { todo:Todo; } ``` ### 可观测对象(OBSERVABLE...
表单在我们的web应用中是至关重要的，表面上看，表单最直截了当的就是用户输入数据，点击提交这么简单。但事实上，表单所呈现的形式是非常复杂多变的，比如我们angular表单可以实现用户控制，监视变化，验证输入、错误信息处理和数据绑定等功能。 本节将详细介绍angular2表单，主要是从技巧方面来认识表单在angular2中带给用户的良好体验，具体如下： - 通过组件和模板来创建一个表单； - 通过ngModel双向数据绑定的例子来了解如何在input中读写值； - angular2相关表单指令的运用，如NgForm、NgForm、NgForm、NgForm和NgCongrolGroup等； - 表单局部变量的运用； - 表单错误信息和处理或者Validators验证处理等。 ### 1.表单组件类和表单模板 angular2表单是基于HTML的模板及其控制该模板数据以及用户交互的组件组成，我们需要引入一个Componet，这意味着可以在该组件中定义选择器和模板或者引入一个外链的html模板。接下来定义一个组件类，其作用是控制表单相关属性的表现，定义表单方法等。 如下面的例子：【暂时用官网的例子。TODO...】 ``` js import {Compontent} from ‘angular2/core’; import {NgForm} from ‘angular2/common’; import {Hero} from ‘./hero’;...
### 1.管道 我们的很多应用场景是基于这样一个简单的任务，获取数据，转换过滤后再展示给用户，angular2中我们引入了管道(Pipes)的概念，即管道是用来将数据模型中的数据经过过滤转换，然后通过模板内并展示给用户，这样做是为了更好的用户体验，例如从视图模型中直接获得的数据，不一定完全是我们想要的格式或者适合于人们查看的，举个例子，我们需要获取一个班级所有学生的平均分： ``` this class‘s average is： {{getAvgScore()}} ``` 虽然通过视图模型中的getAvgScore方法获取到了我们需要的平均分来展示了，但是可能我们获取到的数据是一个除不断的多位小数位的数据，那么这样的结果看上去是不那么顺眼的。除了在视图模型的方法来控制小数位外，我们也可以利用管道来格式化这样的数据，也就是在模板里改变数据的显示格式。这就是angular2中管道的作用。 #### 1.1 管道的用法 在angular2中，管道是在模板中对输入数据进行变换，并输出变换后的结果。在模板的内嵌表达式中，使用管道操作符“|”和其右边的管道方法来实现一个管道操作，使用“:”来向管道传入参数，所有的管道都是沿用这样这的一种机制。我们举个简单的例子来说明一下管道的使用： ``` import {Component} from 'angular2/core' @Component({ selector: 'hero-birthday', template: `The hero's birthday is {{ birthday...
link react-native-wechat-lib 后编辑报错如下： ``` builds/5x7q66sS/1/clickeggs/rnmanager/node_modules/react-native-wechat-lib/android/src/main/java/com/theweflex/react/WeChatModule.java:10: 错误: 程序包androidx.annotation不存在 import androidx.annotation.Nullable; ^ ``` Google了很久都还没解决，特来这里求助一下。 环境： compileSdkVersion 26 buildToolsVersion "26.0.2"