React Easy State 实战教程：从 TodoMVC 到完整应用

React Easy State 实战教程：从 TodoMVC 到完整应用

【免费下载链接】react-easy-stateSimple React state management. Made with ❤️ and ES6 Proxies.项目地址: https://gitcode.com/gh_mirrors/re/react-easy-state

React Easy State是一个基于 ES6 Proxies 构建的极简 React 状态管理库，通过两个核心函数store()和view()实现自动响应式状态管理。在前 100 个字内，我们明确告诉你：React Easy State 的核心功能是让 React 状态管理变得异常简单，你只需要记住两条黄金规则——用store()包装状态对象，用view()包装组件，就能实现自动的响应式更新，无需手动调用setState或使用 Redux 的复杂流程。

为什么选择 React Easy State？ 🤔

如果你厌倦了 Redux 的样板代码，又觉得 Context API 不够灵活，那么React Easy State正是你需要的解决方案。这个库的核心优势在于：

• 极简 API：只需掌握store()和view()两个函数
• 零样板代码：无需 actions、reducers、dispatchers
• 自动响应式：基于 ES6 Proxies 实现自动依赖追踪
• 完美兼容：与现有 React 生态无缝集成
• 高性能：内置批量更新优化

核心概念快速上手 🚀

1. 创建全局状态存储

在 src/store.js 中，React Easy State 通过@nx-js/observer-util库实现响应式能力。创建全局状态非常简单：

import { store } from '@risingstack/react-easy-state'; const userStore = store({ name: '张三', age: 25, incrementAge() { userStore.age++; } });

2. 创建响应式视图

查看 src/view.js 的实现，你会发现view()函数通过observe()包装组件，实现自动重渲染：

import { view } from '@risingstack/react-easy-state'; const UserProfile = view(() => ( <div> <h1>{userStore.name}</h1> <p>年龄：{userStore.age}</p> <button onClick={userStore.incrementAge}>增加年龄</button> </div> ));

从 TodoMVC 开始学习 📝

让我们通过经典的 TodoMVC 示例来理解 React Easy State 的实际应用。查看 examples/todo-mvc/src/todosStore.js，你会发现状态管理可以如此简洁：

const todos = store({ all: [], filter: 'all', get isEmpty() { return todos.all.length === 0; }, get completed() { return todos.all.filter(todo => todo.completed); }, create(title) { todos.all.push({ title, completed: false }); }, toggle(id) { const todo = todos.all[id]; todo.completed = !todo.completed; } });

在 examples/todo-mvc/src/App.jsx 中，组件通过view()包装后自动响应状态变化：

export default view(() => { const { isEmpty, filter, active, clearCompleted } = todos; return ( <div className="todoapp"> {!isEmpty && ( <section className="main"> <ul className="todo-list"> {todos[filter].map((todo, idx) => ( <TodoItem {...todo} id={idx} key={idx} /> ))} </ul> </section> )} </div> ); });

构建完整应用架构 🏗️

1. 异步操作处理

在 examples/beer-finder/src/appStore.js 中，你可以看到如何处理异步操作：

const appStore = store({ beers: [], isLoading: false, async fetchBeers(filter) { appStore.isLoading = true; appStore.beers = await api.fetchBeers(filter); appStore.isLoading = false; } });

2. 组件局部状态

React Easy State 也支持组件局部状态管理：

const Counter = view(() => { const counter = store({ num: 0 }); const increment = () => counter.num++; return ( <button onClick={increment}>{counter.num}</button> ); });

3. 自动副作用处理

通过autoEffect函数，你可以轻松处理副作用：

import { store, autoEffect } from '@risingstack/react-easy-state'; const app = store({ name: '我的应用' }); autoEffect(() => { document.title = app.name; });

浏览器兼容性与性能优化 📊

React Easy State 基于 ES6 Proxies 实现，这意味着它需要现代浏览器支持：

从兼容性表格可以看到，React Easy State 支持 Chrome 49+、Firefox 38+、Safari 10+、Edge 12+、Opera 36+ 以及 React Native 0.59+，但不支持 Internet Explorer。

性能优化技巧

1. 批量更新：React Easy State 自动批量同步更新
2. 精确更新：只有实际使用状态的组件才会重渲染
3. 内存优化：组件卸载时自动清理响应式连接

进阶应用模式 🔧

1. 与第三方库集成

React Easy State 可以与其他状态管理库共存：

import { withRouter } from 'react-router-dom'; import { withTheme } from 'styled-components'; const EnhancedComponent = withRouter(view(MyComponent)); // 注意：view() 应该是最内层的包装器

2. 类组件支持

查看 src/view.js 第 68-146 行，React Easy State 为类组件提供了完整的支持：

class UserProfile extends Component { userStore = store({ name: '李四' }); static deriveStoresFromProps(props, userStore) { userStore.name = props.name || userStore.name; } render() { return <div>{this.userStore.name}</div>; } } export default view(UserProfile);

3. TypeScript 支持

通过 types/index.d.ts 提供的类型定义，你可以获得完整的 TypeScript 支持：

import { store, view } from '@risingstack/react-easy-state'; interface User { name: string; age: number; } const userStore = store<User>({ name: '王五', age: 30 });

常见问题与最佳实践 💡

1. 避免使用this关键字

在 store 方法中，应该直接引用 store 对象而不是使用this：

// ❌ 不要这样做 const counter = store({ num: 0, increment() { this.num++; // 这不会工作 } }); // ✅ 正确做法 const counter = store({ num: 0, increment() { counter.num++; // 直接引用 store } });

2. 尽早包装 store

确保在创建对象后立即使用store()包装：

// ❌ 不要这样做 const person = { name: '张三' }; person.name = '李四'; export default store(person); // 这个赋值不会触发更新 // ✅ 正确做法 const person = store({ name: '张三' }); person.name = '李四'; // 这会触发更新 export default person;

3. 处理第三方组件

对于不支持响应式数据的第三方组件，可以使用深克隆：

import cloneDeep from 'lodash/cloneDeep'; export default view(() => ( <ThirdPartyTable data={cloneDeep(dataStore.items)} /> ));

实战项目示例 🎯

1. 原生移动应用

查看 examples/native-clock/ 目录，这是一个 React Native 时钟应用示例。React Easy State 完美支持 React Native 开发：

2. 啤酒查找应用

在 examples/beer-finder/ 中，你可以看到一个完整的啤酒查找应用，展示了异步操作、全局状态和组件间通信的最佳实践。

3. 联系人管理应用

examples/contacts/ 展示了如何使用 React Easy State 构建数据表格应用，包含复杂的筛选和排序功能。

总结与下一步 🚀

React Easy State 通过极简的 API 提供了强大的状态管理能力。它的核心优势在于：

• 学习曲线平缓：只需掌握两个核心函数
• 开发效率高：大幅减少样板代码
• 性能优异：自动优化重渲染
• 生态兼容：与现有 React 工具链完美集成

要开始使用 React Easy State，只需运行：

npm install @risingstack/react-easy-state

或者使用 Create React App 快速开始：

npx create-react-app my-app cd my-app npm install @risingstack/react-easy-state npm start

通过本教程，你已经掌握了从 TodoMVC 到完整应用的 React Easy State 使用技巧。现在就开始构建你的下一个 React 应用吧！记住两条黄金规则：用store()包装状态，用view()包装组件，剩下的就让 React Easy State 来处理吧！ 🎉

【免费下载链接】react-easy-stateSimple React state management. Made with ❤️ and ES6 Proxies.项目地址: https://gitcode.com/gh_mirrors/re/react-easy-state