雨夜带刀's Blog

React 应用的架构模式 Flux

React 组件之间的数据通信在 初探 React 组件 有初步接触,父组件可以通过声明 props 来向子组件传递数据,但是子组件无法向父组件传递数据,兄弟组件之间也不能相互传递数据。React 的这种单向数据流的通信模式能确保数据的流动简单可控,非常严谨,React 也一直秉承着简单严谨的设计思想。

那如上提到的非父子组件的数据通信该怎么办呢?有几种方案:

  • 回调函数 父组件注册回调函数,子组件执行回调函数,这种方案比较简单,适用范围也有限,适合简单的子组件向父组件的数据通信;

  • 事件 事件通信是 JavaScript 最常用的通信方案,这种通信方案不用局限于组件之间的关系,比较灵活,但是当应用复杂庞大的时候,使用这种通信方式会导致管理混乱,不可控;

  • Flux Facebook 官方团队提出来专门应用于 React 的一套应用的架构模式,本文将要讲述的就是该方案。

初探 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>

React 的骨架 JSX

为什么需要JSX

JSX 是 Facebook 团队提出的一个语法方案,可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法,这种语法方案需要通过 JSXTransformer 来进行编译转换成真实可用的 JavaScript 代码。

React 是基于组件的开发思想,React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件中可以有自己的样式(Inline Style)和结构(JSX编写的HTML)。

在 React 和 JSX 之前,一个组件如果要包含 HTML 结构将面临如下几个问题:

  1. 组件的 HTML 直接写在页面中,那么组件的结构和行为是分离的;

  2. 组件的 HTML 直接用字符串的形势插入到 JavaScript 代码中,那么就会出现一大段的字符串拼接,开发人员需要很小心的确保字符串拼接时没有因为少了一个符号而导致整个代码无法运行;

  3. 使用 MVC 分层的思想,引入模板引擎,那么该如何引入模板文件的片段呢;

JSX 很好的解决了这些问题。

头像

雨夜带刀

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

雨夜带刀的开源项目

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