文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

从 React 到 Flux

发布于 2025-04-26 18:09:27 字数 3556 浏览 0 评论 0 收藏

我会以一个待办事项的应用（Todo Application）作为示例，告诉你如何从 Flux 中获益。我将按如下步骤逐步制作。

1．使用 ReactJS 做一个 demo。

2．逐步过渡到添加 React 组件。

3．逐步添加 Flux 组件。

打开终端，输入如下命令：

mkdir todoapp
cd todoapp
npm init
npm install -g browserify
npm install --save reactify flux react

当执行完上面的命令后，你的 package.json 文件会有如下内容：

package.json


{
  "name": "todoapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify -t reactify main.js > build/main.js"
  },
  "author": "",

  "license": "ISC",
  "dependencies": {
    "flux": "^2.0.3",
    "reactify": "^1.1.1"
  }
}

创建如下文件结构：

在项目根目录中添加 index.html，作为我们的示例页面。

index.html



<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="example"></div>
    <script src="build/main.js"></script>
  </body>
</html>

在 main.js 中，我们实现一个 Todo 应用中的基本模板，它包括一个用于输入的表单（Todo Item Input）、一个添加按钮（Add Button）和一个待办事项的项目列表（TodoList Component），如下图。

main.js





'use strict'

var React = require('react');
var TodoList = require('./components/TodoList');

var TodoApp = React.createClass({
  getInitialState: function(){
    return {
      todos: []
    }
  },
  componentDidMount: function(){
    var todos = [
      {id: 1, content: 'todo1'},
      {id: 2, content: 'todo2'},
      {id: 3, content: 'todo3'}
    ];
    this.setState({
      todos: todos
    });

  },
  render: function(){
    return (
      <div>
        <input type="text" ref="todo" />
        <button onClick={this.addTodo}>add</button>
        <h2>Todos:</h2>
        <TodoList items={this.state.todos} />
      </div>
    );
  }
});

React.render(<TodoApp />, document.getElementById('example'));

TodoList 组件返回一个 ul 组件，这个 ul 组件包含了一组 TodoItem 组件，如下：

./components/TodoList.js



'use strict'

var React = require('react');
var TodoItem = require('./TodoItem');
var TodoList = React.createClass({
  render: function(){
    var todoItems = this.props.items.map(function(item){
      return <TodoItem item={item} key={item.id} />
    });
    return (
      <ul>
        {todoItems}
      </ul>
    );
  }
});

module.exports = TodoList;

./components/TodoItem.js



'use strict'

var React = require('react');
var TodoItem = React.createClass({
  getInitialState: function(){
    return {edit: false, content: this.props.item.content}
  },
  handleEdit: function(){
    this.setState({edit: true})
  },
  handleChange: function(){
    this.setState({content: event.target.value})
  },
  render: function(){
    if(this.state.edit === false) {
      return (
        <li>
          {this.props.item.content}&<button onClick={this.
              handleEdit}></button>
        </li>
      );
    } else {
      return (
        <li>
          <input type="text" value={this.state.content} onChange={
              this.handleChange} />
        </li>
      );
    }
  }
});

module.exports = TodoItem;

现在这个模板如下图所示：

分享到QQ

分享到微博

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据