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

上文

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

前言

在 灌篮高手 首映的时间，我却还在改代码，确实有些罪过，不过周末约了好朋友 吃饭 -> 喝酒 -> 打篮球 -> 看电影 一条龙，也就没那么大的怨言了。

ruakwa 也迎来了第二次迭代，改善了数据传递的方式和时机，也新增了一些简单的功能让使用起来至少有点盼头，然后也稍微补齐了下使用文档。

话不多说，先上例子。

例子

例子组件都用了 antd

首先，这个例子只是展示下功能，并不是完全适合这种场景，但是我确实对 form 组件深恶痛绝，绝对是我最讨厌的组件，虽然说功能全，但是文档复杂，使用麻烦，最开始想搞 rukawa，就是想用订阅流的方式，让写起表单来简单点。而且，我觉得写起来确实也还行吧。

是一个很简单的逻辑例子，只有当 select 和 input 都有值时，button 可以点击，且 select 的值修改时，input 的值清空，相当于一个联动。

实现

其实就是分为 2 条线，一条是 button 订阅了 select 和 input 的值，另一条就是 input 订阅了 select 的值。

代码逻辑

直接上简单的代码。

// select

export const TestSelect: React.FC = () => {  
    const { setRukawaValue } = useRukawa({  
        name: 'select'  
    })  
  
    return <Select  
        style={{ width: 120 }}  
        onChange={val => setRukawaValue(val)}  
        options={[
            { value: 'jack', label: 'Jack' },  
            { value: 'lucy', label: 'Lucy' },  
            { value: 'Yiminghe', label: 'yiminghe' },  
        ]}  
    />  
}

// input

export const TestInput: React.FC = () => {  
    const { setRukawaValue, rukawaValues, value } = useRukawa(  
        {  
            name: 'input',  
            subscribes: ['select']  
        },  
        {  
            valueState: true  
        }  
    )  
  
    useEffect(() => {  
        if (rukawaValues.select !== undefined) {  
            setRukawaValue('');  
        }  
    }, [rukawaValues])  
  
    return <Input  
        style={{ width: 120 }}  
        value={value}  
        onChange={e => setRukawaValue(e.target.value)}  
    />  
}

// button

export const TestButton: React.FC = () => {  
    const [disabled, setDisabled] = useState(true);  
  
    const { rukawaValues } = useRukawa(  
        {  
            name: 'button',  
            subscribes: ['input', 'select']  
        },  
        {  
            debounce: 500  
        }  
    )  
  
    useEffect(() => {  
        console.log('rukawaValues', rukawaValues);  
        const dis = !(rukawaValues.select && rukawaValues.input);  
        setDisabled(dis);  
    }, [rukawaValues])  
  
    return <Button type="primary" disabled={disabled}>查询</Button>  
}

图文解说

debounce 效果，加个 500ms 的防抖。

再把防抖去了，看看 select 变更时候的效果。

当 select 的值变化清空 input 时，其实会发出2个值，因为 input 是在收到 select 变更的消息后才触发变更的，所以 button 会收到2次 value，但是由于 useEffect 是宏任务，订阅消息的多次传递并不会在 ui 显示上产生问题。

最后就是正常的节奏，input 再输入值后，button 可以点击。

结语

其实想这些是很费脑子的事情，中间一度想放弃，因为在项目中其实暂时并没有找到合适的地方去使用，开发需要效率，需要效率就意味着一些简单的页面不需要太多的思考，时间就是一切。

遇到需要通信的问题，直接一拍脑袋，提升呗，状态管理呗。然后 rukawa 本来就是从日常开发萌生出来的想法，结果写了用不上，那不就是一坨屎吗。

所以例子也没有使用真实项目里遇到的页面，怕钻牛角尖误导自己。但是我觉得吧，总有地方能用到！

其他

下个迭代目标

1. 能够支持 name, subscribes 变更，更新数据流（现在是一锤子买卖，最开始设定完就变更不了了）,应该比较麻烦，可能需要把 hook 的整体结构都调整一下
2. 类型（ts）需要优化一下，主要还是 ts 太菜了
3. 测试用例有空补一补，想着那么点代码可能也不需要？
4. 解决使用中碰到的问题和不合理的地方

期望五一的时候能把第一点解决吧，后面的就随缘了。然后努力找找适合使用的场景，不然就真的是一坨大便了。流川枫被泽北虐了一整场最后都站起来了，我应该也能站起来吧～

仓库

github.com/goo-yyh/ruk…

API 介绍

userukawa 可以接受 2 个参数， props 和 options

props

参数	说明	类型	必填
name	节点名称	string	是
subscribes	订阅节点名称	string[]	否
initialValue	节点初始值	any	否

options

参数	说明	类型	默认值
debounce	防抖	number	-
formatResult	对 rukawaValue 进行预处理	(values) => any	-
broadcastOnMounted	初次挂载是否广播value	boolean	true
ignoreSameValue	是否忽略相同的值	boolean	false
valueState	是否需要返回当前节点 value	boolean	false
pipes	rx pipes	OperatorFunction<any, any>[]	-

return

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

其他

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

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