当前位置：首页 > news >正文

如何用 React Easy State 构建你的第一个应用

news 2026/6/4 17:16:08

如何用 React Easy State 构建你的第一个应用

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

React Easy State 是一个简单的 React 状态管理库，它利用 ES6 Proxies 提供直观的状态管理解决方案。本指南将带你快速上手，从零开始构建一个功能完整的时钟应用，体验 React Easy State 的核心优势。

📋 准备工作：环境搭建

首先确保你的开发环境中已安装 Node.js 和 npm。通过以下命令克隆项目仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/re/react-easy-state cd react-easy-state npm install

React Easy State 支持多种现代浏览器和 React Native 平台，兼容性如下：

图：React Easy State 支持 Chrome、Firefox、Safari、Edge、Opera 及 React Native，不支持 IE 浏览器

⚡ 快速入门：构建时钟应用

我们将以examples/clock目录中的示例为基础，创建一个实时更新的时钟应用。这个应用展示了 React Easy State 最核心的两个 API：store和view。

1. 创建状态存储

首先创建一个存储时间数据的状态容器。在src/appStore.js中定义：

import { store } from '@risingstack/react-easy-state'; // 创建可观察的状态存储 export const clockStore = store({ time: new Date().toLocaleTimeString() });

2. 创建响应式视图

使用view函数包装组件，使其能响应状态变化。在src/App.jsx中实现：

import React, { useEffect } from 'react'; import { view } from '@risingstack/react-easy-state'; import { clockStore } from './appStore'; // view 包装的组件会自动追踪状态依赖并重新渲染 export default view(() => { useEffect(() => { // 每秒更新时间 const timer = setInterval(() => { clockStore.time = new Date().toLocaleTimeString(); }, 1000); return () => clearInterval(timer); }, []); return ( <div className="clock"> <h1>{clockStore.time}</h1> </div> ); });

3. 启动应用

在src/index.js中挂载应用：

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

运行npm start即可看到实时更新的时钟界面。整个过程无需复杂的 Redux 样板代码，也不需要手动管理状态订阅，React Easy State 会自动处理状态变化和组件更新。

🚀 核心概念解析

什么是`store`？

store函数将普通对象转换为可观察的状态容器。任何对存储属性的修改都会自动触发使用该属性的组件重新渲染。例如：

import { store } from '@risingstack/react-easy-state'; const userStore = store({ name: 'John', age: 30, incrementAge() { this.age++; // 调用方法修改状态也会触发更新 } });

什么是`view`？

view函数是一个高阶组件，用于包装 React 组件。被包装的组件会自动追踪其使用的所有存储状态，当这些状态变化时，组件会智能地重新渲染。

import { view } from '@risingstack/react-easy-state'; const UserProfile = view(() => ( <div> <h1>{userStore.name}</h1> <p>Age: {userStore.age}</p> <button onClick={userStore.incrementAge}>+</button> </div> ));

📁 项目结构参考

React Easy State 项目通常遵循以下结构：

react-easy-state/ ├── src/ │ ├── store.js # 状态存储定义 │ ├── App.jsx # 主组件 │ └── index.js # 应用入口 └── examples/ # 示例项目集合 ├── clock/ # 时钟应用示例 ├── todo-mvc/ # TODO 应用示例 └── contacts/ # 联系人管理示例

你可以直接参考examples目录下的完整示例，包括时钟应用、待办事项应用和联系人管理应用等。

💡 最佳实践

状态分类：将全局状态和局部状态分开管理，全局状态放在单独的 store 文件中，局部状态可以直接在组件内创建。
避免过度包装：只对使用了 store 状态的组件使用view包装，纯展示组件无需包装。
异步操作：复杂异步逻辑建议放在 store 的方法中，保持组件简洁：

// store.js const dataStore = store({ items: [], loading: false, async fetchData() { this.loading = true; this.items = await api.fetchItems(); this.loading = false; } });