Usage with functional components?
denisinvader opened this issue · comments
I was excited by React Hooks because it provides state into functional components and I thought this is the same. But reading source code I understood that this implementation for stateful components. Why do I need use hooks instead of the local state? Maybe I missed something in examples, but I didn't found something that I couldn't create without hooks.
AFAIK, hooks are just another way to organize your Vue components.
As @skyrpex said, hooks is just an API design for logic organization - as long as it enables the same composition pattern, it doesn't matter what the underlying implementation is. (React hooks store state in the same place stateful React components store state)
The only difference between this and a "real" functional component is an extra withHooks call.
@132yse 你这样跑到别人的仓库下面贬低别人推销自己的东西很没教养。
@yyx990803 不好意思，删掉啦，但是确实现在的 vue-hooks 实现并不是 hooks 实现，他们的区别不是 多了 withHooks 的包裹，也许在 Vue 中，它们的区别确实是这样√但是脱离 Vue ，不借助类……情况完全不同，我不知道怎么形容这个本质的区别emmm
@132yse 这说明你根本就没理解 hooks 的本质。hooks 的优点就是具体实现是无关紧要的。
@132yse 这说明你根本就没理解 hooks 的本质。hooks 的优点就是具体实现是无关紧要的。
很不好意思。我觉得我们彼此想表达的不是一个立足点。如果你仅仅把它当作用来替代 mixin 的更友好的 API，那用它“共享”确实是通用的。但是 react 的 hooks 真正令人兴奋的我认为不是共享状态和逻辑，它是一种新的组件化方案，完全颠覆以往的 class √
@132yse 在 Vue 的语境里 hooks 是更适合作为 mixin 的取代品，但具体到这个库的实现，它并不限制你怎么使用它，事实上任何你用纯 functional components + hooks 能做的事情，这个库都可以做到，唯一的区别就是在 function 外面套一个 withHooks，除此之外没有任何区别。换言之用 vue-hooks 也可以做到完全抛弃 Vue 的其它 API，成为你所谓的 “一种新的组件化方案”，问题只在于用户想不想这么用。
@yyx990803 你说的有道理，在 Vue 这个类里面，确实可以这么做。只是我觉得完全可以做的更彻底，即，脱离 Vue 实例，使得外部任何函数都能经过一个 withHooks 类似的 API 成为 functional component，完全可以做到√
只可惜如果按照我的脑洞，确实不符合 vue 现在的模式。如你所言，在 Vue 的语境中，确实最合适成为 mixin 的替代品√
我知道怎么形容了::>_<:: 就，你在 Vue 实例里，借助类，自然啥都能拿到，而 react hooks 的神奇之处在于，脱离类，是真真真的 function 自己拥有和维护状态√
Thank you. I did some research and found that React hooks can't be ported on Vue functional components because of its implementation.
I'm not sure that I made the best research, but I could only create a very bad state with memory leaks and forever live time for functional components using Vue.util.defineReactive.
If someone interested, here is the code:
import Vue from 'vue';
let uid = 0;
const states = {};
export const useState = initialState => {
const nextUid = '' + uid++;
Vue.util.defineReactive(states, nextUid, initialState);
return [
() => states[nextUid],
newState => states[nextUid] = newState,
];
};<script>
import { useState } from '../hooks.js';
const [getCount, setCount] = useState(0);
export default {
functional: true,
render () {
const count = getCount();
return (
<div>
<h1>functional component</h1>
<p>count: {count}</p>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
},
};
</script>I think issue can be closed now
@yyx990803 你说的有道理，在 Vue 这个类里面，确实可以这么做。只是我觉得完全可以做的更彻底，即，脱离 Vue 实例，使得外部任何函数都能经过一个 withHooks 类似的 API 成为 functional component，完全可以做到√
只可惜如果按照我的脑洞，确实不符合 vue 现在的模式。如你所言，在 Vue 的语境中，确实最合适成为 mixin 的替代品√
我知道怎么形容了::>_<:: 就，你在 Vue 实例里，借助类，自然啥都能拿到，而 react hooks 的神奇之处在于，脱离类，是真真真的 function 自己拥有和维护状态√
以严格的函数式定义来说，react的hooks并没有给予function状态，而是借助currentDispatcher来记录节点状态。react的hooks的内容也是依附于节点的，无论是v-dom节点，还是fiber节点，但一定是一个与view层一一对应的确实存在的节点。这里和Vue的hooks依附于Vue实例的意义完全相同。与class根本就毫不沾边。而且react和vue虽然存在class的写法，vue里也有this的使用，但是实质上它们的**从一开始就都不是面向对象的，this只不过是对渲染节点/组件节点的一种引用罢了。class也只是一种组织代码的形式罢了。即使将来vue也去实现asyncRendering，依然可以保留实例的概念。Algebric Effect和逻辑聚合才是hooks的核心优点。对于Vue来说，完全可以把所谓的Vue实例，理解为【一个组件节点】+【一个render函数】。只是看起来好像有类，好像有this，其实本来就完全不是OOP模式。而在这个前提下，实现hooks是完全没有问题的。
@TotooriaHyperion 不同，一个是fiber节点，一个是vue大的实例，这个问题其实结束很久了
fiber 能够方便拿到 currentFiber 原因是它独特的遍历方式
vue 确实也可以做到，但是我不觉得 hooks 是 mixin 的变种
我还是认为，应该在组件遍历的过程中，保留 currentComponent，用来挂 state
就看 vue3 老大怎么搞了
@TotooriaHyperion 你的理解完全正确，hooks 作为一种 API 设计跟内部是不是 fiber 根本没半毛钱关系... 把 “是不是真正的 hooks” 跟内部实现绑在一起完全是鸡同鸭讲...