创建一个使用React和Flux的Note采用应用程序

Facebook的React是一个非常不错的库，用于创建用户界面。唯一的问题是React不在乎您的应用程序如何处理数据。大多数人将反应用作MV*中的V。因此，Facebook引入了一种名为Flux的模式，该模式为应用程序内的数据处理带来了功能性的方法。本教程简要介绍了通量模式，并展示了如何使用React和Flux架构创建Note应用程序。

>

钥匙要点

Flux是Facebook介绍的模式，它为应用程序中的数据处理带来了功能性方法，从而补充了React的用户界面的创建。它依赖于单向数据流，包括商店和动作等关键组件。>
• 教程提供了使用React，Flux和Node.js创建笔记应用程序的示例。该应用程序分为各种组件，例如NoteApp，NoteListBox，Notelist，Note，NoteCreationBox和TextArea。
>在服务器上使用React和Reflux在客户端和服务器端呈现组件。该技术允许创建在服务器上渲染并以单页应用程序的方式创建同构应用 在磁通架构中，应用程序的状态存储在商店中。发生操作时，它将数据发送给调度程序，然后将此数据发送到相关商店。该商店更新其状态并发出更改事件，从而导致任何反应组件在侦听商店中的更改以更新和重新渲染自己。
• >
• flux上的底漆
• 通量依赖于单向数据流。我们有两个磁通模式中的两个关键组件：

存储：顾名思义的商店组件存储了应用程序数据。

动作：新数据通过操作流入商店。商店收听操作并在调用操作时执行某些任务（例如修改数据）。这使数据流程单向保持。

为了加强这个概念，让我们以一个真实的榜样。例如，在“笔记制作应用”中，您可以具有以下安排：
2. >一个名为Notestore的商店，该商店存储了笔记列表。

>您可以采用称为CreateNote的动作。每当调用操作时，商店诺斯托尔都会聆听动作createNote并用新的注释更新其列表。数据仅通过操作才能流入商店。

索式台球时，每当其数据更改时会触发事件。您的React组件（例如NoteListComponent）会聆听此事件，并更新视图中列出的注释列表。这就是数据流出商店的方式。

因此，数据流可以如下可视化：
2. >

>通量模式的最大优点是它使您的应用程序数据保持平整。由于只能通过动作进行突变，因此更容易理解数据变化如何影响整个应用程序。

>注意：

>如果您已经浏览了Facebook的通量指南，则可能已经注意到了调度员的概念。调度员是回到商店的回调注册表。调用操作后，调度员会响应它，并将关联的数据发送给所有注册商店。然后，商店检查操作类型并相应地执行任务。

>上述过程已被称为reflux的库大大简化。它通过使动作可听来消除调度员的概念。因此，在反流中，商店可以直接听取动作并响应其调用。

完全了解通量模式，让我们构建一个简单的音符，以reflux，react和node.js.s.

进行应用程序。

建立开发环境

>我们将使用React和Reflux用作节点模块，并使用浏览器也可以在客户端提供它们。因此，这是我们建立环境的方式：

1. >我们将使用浏览器将我们的React组件，操作和存储捆绑到客户端.js软件包。
>我们将使用Grunt Watch来检测上述组件中的更改，并在每次更改发生时重新运行浏览。
Grunt Nodemon用于在更改任何.jsx或.js文件时重新启动服务器，以便您不必手动执行它。
>您可以从github下载代码，然后打开gruntfile.js来阅读有关任务的信息。在计算机上拥有回购后，您只需运行NPM安装即可安装所需的节点模块。运行以下命令并开始开发：

grunt watch
grunt nodemon

该应用程序可在https：// localhost：8000上访问，如下所示：
在应用程序上工作
>让我们从应用程序的各个组件开始。以下是我们可以将UI分为各种组件的方式：

>



这是每个组件的作用：

>

1. noteapp：这是由两个子组件组成的根组件：noteListbox和notecreationbox。
2. noteListBox：具有一个单个子组件notelist。它检索了Flux Store的笔记列表，并将其传递给Notelist。
notelist：负责渲染每个音符组件。将音符对象传递给每个音符组件。
3. >
注意：显示单个注释项目的详细信息。在这种情况下，我们只显示标题。您可以轻松地继续显示其他详细信息，例如日期，字幕等。
notecreationbox：此组件呈现一个文本方面的组件，并将当前编辑的注释ID传递给其（如果有）。
TextArea：提供一个文本方面来接受用户输入。将注释文本传递到notecreationbox以保存。
创建动作
>让我们使用回流来创建一些动作。如果您打开操作/noteactions.js，则可以查看如何创建动作。这是片段：

grunt watch
grunt nodemon

reflux.createactions用于创建动作。我们导出这些动作以便在我们的组件中使用它们。

>

