🇨🇳翻译: react-values {一组简单,可组合的帮助程序 } 文档 ❤️ 校对 ✅
MIT License
react-values
为您提供一组简单,可组合的帮助程序,使您可以构建更复杂,有状态的UI组件,如
它使用基于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
创建一个简单的切换组件.Number
及其便利性转变.Date
及其便利性转变.String
用于过滤列表的值.Set
跟踪复选框组.Boolean
.Boolean
.如果您有一个显示常见用例的示例,请拉取请求!
如果你正在使用react-values
这是第一次看看入门指导您熟悉它的工作原理. 一旦你完成了,你可能想要查看全部API参考.
即使这还不够,你也可以,阅读源码,这很简单!
非常·欢迎!
看看贡献指示了解更多信息!
板岩是MIT许可.