解释一下 Flux

Flux 是 Facebook 提出的应用架构模式，用于管理 React 应用中的数据流和状态。它强调单向数据流，以解决复杂应用中数据和视图不一致的问题。Flux 不是一个具体的库或框架，而是一种设计模式，围绕以下几个核心概念：

1. Action（动作）：

   • 动作是描述应用中发生事件的普通 JavaScript 对象。每个动作都有一个类型（type）属性，以及携带的数据（payload）。动作用于将数据从视图传递到存储。

   javascript复制代码const action = {
     type: 'ADD_TODO',
     payload: { text: 'Learn Flux' }
   };

2. Dispatcher（调度器）：

   • 调度器是一个中心集线器，用于将动作分发到存储。它注册所有存储，并将收到的每个动作传递给所有存储。调度器没有太多逻辑，只负责分发动作。

   javascript复制代码import { Dispatcher } from 'flux';
   ​
   const dispatcher = new Dispatcher();
   dispatcher.dispatch(action);

3. Store（存储）：

   • 存储是应用状态和逻辑的容器。每个存储管理一个特定领域的数据和逻辑。存储响应调度器分发的动作，更新状态，并通知视图发生了变化。存储不能直接修改，必须通过分发动作来更新。

   javascript复制代码import { EventEmitter } from 'events';
   ​
   class TodoStore extends EventEmitter {
     constructor() {
       super();
       this.todos = [];
     }
   ​
     handleActions(action) {
       switch (action.type) {
         case 'ADD_TODO':
           this.todos.push(action.payload);
           this.emit('change');
           break;
         // 处理其他动作
       }
     }
   ​
     getAll() {
       return this.todos;
     }
   }
   ​
   const todoStore = new TodoStore();
   dispatcher.register(todoStore.handleActions.bind(todoStore));

4. View（视图）：

   • 视图是展示数据的 React 组件。视图监听存储的变化，并根据存储的状态重新渲染自己。视图还可以分发动作来修改存储中的状态。

   javascript复制代码import React, { Component } from 'react';
   import todoStore from './TodoStore'; // 假设存储已导出
   import dispatcher from './dispatcher'; // 假设调度器已导出
   ​
   class TodoApp extends Component {
     constructor() {
       super();
       this.state = {
         todos: todoStore.getAll()
       };
     }
   ​
     componentDidMount() {
       todoStore.on('change', this.handleChange);
     }
   ​
     componentWillUnmount() {
       todoStore.removeListener('change', this.handleChange);
     }
   ​
     handleChange = () => {
       this.setState({
         todos: todoStore.getAll()
       });
     };
   ​
     handleAddTodo = () => {
       const action = {
         type: 'ADD_TODO',
         payload: { text: 'Learn Flux' }
       };
       dispatcher.dispatch(action);
     };
   ​
     render() {
       return (
         <div>
           <button onClick={this.handleAddTodo}>Add Todo</button>
           <ul>
             {this.state.todos.map((todo, index) => (
               <li key={index}>{todo.text}</li>
             ))}
           </ul>
         </div>
       );
     }
   }
   ​
   export default TodoApp;

单向数据流

Flux 是 Facebook 提出的应用架构模式，用于管理 React 应用中的数据流和状态。它强调单向数据流，以解决复杂应用中数据和视图不一致的问题。Flux 不是一个具体的库或框架，而是一种设计模式，围绕以下几个核心概念：

1. Action（动作）：

   • 动作是描述应用中发生事件的普通 JavaScript 对象。每个动作都有一个类型（type）属性，以及携带的数据（payload）。动作用于将数据从视图传递到存储。

   javascript复制代码const action = {
     type: 'ADD_TODO',
     payload: { text: 'Learn Flux' }
   };

2. Dispatcher（调度器）：

   • 调度器是一个中心集线器，用于将动作分发到存储。它注册所有存储，并将收到的每个动作传递给所有存储。调度器没有太多逻辑，只负责分发动作。

   javascript复制代码import { Dispatcher } from 'flux';
   ​
   const dispatcher = new Dispatcher();
   dispatcher.dispatch(action);

3. Store（存储）：

   • 存储是应用状态和逻辑的容器。每个存储管理一个特定领域的数据和逻辑。存储响应调度器分发的动作，更新状态，并通知视图发生了变化。存储不能直接修改，必须通过分发动作来更新。

   javascript复制代码import { EventEmitter } from 'events';
   ​
   class TodoStore extends EventEmitter {
     constructor() {
       super();
       this.todos = [];
     }
   ​
     handleActions(action) {
       switch (action.type) {
         case 'ADD_TODO':
           this.todos.push(action.payload);
           this.emit('change');
           break;
         // 处理其他动作
       }
     }
   ​
     getAll() {
       return this.todos;
     }
   }
   ​
   const todoStore = new TodoStore();
   dispatcher.register(todoStore.handleActions.bind(todoStore));

4. View（视图）：

   • 视图是展示数据的 React 组件。视图监听存储的变化，并根据存储的状态重新渲染自己。视图还可以分发动作来修改存储中的状态。

   javascript复制代码import React, { Component } from 'react';
   import todoStore from './TodoStore'; // 假设存储已导出
   import dispatcher from './dispatcher'; // 假设调度器已导出
   ​
   class TodoApp extends Component {
     constructor() {
       super();
       this.state = {
         todos: todoStore.getAll()
       };
     }
   ​
     componentDidMount() {
       todoStore.on('change', this.handleChange);
     }
   ​
     componentWillUnmount() {
       todoStore.removeListener('change', this.handleChange);
     }
   ​
     handleChange = () => {
       this.setState({
         todos: todoStore.getAll()
       });
     };
   ​
     handleAddTodo = () => {
       const action = {
         type: 'ADD_TODO',
         payload: { text: 'Learn Flux' }
       };
       dispatcher.dispatch(action);
     };
   ​
     render() {
       return (
         <div>
           <button onClick={this.handleAddTodo}>Add Todo</button>
           <ul>
             {this.state.todos.map((todo, index) => (
               <li key={index}>{todo.text}</li>
             ))}
           </ul>
         </div>
       );
     }
   }
   ​
   export default TodoApp;

Flux 架构的核心思想是单向数据流。数据流动的过程如下：

1. 用户在视图中触发事件（例如点击按钮）。

2. 视图分发一个动作到调度器。

3. 调度器将动作分发到所有注册的存储。

4. 存储根据动作更新状态，并通知视图发生了变化。

5. 视图重新渲染以反映最新的状态。