「 react-values为您提供一组简单,可组合的帮助程序,使您可以构建更复杂,有状态的UI组件,如切换,下拉列表,列表,复选框组,弹出窗口,工具提示,您可以命名它! 」
toggles, dropdowns, lists, checkbox groups, popovers, tooltips
| 翻译的原文 | 与日期 | 最新更新 | 更多 |
|---|---|---|---|
| commit | ⏰ 2018 7.11 |  |
中文翻译 |
欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看
If help, buy me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰
一个小小的集合 关于, React 组合 components
控制 状态{state} 来 影响 渲染{render}的 道具{props}.
react-values为您提供一组简单,可组合的帮助程序,使您可以构建更复杂,有状态的UI组件,如
- 切换,下拉列表,列表,复选框组,弹出窗口,工具提示
- toggles, dropdowns, lists, checkbox groups, popovers, tooltips
- 或者您可以命名它!
它使用基于render-prop的 小API 来实现这一点,它提供了有用的转换toggle,increment,filter等等,取决于值的类型,所有都基于 JavaScripts 原生值类型...
Any提供简单的转换像set和clear.Array提供原生方法push,pop,filter等Boolean提供toggle,当然我们也能重新实现100次.Date提供了非常有用的转换setHours和incrementMonth.Map提供原生方法set,delete和clear.Number提供increment和decrement,也在每个代码库中重写.Set提供原生方法add,delete和clear.String提供原生方法concat,repeat,trim等
这样可以避免您不断重写 相同的状态 管理逻辑,这样您就可以将组件集中在 行为和 表示 上.
例如,这是一个<Toggle>的实现,通过使用<BooleanValue>了了几行就搞定:
import { BooleanValue } from 'react-values'
const Toggle = ({ value, defaultValue, onChange }) => (
<BooleanValue value={value} defaultValue={defaultValue} onChange={onChange}>
{({ value: on, toggle }) => (
<Track on={on} onClick={toggle}>
<Thumb on={on} />
</Track>
)}
</BooleanValue>
)
const Track = styled.div`
position: relative;
height: 25px;
width: 50px;
background-color: ${props => (props.on ? 'lightgreen' : 'lightgray')};
border-radius: 50px;
`
const Thumb = styled.div`
position: absolute;
left: ${props => (props.on ? '25px' : '0')};
height: 25px;
width: 25px;
background-color: white;
border-radius: 50px;
`在使用 React 构建应用程序时,您最终会在此过程中构建大量有状态组件. 无论哪个级别的 UI组件,都会有,如 切换,工具提示,复选框组,下拉列表 等,还是在 应用程序级别的组件模态框,弹出窗口,排序,过滤 等.
在此过程中,无论是否使用this.setState，你最终都会重新实现 折磨般的状态的处理逻辑的运行 - 或者通过一遍又一遍地构建相同的行为创建者. 还有可能为了使您的组件 在 您的应用程序中可以很好地重用,您会使用value要么defaultValue来增强处理"受控"和"不受控制"的使用.
为了使事情更容易管理,你重新发明了常见的转换函数open,close,toggle,increment,decrement等等,在许多不同的组件. 如果您正在与团队合作,那么您最终会在 整个代码库 中以 不同的方式 完成所有这些一样工作.
最后,您现在 维护的逻辑 比 必要的 多得多,在许多不同的地方仅仅是略微不同方式的复制. 您的应用程序包的大小越来越大.
react-values用一些原则解决所有的这些......
-
利用渲染道具{render props}. 它使用基于
render-prop的API,通过灵活的function-as-children模式向您展示 其状态 和 一些 方便的转换函数. -
遵循React的惯例. 它的组件遵循
React自己的命名约定,使用熟悉的概念value/defaultValue. 这使得插入现有代码库或框架非常容易. -
遵循JavaScript的约定. 它暴露了JavaScript熟悉的内置方法,如
setDate/setHours,push/pop,filter,concat等,以避免重新发明轮子,并强迫您不断阅读文档. -
非常轻巧. 它非常轻巧 (树抖动) ,大多数组件只有几百字节,因此您甚至可以从面向公众的组件库中导入它.
-
优先考虑方便. 它旨在提供方便的功能,如
increment,toggle和聪明的像incrementDate,decrementMonth,因此您可以在几行代码中构建复杂的交互.
了解您的使用方法react-values,看看几个例子:
- 基本切换- 用一个
Boolean创建一个简单的切换组件. - 可重复使用的切换- 展示如何将其切换为您自己的UI工具包中的受控组件.
- 计数器- 使用简单计数器
Number及其便利性转变. - 时间选择器- 一个更复杂的时间选择器组件,使用
Date及其便利性转变. - 过滤- 一个基本的
String用于过滤列表的值. - 复选框设置- 用一个
Set跟踪复选框组. - 简单的工具提示- 一个简单的工具提示实现为
Boolean. - 简单模态框- 一个简单的模式实现为
Boolean.
如果您有一个显示常见用例的示例,请拉取请求!
如果你正在使用react-values这是第一次看看入门指导您熟悉它的工作原理. 一旦你完成了,你可能想要查看全部API参考.
即使这还不够,你也可以,阅读源码,这很简单!
非常·欢迎!
看看贡献指示了解更多信息!