Flux 是 Facebook 提出的应用架构模式，用于管理 React 应用中的数据流和状态
它强调单向数据流，以解决复杂应用中数据和视图不一致的问题
Flux 不是一个具体的库或框架，而是一种设计模式，围绕以下几个核心概念：Action（动作）：动作是描述应用中发生事件的普通 JavaScript 对象
每个动作都有一个类型（type）属性，以及携带的数据（payload）
动作用于将数据从视图传递到存储
javascript复制代码const action = { type: 'ADD_TODO', payload: { text: 'Learn Flux' }};Dispatcher（调度器）：调度器是一个中心集线器，用于将动作分发到存储
它注册所有存储，并将收到的每个动作传递给所有存储
调度器没有太多逻辑，只负责分发动作
javascript复制代码import { Dispatcher } from 'flux';const dispatcher = new Dispatcher();dispatcher.dispatch(action);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));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 不是一个具体的库或框架，而是一种设计模式，围绕以下几个核心概念：Action（动作）：动作是描述应用中发生事件的普通 JavaScript 对象
每个动作都有一个类型（type）属性，以及携带的数据（payload）
动作用于将数据从视图传递到存储
javascript复制代码const action = { type: 'ADD_TODO', payload: { text: 'Learn Flux' }};Dispatcher（调度器）：调度器是一个中心集线器，用于将动作分发到存储
它注册所有存储，并将收到的每个动作传递给所有存储
调度器没有太多逻辑，只负责分发动作
javascript复制代码import { Dispatcher } from 'flux';const dispatcher = new Dispatcher();dispatcher.dispatch(action);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));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 架构的核心思想是单向数据流
数据流动的过程如下：用户在视图中触发事件（例如点击按钮）
视图分发一个动作到调度器
调度器将动作分发到所有注册的存储
存储根据动作更新状态，并通知视图发生了变化
视图重新渲染以反映最新的状态