雨夜带刀's Blog

初探 React 组件

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

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

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

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

头像

雨夜带刀

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

雨夜带刀的开源项目

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