创建一个使用React和Flux的Note采用应用程序-js教程-PHP中文网

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

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

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

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

首页

web前端

js教程

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

Jennifer Aniston

Feb 20, 2025 am 09:41 AM

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

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

钥匙要点

教程提供了使用React，Flux和Node.js创建笔记应用程序的示例。该应用程序分为各种组件，例如NoteApp，NoteListBox，Notelist，Note，NoteCreationBox和TextArea。

>在服务器上使用React和Reflux在客户端和服务器端呈现组件。该技术允许创建在服务器上渲染并以单页应用程序的方式创建同构应用在磁通架构中，应用程序的状态存储在商店中。发生操作时，它将数据发送给调度程序，然后将此数据发送到相关商店。该商店更新其状态并发出更改事件，从而导致任何反应组件在侦听商店中的更改以更新和重新渲染自己。

flux上的底漆

通量依赖于单向数据流。我们有两个磁通模式中的两个关键组件：

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

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

>一个名为Notestore的商店，该商店存储了笔记列表。

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

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

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

>注意：

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

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

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

建立开发环境

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

>我们将使用浏览器将我们的React组件，操作和存储捆绑到客户端.js软件包。

grunt watch
grunt nodemon

登录后复制

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

noteapp：这是由两个子组件组成的根组件：noteListbox和notecreationbox。
noteListBox：具有一个单个子组件notelist。它检索了Flux Store的笔记列表，并将其传递给Notelist。
>

grunt watch
grunt nodemon

登录后复制

如您所见，我们在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商店等库一起使用。可以使用柏树或木偶等工具进行端到端的测试。