前几天，我在公司茶水间和同事们闲聊，突然冒出一个问题：“为啥 Vue 和 React 都选择了 Hooks？”
听到这个问题，我差点喷了口里的咖啡。Hooks 不是挺好用的吗？为啥要纠结这个问题？不过仔细一想，这个问题还真值得探讨。
于是，我花了点时间深入研究了一下，今天就和大家分享一下我的发现。
什么是 Hooks？
在深入讨论之前，我们先来简单了解一下什么是 Hooks。
React Hooks
React Hooks 是 React 16.8 中引入的一种新的 API，允许你在函数组件中使用状态和其他 React 特性，而无需编写类组件。主要的 Hooks 包括 useState、useEffect、useContext 等。
示例代码
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } export default Example;
Vue Composition API (Vue Hooks)
Vue Composition API，也被称为 Vue Hooks，是 Vue 3 中引入的一种新的代码组织方式。它通过 setup 函数和一组 Composition API 允许你在函数中组合逻辑，而无需使用组件选项。主要的 API 包括 ref、reactive、computed、watch 等。
示例代码
<template> <div> <p>You clicked {{ count }} times</p> <button @click="increment">Click me</button> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const count = ref(0); const increment = () => { count.value++; }; onMounted(() => { document.title = `You clicked ${count.value} times`; }); </script>
为什么选择 Hooks？
1. 逻辑复用和组织更灵活
React 之前的问题
在 React 之前的版本中，逻辑复用主要依赖于高阶组件（HOC）和 render props。虽然这些方法有效，但它们往往导致代码复杂度增加，特别是嵌套多层的情况下，代码变得难以维护。
Vue 之前的问题
在 Vue 2 中，逻辑复用主要通过 mixins 实现。虽然 mixins 可以复用代码，但它们也带来了命名冲突和代码不透明等问题，特别是当多个 mixins 被使用时，很难追踪数据和方法的来源。
Hooks 的解决方案
Hooks 通过将逻辑提取到可复用的函数中，解决了以上问题。无论是 React 还是 Vue，Hooks 都允许开发者更灵活地组织和复用代码，避免了复杂的嵌套和命名冲突。
React 示例：自定义 Hook
import { useState, useEffect } from 'react'; function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width; } function Example() { const width = useWindowWidth(); return <div>Window width: {width}</div>; } export default Example;
Vue 示例：组合函数
<template> <div>Window width: {{ width }}</div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue'; function useWindowWidth() { const width = ref(window.innerWidth); const handleResize = () => { width.value = window.innerWidth; }; onMounted(() => { window.addEventListener('resize', handleResize); }); onUnmounted(() => { window.removeEventListener('resize', handleResize); }); return width; } const width = useWindowWidth(); </script>
2. 减少类组件的复杂性
React 之前的问题
在 React 之前的版本中，类组件是主要的组件定义方式。然而，类组件在处理状态和生命周期方法时往往显得繁琐，而且 this 的使用容易引起混淆。
Vue 之前的问题
在 Vue 2 中，组件通过对象选项来定义。虽然这比类组件更直观，但当组件逻辑复杂时，方法和数据的分布仍然容易导致代码难以管理。
Hooks 的解决方案
Hooks 使得函数组件成为主要的组件定义方式，从而简化了状态管理和生命周期方法的使用。无论是 React 还是 Vue，函数组件和 Hooks 的结合使代码更加简洁和易于理解。
React 示例：函数组件
import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Counter;
Vue 示例：函数组件
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script setup> import { ref, watch } from 'vue'; const count = ref(0); const increment = () => { count.value++; }; watch(count, (newCount) => { document.title = `Count: ${newCount}`; }); </script>
3. 更好地支持 TypeScript
React 之前的问题
在 React 之前的版本中，类组件的类型定义相对复杂，需要额外的代码来定义 props 和 state 的类型。
Vue 之前的问题
在 Vue 2 中，虽然支持 TypeScript，但类型定义并不够直观，特别是在使用复杂的对象选项时。
Hooks 的解决方案
Hooks 提供了更直观的方式来定义类型，使得 React 和 Vue 都能更好地支持 TypeScript。
React 示例：类型定义
import { useState, useEffect } from 'react'; function useWindowWidth(): number { const [width, setWidth] = useState<number>(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width; } function Example() { const width = useWindowWidth(); return <div>Window width: {width}</div>; } export default Example;
Vue 示例：类型定义
<template> <div>Window width: {{ width }}</div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue'; function useWindowWidth(): number { const width = ref<number>(window.innerWidth); const handleResize = () => { width.value = window.innerWidth; }; onMounted(() => { window.addEventListener('resize', handleResize); }); onUnmounted(() => { window.removeEventListener('resize', handleResize); }); return width.value; } const width = useWindowWidth(); </script>
结论
通过以上分析，我们可以看到 React 和 Vue 选择 Hooks 并非偶然。
Hooks 提供了一种更灵活、更简洁的方式来组织和复用代码，减少了类组件的复杂性，并且更好地支持 TypeScript。
无论你是 React 开发者还是 Vue 开发者，掌握 Hooks 都能极大地提升你的开发效率和代码质量。
