推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 1607 天前的主题，其中的信息可能已经有所发展或是发生改变。
// 希望实现如下的 useMiddleware 函数, 尝试了一下, 发现有点费劲
// 尝试性翻看 react-use, 果然有相似的实现: https://github.com/streamich/react-use/blob/master/docs/useMediatedState.md
// 感觉已经很合用了, 但是好像如下这样的调用方式, 更好看, 更灵活
// 见多识广的大佬能指点一下哪儿是否有类似的实现吗?
// 或者指出我这样调用的弊端?
// 如果实在没有, 可能就得参考 react-use, 硬着头皮自己写了
// 提前感谢大佬们
export function Foo() {
const [number, setNumber] = useState(1)
// 这儿能通过类似于中间件那样的语法链式调用, 扩展 setNumber 函数
const newSetNumber = useMiddleware(setNumber).use((val) => val * 2).use((val) => val - 1).value
return <button onClick={() => newSetNumber((val) => val + 5)}>
{number}
</button>
}
 |
1
dekuofa 2020-07-02 07:32:35 +08:00
|
 |
2
xiaoming1992 OP @dekuofa 这就看出我的基础不行了，确实，这叫管道更合适一些。但是我希望包内部能处理 useHook 输入参数的差异
|
 |
3
phobal 2020-07-02 08:42:59 +08:00 via iPhone
看 taro3 支持类似 jquery 的 chain 式调用，可以去看下他们的实现
|
 |
4
ccraohng 2020-07-02 09:09:14 +08:00 via Android
要么返回 this 之类的要么返回同样功能的 object，最后 value 实现 get，use 就是把参数加入队列，计算的时候依次求值
|
|
5
dekuofa 2020-07-02 09:15:07 +08:00
@xiaoming1992 不是很明白你的"包内部能处理 useHook 输入参数的差异"，这块能展开描述一下吗
|
 |
6
StrayBugs 2020-07-02 09:50:38 +08:00 via Android
如果能接受 rxjs 的话可以看看 https://observable-hooks.js.org
|
|
7
xiaoming1992 OP @dekuofa
``` tsx function Foo() { __// 这个 setNumber 函数既可以接受 number 类型的参数, 也可以是 (prev: number) => number 函数作为参数, 我希望能像 react-use useMediatedState 那样在函数的内部就把入参的差异给抹掉, 而不是在用的时候再判断 __const [number, setNumber] = useState(1) // ... } ``` |
|
8
xiaoming1992 OP @StrayBugs 说实话，总感觉 rxjs 和 react 不怎么搭...
|
 |
9
Qinmei 2020-07-02 15:41:20 +08:00
自己写个 middleware 函数就行了吧，不过前端对于数据的处理确实不多
|
|
10
xiaoming1992 OP @Qinmei 我的链接中的 react-use 的例子就是非常典型的使用场景，主要是构造那么一个函数有些麻烦。不过今天想了想，还是没用 react-use 的方法，用的 useEffect 监听值的变动，在变动以后当成副作用来作进一步处理。
|
 |
11
ericgui 2020-09-01 01:57:29 +08:00
|
Select Language