【 在 eGust (十年) 的大作中提到: 】
: 标  题: Re: 对比 vue，reactjs 就是个笑话！
: 发信站: 水木社区 (Thu Jul  1 06:07:35 2021), 站内
:
: 我就说我这个例子不好，果然带来了一些误会。
:
: 首先，useEffect 产生的是 side effect，通过某些 state 值从获取数据。那么正常情况下，你所使用的 value 值应该是从外部的 counter 来的，而不可能是在 setCounter 中再取一遍当前值。这里面的逻辑是，当产生外部作用的时候，控件的状态是 A，等异步执行完之后，控件的状态已经变成 B 了，这时再用 A 计算出来的结果去更新 B 状态，那么这个操作很大概率是错的。

明白你的意思了，你是说，前面例子中，如果用户需要从当前的外部counter取值，也应该能做到？vue也可以啊，watch(someRef, (v, oldV) => ... ) 这里就可以取到someRef的当前值。（顺便还附赠可以一起取到旧值。react hooks下useEffect里是取不到旧值的，官方也没有相关api，只能用户自己通过useRef来hack）

watch(aRef, (v) => aRef.value = v+1)
useEffect(() => setA(a+1))

这两个行为一致，都是多次运行的话取到同样的初始值，就是定义变更函数时就固定了a或者v的值

watch(aRef, () => aRef.value = aRef.value+1)
useEffect(() => setA((v) => v+1))

这两个行为也一致，是函数真实运行的时候才去取aRef、v的值。

:
: 其次，我的例子也是偷懒了，写成
: const value = ref(...) vs const [value, setValue] = useState(...)
: const step = ... vs const [step, setStep] = ...
: 可能更合适一些。
:
: 另外，按照 react 的设计，如果用 counter 的数据结构，使用 useReducer 更合理一些。这种情况下，具体用原来 value 还是增加后的 value，取决于 reducer/dispatch 怎么设计的。而 vue 的话，如果想用原本的 value 值，你会发现没那么容易了。
如上，也很容易

:
: 最后，react 里由于所有的函数都是完全正常的 js，多个 useEffect 是按照顺序执行的。在 vue 里面，watcher 的执行顺序就有有魔法了，没记错的话，watch 的是 computed 的话，那么会在 data/reactive wachters 运行完成之后才执行。
这个我没听说过，之后可以试试看。不过react官方没有提供computed的对应物，还得自己先实现一个...
:
: useState 里面的 setter，如果用函数形式的话，非异步的执行是合理的。如果是复杂数据结构的话，可以根据 useReducer 和多次 dispatch 来控制想要的执行结果。还是老话，每一步都是 newState = reduce(oldState, action)，没有意外也很容易写 unittest。
:
useReducer就是套壳的useState嘛，没啥区别，都是用户可以根据需求，用上面两种形式实现两种不同行为

: 【 在 beep (菜Ｍ.喵星耗子) 的大作中提到: 】
: : @eGust 试了一下，有意思。
: :   const [counter, setCounter] = useState({ value: 1, step: 1 })
: :   useEffect(() => {
: : ...................
:
: --
:
: ※ 来源:·水木社区 mysmth.net·[FROM: 122.57.163.*]
--
FROM 123.120.168.*