react-values 快速指南：用 render props 写出 React 组件状态管理

react-values 快速指南用 render props 写出 React 组件状态管理【免费下载链接】react-valuesA set of tiny React components for handling state with render props.项目地址: https://gitcode.com/gh_mirrors/re/react-valuesreact-values 是一个极轻量的 React 状态管理组件集。它基于 render props把渲染当作函数传给子组件的模式把状态封装进组件每个组件只管理一种类型的状态并直接暴露toggle、increment等操作。适合想快速做出开关、计数器、弹窗这类带状态组件、又不想手写自定义 Hook 的人。 上手体验三步跑通 react-values第一步安装npm install react-values # 或yarn add react-values第二步在文件顶部引入NumberValue写出计数器组件的主体NumberValue defaultValue{0} {({ value, increment, decrement }) ( div button onClick{decrement}-/button span{value}/span button onClick{increment}/button /div )} /NumberValue第三步把上面这段放进任意组件并渲染点击 或 - 就能加减数字。值得注意的一点状态完全由NumberValue持有子函数只接收当前值和两个操作函数全程没有useState也没有手写的状态更新逻辑。 组件家族一览组件管理的状态类型典型场景BooleanValue布尔值开关、弹窗开合NumberValue数字计数器、分页ArrayValue数组多选列表、过滤结果ObjectValue对象表单字段、配置项JavaScript 常见的 9 种类型含StringValue、DateValue、SetValue、MapValue和通用Value都有对应组件。方法名与原生 API 一致ArrayValue给的是push/pop/filterNumberValue给的是increment/decrement不用查文档就能猜到用法。它们统一支持value/defaultValue和onChange沿用 React 原生的受控与非受控约定。 一个真实场景复选框多选examples/checkbox-set.js 展示了复选框多选选中的项用一个SetValue管理Set保存每个复选框用value.has(item)判断勾选onChange里调用add或remove。下方已选标签和复选框列表共享同一个value改动任何一侧另一侧自动同步——不需要写两份互相拷贝的状态。⚖️ 和 Hooks 怎么选单个组件内部的逻辑useState更直接复用逻辑时提取自定义 Hook 即可不必引入额外依赖。要跨多处复用的状态组件react-values 更省事。组件包上Value后天然同时支持受控传valueonChange和非受控传defaultValue两种用法value、onChange还能直接展开透传给父组件。全局共享状态用createBooleanValue()这类工厂函数创建连接组件渲染树中任意多处可读写同一个值examples/connected-modal.js 就是这样让侧边栏和弹窗共享开合状态的。 延伸学习分步教程docs/guide.md从静态开关讲到受控/非受控最后讲连接组件。可运行示例examples/共 10 个覆盖提示框、弹窗、时间选择器、过滤列表。源码实现src/types/每种状态类型一个文件配合 src/utils/ 里的两个工具函数可以自己扩展。react-values 采用 MIT 协议单个组件只有几百字节体积。是否选用它取决于你希望在自己的状态组件里删掉多少这类样板逻辑。【免费下载链接】react-valuesA set of tiny React components for handling state with render props.项目地址: https://gitcode.com/gh_mirrors/re/react-values创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考