使用 React 和 Flux 创建一个记事本应用
使用 React 和 Flux 创建一个记事本应用 React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库。唯一的问题是 React 不会关注于你的应用如何处理数据。大多数人把 React 当做 MV* 中的 V。所以,Facebook 引入了一种称作 Flux 的模式,提供了一个功能上的通道,可用于应用内的数据处理。这个教程简短的介绍了 Flux 模式并且展示了如何使用 React 和 Flux 架构搭建一个记事本应用。 Flux 入门
Flux 依赖于一个单的数据流。在这个 Flux 模式中有两个关键的组件:
为了增强这个概念,我们做一个实实在在的例子。比如,在一个记事本应用中你可能会有下面的安排:
Flux 模式最大的优势就是它保证了应用中数据的平缓。比如,任何数据的变化只能通过 action 发出,这也就更加容易理解如何做到一旦数据变化就会影响整个应用了。 注意:
如果你看过了 Facebook 关于Flux的指南,你一定会注意到 Dispatcher 的概念。Dispatcher 是一个注册到 store 中的一个回调函数。当 action 被调用,Dispatcher 会响应它并且把相关的数据发送到所有注册的 store 中。Store 然后检查 action 的类型并且作出相应的反应。 上面的过程被一个叫做 Reflux 的类库很好的简化了。它通过使 actions 可监听去掉了 Dispatcher 的概念。所以,在 Reflux 中,store 可以直接监听 action 并且对他们需要的内容做出响应。 为了更好地理解 Flux 模式,我们使用 Reflux,React 和 Node.js 共同创建一个记事本应用。 搭建开发环境我们会使用 React 和 Reflux 作为 Node 模块并且使用 Browserify 让它们在客户端同样可用。下面就介绍如何搭建环境:
你可以从GitHub下载相关代码然后打开 Gruntfile.js 查看相关的任务。当你的机器上有了这个库,你仅仅需要运行 npm install 来安装所以来的所有 node 模块。运行下面的命令,然后开始开发:
这个应用可以在localhost:8000访问到。 使用这个应用我们从这个应用不同的组件开始。下面是我们如何将我们的 UI 分成不同的组件: 下面是每个组件的功能:
创建 Actions我们使用 Reflux 创建一个 action。如果你打开了 actions/NoteActions.js,你会看到 action 是如何被创建的。下面是代码片段: Reflux.createActions 被用作创建 Action。我们导出这些 Action ,在组件中方便使用它们。 创建 Store
我们创建了一个叫做 NoteStore 的 store,用来维护日记队列。下面的代码用于创建 store(stores/NoteStore.js): '../actions/NoteActions'_notes[];//ThisisprivatenotesarrayvarNoteStore=Reflux.createStore({ 可以看到,我们监听两个 action,createNote 和 editNote,在 init 方法中。同样,我们注册了回调函数当 action 被调用时。添加/更新日记的代码很简单。我们暴漏了 getter 用来获取日记列表。最后,store 被暴漏以便它可以在我们组件中使用。 创建组件
我们所有的 React 组件都位于 react/components 目录下。我已经展示了 UI 的所有结构。你可以看看下载的源代码,详细了解每个组件。这里我展示看最关键的一部分(例:我们的组件如何调用 action 以及如何与 store 交互) NoteListBox:这个组件从 NoteStore 获得了日记列表,并且把它们吐给 NoteList 组件然后渲染日记。这个组件看起来像下面这样: React'react'); ); 因此,无论什么时候发生了变化,组件的 onChange 方法都会被调用。这个方法接收到一个更新的日记列表然后改变 state。 ({ 由于 this.state.notes 是作为一个 prop 被传递到 NoteList 中,只要 state 发生了变化 NoteList 都会重新渲染自己。 最后,我们在 componentWillUnmount 中添加了 this.unsubscribe() 用来移除监听器。 因此,这就是 NoteList 如何通过监听 Store 的 change 事件一直处于最新的原因。现在我们看一下一个日记如何被创建/编辑。 NoteCreationBox:仔细看一下 NoteCreationBox 方法: handleSavenoteTextif({}); 每当保存按钮被点击时这个方法都会被调用。它接受 noteText 作为它的第一个参数。如果 id 作为第二个参数被传递,我们知道这是一个编辑操作并且调用 NoteActions.editNote()。否则我们会为新的日记生成一个 id 并且调用NoteActions.createNote() 方法。记住 NoteStore 监听了这些 action。根据这个 action,正确的 store 回调被执行。一旦数据发生了更改,store 会触发一个 change 事件并且我们的 NoteList 组件会更新自己。 这就是在 Flux 应用中数据如何流入系统并且随后流出的。 为什么在服务端使用 React你 可能好奇为什么在服务端使用 React 和 Reflux。React 最酷的一个特性就是可以在客户端和服务端渲染。使用这种技术,你可以创建同构的应用,在服务端渲染并且表现的和单页面应用一样。然而这对一个记事本应用不 是很必要,你可以轻松地使用这个方案创建一个复杂的同构的应用。 我建议你通读项目源码并且进一步地改造它,因为这里还有很大的提升空间。如果有任何的问题,可以在评论里告诉我。 感谢阅读! 原文:Creating a Note Taking App with React and Flux 外刊君推荐阅读: Getting Started with React and JSX Flux | Application Architecture for Building User Interfaces 颠覆式前端UI开发框架:React (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |