雨夜带刀

如果一个前端页面中可能引入多个独立的组件，这些独立的组件与页面的技术栈无关，如一个使用 React、Vue 开发的页面引入了一个原生的 Web 组件，此时这些独立组件的共享缓存就是一个值得关注的问题。

常规做法

按照常规的思路，页面如果要引入 A 和 B 两个组件，两个组件都依赖了相同的模块 @lib，如果希望将模块 @lib 缓存共享，那么一般的做法是将共享模块单独提供一个 JS 包，无论是 A 或 B 的包在加载前都先加载好共享缓存包，此时就会存在三个包，对应着三个独立的请求。对于移动 App 来说，原本是两个组件包两个请求，但此时请求数的增加意味着由于为了实现缓存共享而降低了可用性。

在上一篇文章《Immutable 在 JavaScript 中的应用》 中主要介绍了 Immutable 之于 JavaScript。而基于 Immutable 的特性，将其应用在 React 项目的开发中非常合适，解决了 React 中的一些痛点，能进一步提升 React 组件的性能以及更好的管理组件的状态。

在介绍 Immutable 如何在 React 中应用之前，先来谈谈 React 组件是如何更新的。

React 是基于状态驱动的开发，可以将一个组件看成是一个有限状态机，组件要更新，必须更新状态。

通常说的组件的状态就是组件的 state 对象，state 是可以由当前组件自行修改更新的，这种自更新的状态的为了便于理解区分可以称之为“动态”的状态。但除了更新 state 外，组件还可以通过 props 来更新，props 属性不能由组件自行修改，必须由父组件来修改，然后再传递给当前组件，更新组件的 props 也能引起组件的更新，可以将 props 称之为“静态”的状态。这样的状态区分是广义上的，如果你不认可 props 也是状态也没关系，这里可以不用拘泥于文字。

React 的核心思想就是使用组件化的思想来开发出一个个独立的组件，然后将组件再拼装成一个完整的应用，从 MVC 分层思想上来考虑的话，React 专注在 UI 展现层上。

在 React 的骨架 JSX 一文中，有详细的讲解过使用 JSX 来开发组件的结构，也提到了使用 Inline Style 可以给组件定义样式，这样能确保组件的独立性。除了结构和样式，一个独立完整的组件还包含一些其他的部分。

从一个简单的 Dropdown 组件来开启我们的 React 组件化之路。

首先需要说明的是，Demo 的代码都是 ES6 的语法，之后的 React 文章中用到的 JavaScript 代码都将使用 ES6 的语法，如果你还不了解 ES6，建议先了解一下它的语法。另外考虑到 Demo 代码量的问题忽略了组件的样式部分，假设样式是通过外链或 Inline Style 的形式加载进来的。

前端的社区非常活跃，各种底层的框架和库层出不穷，而在这些框架和库的基础上也涌现出了一批又一批用各自的思想来实现的 UI 组件。前端本身的工作领域就专注在 UI 展现层上，一套好用的 UI 组件能提升团队的工作效率，但是这些组件的通用性和移植性并不强。

W3C 提出来的 Web Components 标准化的组件化方案，尝试去解决上面提到的各自为战的问题，在其刚提出来的那段时间确实火了一阵子，Google 的开发团队也在此基础上推出了基于 Web Components 的框架 Polymer。

先来看看使用 Web Components 如何定义一个组件。

<hello-world>
<!-- Shadow dom -->
<style>
.para { background: orange; color: #fff;}
</style>
<div>
    <button onclick="handleClick()">Say Hello</button>
    <p class="para"></p>
</div>
<script>
    var handleClick = function(event) {
        window.event.target.nextElementSibling.textContent = 'Hello World!';
    };
</script>
<!-- /Shadow dom -->
</hello-world>

easy.js 核心库升级至 1.0.0，同时发布了组件库。

easy.js的网站：http://easyjs.org

github地址：https://github.com/chenmnkken/easyjs