为啥 Vue 和 React 都选择了 Hooks ？什么是Hooks ？它的主要作用是什么？_为什么总希望将vue3的组合式函数叫作hooks-CSDN博客

本文链接：https://blog.csdn.net/weixin_43045869/article/details/149333465

1. 什么是 Hooks？

Hooks 是一组函数式 API，允许你在函数组件中使用状态（state）、生命周期等原本只有类组件才支持的特性。核心特点：

无类组件：完全基于函数组件开发。
逻辑复用：通过自定义 Hook 共享状态逻辑（取代高阶组件或渲染属性）。
代码组织：将相关逻辑聚合到独立的 Hook 中（而非分散在生命周期方法里）。

常见 Hooks 示例：

useState：管理组件状态。
useEffect：处理副作用（如数据请求、DOM 操作）。
useContext：访问上下文。
自定义 Hook：如 useFetch（封装数据请求逻辑）。

2. 为什么 Vue 和 React 都选择 Hooks？

React 的动机（2018 年引入）

类组件的缺陷：
- 逻辑分散：相关代码被拆分到不同生命周期（如 componentDidMount 和 componentDidUpdate）。
- 复用困难：高阶组件（HOC）或渲染属性（Render Props）导致嵌套地狱。
- this 绑定问题：类方法需要手动绑定 this，增加复杂度。
Hooks 的优势：
- 函数式编程：更简洁的代码，避免类的复杂性。
- 逻辑聚合：将状态和副作用集中管理（如用 useEffect 替代多个生命周期）。
- 复用性：自定义 Hook 可跨组件复用逻辑。

Vue 的动机（Vue 3 的 Composition API，类似 Hooks）

Options API 的局限：
- 逻辑碎片化：同一功能的代码分散在 data、methods、computed 等选项中。
- 复用限制：Mixins 容易导致命名冲突和来源不清晰。
Composition API 的优势：
- 逻辑组合：通过 setup() 函数将相关逻辑组织在一起。
- 更好的 TypeScript 支持：函数式 API 对类型推断更友好。

3. Hooks 的主要作用

状态管理
在函数组件中使用局部状态（如 useState），无需转换为类组件。
副作用控制
统一处理副作用（如数据请求、事件监听）通过 useEffect（React）或 watch（Vue）。
逻辑复用
自定义 Hook（如 useToggle、useDebounce）可被多个组件复用，避免重复代码。
代码可读性
将组件拆分为更小的函数单元，按功能而非生命周期组织代码。

4. 对比示例

React 类组件 vs. Hooks

// 类组件
class Counter extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  
  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Hooks 函数组件
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return <button onClick={increment}>{count}</button>;
}

Vue Options API vs. Composition API

// Options API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  }
}

// Composition API
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}