创建商店
>我们有一个名为Notestore的单个商店，该商店维护一系列笔记。以下代码用于创建商店（商店/notestore.js）：>

如您所见，我们在INIT方法内收听了两个动作，CreateNote和Editnote。我们还注册了调用操作时执行的回调。添加/更新注释的代码非常简单。我们还揭露Getters以检索笔记列表。最后，该商店被导出，以便可以在我们的组件中使用。创建组件

<span>var Reflux = require('reflux');
</span>
<span>var NoteActions = Reflux.createActions([
</span>  <span>'createNote',
</span>  <span>'editNote'
</span><span>]);
</span>
module<span>.exports = NoteActions;</span>

我们所有的反应组件都位于React/组件目录中。我已经显示了UI的整体结构。您可以查看下载的源代码，以了解有关每个组件的更多信息。在这里，我将向您展示关键的事情（即我们的组件如何调用动作并与商店互动）。
notelistbox：
此组件从诺森特获取了笔记列表，并将其馈送到Notelist组件中，然后将笔记呈现。这是组件的外观：

组件安装时，我们开始收听索引的更改事件。每当笔记列表中有突变时，这都是广播。我们的组件会倾听此事件，以便在任何更改的情况下重新渲染注释。以下行记录了一个听众：

>因此，只要调用组件的更改方法。此方法收到更新的注释列表并更改状态。

<span>var Reflux = require('reflux');
</span><span>var NoteActions = require('../actions/NoteActions');
</span>
<span>var _notes = []; //This is private notes array
</span>
<span>var NoteStore = Reflux.createStore({
</span>  <span>init: function() {
</span>    <span>// Here we listen to actions and register callbacks
</span>    <span>this.listenTo(NoteActions.createNote, this.onCreate);
</span>    <span>this.listenTo(NoteActions.editNote, this.onEdit);
</span>  <span>},
</span>  <span>onCreate: function(note) {
</span>    _notes<span>.push(note); //create a new note
</span>
    <span>// Trigger an event once done so that our components can update. Also pass the modified list of notes.
</span>    <span>this.trigger(_notes); 
</span>  <span>},
</span>  <span>onEdit: function(note) {
</span>    <span>// Update the particular note item with new text.
</span>    <span>for (var i = 0; i < _notes.length; i++) {
</span>      <span>if(_notes[i]._id === note._id) {
</span>        _notes<span>[i].text = note.text;
</span>        <span>this.trigger(_notes);
</span>        <span>break;
</span>      <span>}
</span>    <span>}
</span>  <span>},
</span>
  <span>//getter for notes
</span>  <span>getNotes: function() {
</span>    <span>return _notes;
</span>  <span>},
</span>
  <span>//getter for finding a single note by id
</span>  <span>getNote: function(id) {
</span>    <span>for (var i = 0; i < _notes.length; i++) {
</span>      <span>if(_notes[i]._id === id) {
</span>        <span>return _notes[i];
</span>      <span>}
</span>    <span>}
</span>  <span>}
</span><span>});
</span>
module<span>.exports = NoteStore; //Finally, export the Store</span>

at this.state.notes被作为道具传递给Notelist，每当国家更改NoteList重新很多很多很多时。

<span>var React = require('react');
</span><span>var NoteList = require('./NoteList.jsx');
</span><span>var NoteStore = require('../../stores/NoteStore');
</span>
<span>var NoteListBox = React.createClass({
</span>  <span>getInitialState: function() {
</span>    <span>return { notes: NoteStore.getNotes() };
</span>  <span>},
</span>  <span>onChange: function(notes) {
</span>    <span>this.setState({
</span>      <span>notes: notes
</span>    <span>});
</span>  <span>},
</span>  <span>componentDidMount: function() {
</span>    <span>this.unsubscribe = NoteStore.listen(this.onChange);
</span>  <span>},
</span>  <span>componentWillUnmount: function() {
</span>    <span>this.unsubscribe();
</span>  <span>},
</span>  <span>render: function() {
</span>    <span>return (
</span>        <span><div className="col-md-4">
</span>            <span><div className="centered"><a href="" onClick={this.onAdd}>Add New</a></div>
</span>            <span><NoteList ref="noteList" notes={this.state.notes} onEdit={this.props.onEdit} />
</span>        <span></div>
</span>    <span>);
</span>  <span>}
</span><span>});
</span>
module<span>.exports = NoteListBox;</span>

>最后，我们在componentWillunMount中编写this.unsubscribe（）以删除侦听器。

>因此，这就是Notelist总是通过收听商店的变更活动来保持最新状态的方式。现在，让我们看看如何创建/编辑注释。

>

notecreationbox：

可以看一下notecreationbox的以下方法：

