[rukawa]换种心情处理数据流（三）

上文

[rukawa]换种心情处理数据流（一）

[rukawa]换种心情处理数据流（二）

前言

之前的 api 设计感觉有些随意，部分 options 的修改，也没有很好地支持，于是乎重新整理了一下传参，把 node 的属性，和 数据处理 的属性做了区分，更容易理解。

例子

例子基本和 二 中保持了一致，就是展现了修改后，可以修改 debounce 和 subscribes 的功能。想通部分的代码就不贴了。

代码逻辑

export const TestButton: React.FC = () => {  
    const [disabled, setDisabled] = useState(true);  
    const [debounce, setDebounce] = useState(0);  
    const [subs, setSubs] = useState(['input', 'select']);  
  
    const { rukawaValues, valuesDetail } = useRukawa(  
        {  
        name: 'button',  
        subscribes: subs,  
        valueState: true  
        },  
        {  
        debounce  
        }  
    )  

    useEffect(() => {  
        console.log('rukawaValues', rukawaValues, valuesDetail);  
        const dis = !(rukawaValues.select && rukawaValues.input);  
        setDisabled(dis);  
    }, [rukawaValues])  
  
    return (  
        <div>  
            <Button type="primary" disabled={disabled}>查询</Button>  
            <div>  
                <Button onClick={() => {  
                    if (!debounce) {  
                        setDebounce(500)  
                    } else {  
                        setDebounce(0)  
                    }  
                }}>修改debounce</Button>  
            </div>  
            <div>  
                <Button onClick={() => {  
                    setSubs(['input'])  
                }}>修改subscribes</Button>  
            </div>  
        </div>  
    )  
}

图文结解说

加了 subscribes 和 debounce 的 state。

首先，在出初始情况下，button 订阅了 select 和 input 的值，并且没有设置 debounce。

点击了修改 debounce 的按钮以后，相当于设置了 500ms 的防抖。

可以看到新的一行没有及时输出，说明 debounce 生效了。

然后点击修改 subscribes 的按钮，将订阅改为 input。

可以看到最新传递过来的值已经没有了 select，说明 subscribes 也成功修改了。

Api

仓库

github.com/goo-yyh/ruk…

props

参数	说明	类型	必填
name	节点名称	string	是
subscribes	订阅节点名称	string[]	否
initialValue	节点初始值	any	否
broadcastOnMounted	初次挂载是否广播value	boolean	否
ignoreSameValue	是否忽略相同的值	boolean	否
valueState	是否需要返回当前节点 value	boolean	否

options

参数	说明	类型	默认值
debounce	防抖	number	-
formatResult	对 rukawaValue 进行预处理	(values) => any	-
pipes	rx pipes	OperatorFunction<any, any>[]	-

return

参数	说明	类型
rukawaValues	订阅节点值	any
valuesDetail	当前值和上一次更改的值	{ currentValues, oldValues }
setRukawaValue	更改当前节点值	(value) => void
value	当前节点值（需要开启 valueState）	any

其他

开启调试，可以看到每次值的传递。

import { getRukawa } from 'rukawa';  
  
getRukawa().showValue();  

Next

抛开不想做的，就剩一个react数据撕裂的问题, 解决完之后1.0 版本就能顺利 GA 了，争取下礼拜解决完，然后发布。

然后就妥妥地往项目里塞，初步的构想是想代替 form 组件在 表单查询 组件中的作用，因为没有那么多复杂的校验，但是却会有联动的需求，感觉用起来会比较契合。