雨夜带刀's Blog

从 React 的组件更新谈 Immutable 的应用

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

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

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

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

初探 React 组件

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

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

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

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

从 Web Components 到 React 谈前端组件化

前端的社区非常活跃,各种底层的框架和库层出不穷,而在这些框架和库的基础上也涌现出了一批又一批用各自的思想来实现的 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发布核心库的稳定版以及组件库

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

easyjs.org

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

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

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。