Awesome

react-values@0.1.0

「 react-values为您提供一组简单,可组合的帮助程序,使您可以构建更复杂,有状态的UI组件,如切换,下拉列表,列表,复选框组,弹出窗口,工具提示,您可以命名它! 」

toggles, dropdowns, lists, checkbox groups, popovers, tooltips

校对 ✅

翻译的原文	与日期	最新更新	更多
commit	⏰ 2018 7.11		中文翻译

贡献

欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看

生活

If help, buy me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰

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用一些原则解决所有的这些......

原理

1. 利用渲染道具{render props}. 它使用基于render-prop的API,通过灵活的function-as-children模式向您展示 其状态 和 一些 方便的转换函数.

2. 遵循React的惯例. 它的组件遵循 React 自己的命名约定,使用熟悉的概念value/defaultValue. 这使得插入现有代码库或框架非常容易.

3. 遵循JavaScript的约定. 它暴露了JavaScript熟悉的内置方法,如setDate/setHours,push/pop,filter,concat等,以避免重新发明轮子,并强迫您不断阅读文档.

4. 非常轻巧. 它非常轻巧 (树抖动) ,大多数组件只有几百字节,因此您甚至可以从面向公众的组件库中导入它.

5. 优先考虑方便. 它旨在提供方便的功能,如increment,toggle和聪明的像incrementDate,decrementMonth,因此您可以在几行代码中构建复杂的交互.

例子

了解您的使用方法react-values,看看几个例子:

• 基本切换- 用一个Boolean创建一个简单的切换组件.
• 可重复使用的切换- 展示如何将其切换为您自己的UI工具包中的受控组件.
• 计数器- 使用简单计数器Number及其便利性转变.
• 时间选择器- 一个更复杂的时间选择器组件,使用Date及其便利性转变.
• 过滤- 一个基本的String用于过滤列表的值.
• 复选框设置- 用一个Set跟踪复选框组.
• 简单的工具提示- 一个简单的工具提示实现为Boolean.
• 简单模态框- 一个简单的模式实现为Boolean.

如果您有一个显示常见用例的示例,请拉取请求!

文档

如果你正在使用react-values这是第一次看看入门指导您熟悉它的工作原理. 一旦你完成了,你可能想要查看全部API参考.

• 入门
  • 安装react-values
  • 构建一个组件
  • 介绍状态
  • 观察变化
  • 设置默认值
  • 受控制与不受控制
  • 传播props
• 参考
  • <AnyValue>
  • <ArrayValue>
  • <BooleanValue>
  • <DateValue>
  • <MapValue>
  • <NumberValue>
  • <SetValue>
  • <StringValue>

即使这还不够,你也可以,阅读源码,这很简单!

帮忙

非常·欢迎!

看看贡献指示了解更多信息!

MIT许可.