React 16 已经发布了，其中一个很有趣的是添加了 “Portals”。

Portals 可以让你在父组件外渲染 react 受控 DOM 节点。react doc 也使用了一个模态框的例子很好地解释了它。用也做 tooltips 也很合适（这是我早前做的一个例子）。

但这些都并不是很有趣，让我们做一些更不可思议的事情…

react component 模式

有状态组件（Stateful）和无状态组件（Stateless）、容器组件（Container）与展示组件（Presentational）、高阶组件（HOC）、渲染回调（Render Callbacks）等

我在工作中使用 React 有一段时间了——一个 facebook 使用 js 渲染用户界面的框架——刚开始的时候我想知道一些概念。这些文字是尝试总结我实践这么久以来学到的一些模式——可能对于刚开始进入组件世界的开发者有用。

javascript 事件循环是如何工作的以及使用async／await提升异步编程的5种方式

这次我们将通过回顾在单线程环境中编程的缺点来扩展先前的第一篇文章，以及如何克服它来建立一个令人惊叹的 javascript UIs。像以往一样，在文章的最后，我会分享使用 async/await 写简洁代码的 5 个小贴士。

你可能并不需要 redux

人们常常在真正需要用到 redux 之前就选择了它。 “如果我们的应用没有使用 redux，变得不好扩展怎么办？” 后来，开发者们又都皱着眉头指头他们的代码间接地评论 redux.“为什么实现一个小功能需要更改三个文件？” 为什么一定要用 redux 呢!

深入理解 ios11 webview 的 viewport

ios11 带来了一些新的东西，凭直觉，围绕状态栏区域的展现对于程序员使用的像 Apache Cordova 或 Ionic 这样的工具显得尤为重要。尤其是，这个改动影响到所有为 ios11 构建的、基于 web 的、使用了固定标题栏的 app 之中。这篇文章帮助你理解 ios11 webview 的 viewport。

注： 现有的 app 可以继续正常工作，因为原有的 viewport 表现并没有被改变。这个改变只影响那些使用 xcode9 来为 ios11 构建的应用。

为了理解这个改动，我们需要先了解一下背景知识。

IphoneX 的缺口（小刘海）及其css样式解决方案

苹果公司的 IphoneX 拥有了全面屏，只保留了‘小刘海’给摄像头和一些传感设备。结果就是让屏幕设计陷入尴尬的境地，就像限制网页有一个“安全区域”和白色边缘条。虽然没有太多的黑魔法去消除它，但给 body 设置一个 background-color 属性也可以做到。或者扩展网页以覆盖整个屏幕（该死的缺口），可以给 viewport 的 meta 标签添加 viewport-fit=cover。

如何处理4种常见的内存泄露

什么是内存泄露

本质上来说，内存泄露可以被定义为 当内存不再被应用使用，却因为某些原因没有被操作系统回收或释放到自由内存池

编程语言支持多种不同的内存管理。某些内存是否在使用实际上是不可判定的。换句话说，只要开发者才清楚哪些内存块是可以被操作系统回收。

某些编程语言提供一些特性帮助开发者进行内存回收。其他的期望开发者完全明白哪些内存是无用的。维基有一系列关于内存管理的好文章。

避免大型，复杂的布局和布局颠覆

布局是浏览器查找元素的几何信息：其大小和页面中的位置。每个元素将基于所使用的CSS，元素的内容或父元素显示或隐式的大小调整信息。该过程在 Chrome，Opera，Safari 和 Internet Explorer中称为“布局”。在 Firefox 中，它被称为 Reflow （回流），但是这个过程的作用是相同的。

类似于 style 计算，布局成本的直接相关是：

• 需要布局的元素数量。
• 这些布局的复杂性。
  阅读全文 »

使用 requestIdleCallback

许多网站和应用程序都有很多脚本来执行。您的 JavaScript 通常需要尽快运行，但同时您不希望它阻碍用户那条路。如果您在用户滚动页面时发送分析数据，或者在轻触按钮时将元素附加到 DOM，则您的 Web 应用程序将无法响应，从而导致用户体验不佳。

好消息是，现在有一个 API 可以帮助：requestIdleCallback。以同样的方式，requestAnimationFrame 我们可以正确地安排动画，并最大限度地提高 60fps 的机会，requestIdleCallback 当一个框架结束时，或当用户处于非活动状态时，可以安排工作。这意味着有机会在用户不使用的情况下进行工作。它可用于 Chrome 47！这是一个实验性的功能，规格还在不断变化，所以将来会发生变化。

IntersectionObserver

假设你想追踪 DOM 里的一个元素是否进入 viewport 的可视区。你做这件事可能是因为你想在这个时机 lazyload 图片或者你需要知道用户是否真的在看一个某个广告横幅。你可以通过添加 scroll 事件钩子或使用定时器去调用元素的 getBoundingClientRect() 方法。然而，这种方法真的很慢，因为每次调用 getBoundingClientRect() 会造成浏览器 re-layout 当前页面 并会在你的页面造成很大的卡顿和闪烁。 iframe 里的元素是否可见这样的事情几乎很难做到。 基于单一源模型，浏览器不会让你访问包含 iframe 的页面的任何数据。这是频繁使用 iframe 加载广告的常见问题。

为了让可见度测试更有效率， IntersectionObserver 被设计出来了。IntersectionObserver 让你知道观察的元素何时进入或退出浏览器 viewport。