对比React的hooks与Vue的composition

对比React的hooks与Vue的composition

• 以一个倒计时的简单组件为例，使用两种方式去实现。

React的hooks写法

• hooks的写法完全一改之前的类组件的写法，完全的函数式编程，看起来变得更加简洁了，实际上如果用的不是很好，看起来会很难理解，不如类组件看起来那么清晰。
• 代码示例

    const loop = (obj, set) => {
        return setInterval(() =>{
            obj.count -= 1;
            set({
                ...obj
            });
        }, 1000);
    };

    const Counter = () => {
        const [ counter, setCounter ] = useState({
            count: 100
        });

        const interval = useRef(null);

        useEffect(() => {
            interval.current = loop(counter, setCounter);

            return () => {
                if(interval.current) {
                    clearInterval(interval.current);
                    interval.current = null;
                }
            }
        }, []);

        stop = () => {
            console.log('stop', interval)
            if(interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }

        return (
            <div class="Counter" onClick={stop}>
                { counter.count }
            </div>
        )
    };

Vue的composition写法

• 随着vue3.0的提出，实现了composition的api去实现组件的任意组合。
• 目前要使用composition API。还不能直接从vue中导出，需要单独安装@vue/composition-api包，并在入口处使用vue.use()引入，最后才能在vue文件中引入。
• 代码示例

// functions/index 导出一个公共方法，本来想着把变化的值也从一个公共数据的文件导出来，但是目前reactive还不能直接在js文件中引用，会报错误
export function loop(obj) {
  return setInterval(() =>{
    obj.count -= 1;
  }, 1000);
}
...
...

// Counter.vue文件
<template>
<div class="counter" @click="stop">
  {{ counter.count }}
</div>
</template>

<script>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive
} from '@vue/composition-api';
// import {
//   counter
// } from '../data/index';
import {
  loop
} from '../functions/index';

export default {
  setup() {
    const interval = ref(null);
    const counter = reactive({
      count: 100
    })

    onMounted(() => {
      interval.value = loop(counter);
    });

    onBeforeUnmount(() => {
      console.log('unmount', interval.value);
      if (interval.value) {
        clearInterval(interval.value);
        interval.value = null;
      }
    })

    function stop() {
      console.log('stop', interval.value);
      if (interval.value) {
        clearInterval(interval.value);
        interval.value = null;
      }
    }

    return {
      counter,
      stop
    }
  }
}
</script>

小结

• 两者其实都是提供了一种可以灵活组装组件的方式，使得以前通用的纯逻辑可以被抽离出来，大大的提高了可复用的代码块数量。
• 框架无优劣，全看自己所在公司以及需要使用的场景，至于抄袭不抄袭的，框架之间本来就是相互借鉴的，以后说不定就互相融合成一个崭新的框架了。