每当单击“保存”按钮时，该方法都会调用。它接受noteText作为其第一个参数。如果将ID传递为第二个参数，我们知道这是一个编辑操作，并调用操作NoteActions.EditNote（）。 否则，我们为新注释生成一个ID，并调用noteactions.createnote（）。请记住我们的诺森特聆听这些动作。根据操作，执行了适当的存储回调。一旦数据突变，商店就会触发一个变更事件，而我们的组件努力会自行更新。

grunt watch
grunt nodemon

>

这是数据流入系统的方式并随后在基于通量的应用程序中输出。>

为什么在服务器上使用react
>您可能想知道为什么我在服务器上使用了React和Replux。 React的很酷的功能之一是可以在客户端和服务器上渲染组件。使用此技术，您可以创建在服务器上渲染并作为单页应用程序的同构应用程序。虽然Note应用程序可能不需要这是必需的，但您可以轻松地使用此设置来构建复杂的同构应用程序。

>

>我鼓励您浏览源代码并进一步改进，因为有很大的改进空间。如果您有任何疑问，请在评论中告诉我。

>

感谢您的阅读！
经常询问有关使用React和Flux

创建笔记应用程序的问题

> Flux在用React创建笔记应用程序中的作用是什么？它通过使用单向数据流来补充React的合并视图组件。在创建笔记应用程序的背景下，Flux在管理数据流中起着至关重要的作用。它确保数据朝着一个方向移动，从动作到商店再到视图。这使该应用程序更容易预测，更易于理解，因为它避免了组件之间的数据共享的复杂性以及双向数据绑定的混淆。

>如何与Flux一起在构建笔记应用程序中与Flux一起工作？

反应和通量共同使用，通过分配职责来构建笔记应用程序。 React负责渲染视图并响应用户输入，而Flux管理应用程序的数据流。当用户与React组件进行交互（例如添加新音符）时，它会触发操作。此操作通过调度程序更新商店（应用程序的中央数据）。然后，商店发出更改事件，导致React组件在必要时进行更新和重新渲染。

>通量体系结构的关键组成部分是什么？

磁通结构由四个主要组件组成：操作，调度程序，商店和视图（React组件）。操作是将数据从应用程序发送到调度程序的信息的有效载荷。调度程序是一种管理应用程序中所有数据流的中央集线器。商店包含应用程序状态和逻辑，并且由调度员更新。最后，视图（React组件）在发生这些更改时聆听商店的更改并重新渲染自己。

>

>如何使用Flux使用Flux？在Flux中，您的应用程序状态通常存储在商店中。发生操作时（例如添加新注释），它将数据发送给调度程序。然后，调度员将此数据发送到相关商店。该商店更新其状态并发出更改事件。任何正在侦听商店中更改的反应组件都会自行更新和重新渲染，以反映应用程序的新状态。

flux如何帮助维持笔记应用应用程序的可扩展性？

通量体系结构有助于保持笔记应用程序的可扩展性。这使应用程序随着复杂性的增长而易于理解和修改。单向数据流可确保应用程序的一个部分的变化不会出乎意料地影响其他部分，从而降低了错误的可能性并使应用程序更易于测试和调试。

>我如何处理我的用户交互使用React和Flux？

>使用React和Flux构建的笔记应用程序中的用户互动通常通过操作来处理。当用户与React组件进行交互时（例如，单击按钮添加新注释），它会触发操作。此操作将数据发送给调度员，该调度员更新了相关商店。然后，商店发出更改事件，导致任何聆听的反应组件更新和重新渲染。

>如何测试使用React和Flux构建的笔记应用程序？ - 可以使用各种测试库和框架来完成用React和Flux构建的应用应用程序。对于单位测试反应组件，可以使用开玩笑或酶等文库。为了测试通量操作和商店，您可以将Jest与Redux Mock商店或Flux Mock商店等库一起使用。可以使用柏树或木偶等工具进行端到端的测试。

>如何调试使用React和Flux构建的笔记应用应用程序？

>在构建笔记应用程序时，我可以使用其他库或框架，并使用React和Flux？

>是的，您可以在构建笔记应用应用程序时使用其他库或框架。例如，您可能会使用诸如React路由器之类的路由库进行导航，诸如JEST的测试库进行测试，或者像材料UI这样的UI库来造型。库或框架的选择将取决于您的特定需求和偏好。

>

如何优化使用React和Flux构建的笔记应用程序的性能？使用React和Flux构建的注意应用程序可能涉及各种策略。一种常见的策略是通过仔细管理状态和道具，并在适当的情况下使用React的Purecomponent或shopscomponentupate确保组件仅在必要时重新渲染。其他策略可能包括通过使用代码分组来优化应用程序的初始加载时间，或通过使用诸如Relay或Apollo之类的库来优化数据获取。

>

以上是创建一个使用React和Flux的Note采用应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！