词法React Hook 应用 Composition AP

react Hook

React Hook 是 React 16.8 版本号引进的一项新特性，它可以让函数公式部件有着类部件里的情况(state)和生命期方式(lifecycle methods)等服务。React Hook 涵盖了好几个钩子函数(hook functions)，如 useState、useEffect、useContext 等，在函数公式部件中使用这个钩子函数能够实现一系列比较常见的作用，如管理方法部件内部情况、解决不良反应等。React Hook 的诞生促使函数公式部件能够更加高效地解决繁杂的思路，并且也提供了一种清楚并可器重的代码结构，促使编码便于日常维护拓展。

react Hook demo

以下属于一个简单的 React Hook 的范例编码：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count   1)}>Click me</button>
    </div>
  );
}

export default Counter;

这一部件采用了useState勾子来储存并升级一个电子计数器状态。当客户点击图标时，电子计数器也会增加，而且在 UI 中显现出来。该 Hook 接纳最初的状态做为主要参数，并回到系统状态和一个升级状态下的函数公式。在这里实例中，使用二维数组结构将状态值和更新函数公式分给count和setCount自变量。每一次客户点击按键时，我们用setCount函数公式升级count状态。

vue Hook

Vue 2.x 中无法提供 Hooks API，可是 Vue 3.x 逐渐引进了 Hooks API，用以在函数式部件中获得状况和生命周期管理方法。类似 React 里的 Hooks，Vue 的 Hooks API 包含 setup() 和一些预设的 hooks 函数公式，如 ref()、watch()、onMounted() 等，能够让我们比较方便地撰写函数式部件，而且具有更高的整体性能。在其中，setup() 函数公式会到部件建立曾经被启用，它接受2个主要参数：props 和 context。在 setup() 函数公式内部结构，我们可以用预设的 hooks 函数公式来定义响应式网站数据信息、监视数据波动、实行不良反应等行为，最终回到一个对象，该目标其中包含模版中常需要用到的信息与方法。

vue hook demo

好一点的，以下属于一个简单的 Vue Hook Demo：

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const count = ref(0);

      function increment() {
        count.value  ;
      }

      return {
        count,
        increment,
      };
    },
  };
</script>

在这样一个实例中，大家采用了 Vue 3 的 setup 函数公式来定义元件的逻辑性。根据 ref 函数公式，大家创建了一个响应式网站的自变量 count，并把它初值设成 0。随后，大家重新定义了一个名为 increment 的函数公式来提高 count 数值。

在模版中，大家显示出了现阶段的 count 值，并且在按键上绑定 increment 函数公式。当点击图标时，count 数值也会增加，与此同时主视图还会自动升级以体现一个新的值。

react Hook 和 vue Hook 的差别

React 和 Vue 都有各自的 Hook 体制，能够帮助开发人员能够更好地管理方法部件状况和个人行为。以下是 React Hook 和 Vue Hook 间的一些关键差别：

1. 词法

React Hook 应用函数式部件词法，同时通过启用特定 Hook 函数公式来加上状况和个人行为。

Vue Hook 应用 Composition API，它可在单独函数公式内撰写部件逻辑性，并通过启用特定 API 函数公式来加上状况和个人行为。

2. 数据信息响应性

在 Vue 中，信息是响应式网站的，这就意味着当数据信息变化时，有关的部件会自动再次3D渲染。

在 React 中，数据信息并不是自动响应式，需要用到“useState”等 Hooks 来实现用户响应式网站。除此之外，React 还提供了一个称之为“useReducer”的 Hook，可以更好的解决繁杂的状态管理。

3. 生命期

在 React 中，Class 部件具备生命期方式，可开启元件的各种各样实际操作，比如初始化、更新和卸载掉。Hooks 提供了一种替代方法，还可以在函数公式部件中实行相似的实际操作，比如应用“useEffect”Hook 来模拟生命期方式。

在 Vue 中，部件也具备生命期勾子，比如"beforeCreate"、"created"、"beforeMount"、"mounted"等，这种钩子函数能够在特定性命环节实行逻辑性。

4. 部件通讯

在 Vue 中，部件通讯能通过父子俩部件间的 props 和事件总线来达到。也可以使用 Vuex 来达到跨部件状态管理。

在 React 中，部件通讯能通过 props 和 context 来达到。除此之外，可以用 Redux 等可以全局性浏览状态器皿来处理繁杂的状态管理。

5. TypeScript 适用

Vue 3 具备真正的 TypeScript 适用，包含 Prop 类型检查、基本数据类型推论和部件 API 定义方法。Composition API 也提供了一些额外优点，比如更加好的种类推论和 IDE 适用。

React 也有一定程度的 TypeScript 适用，但是需要手动式撰写定义方法，而且具有一些局限。

总体来说，React Hook 和 Vue Hook 都提供了一种十分方便的方式去管理方法部件状况和个人行为。二者的关键区别就是词法、数据信息响应性、生命期、部件通信和 TypeScript 适用等多个方面。开发者可以根据实际情况和喜好找到适合自己的框架和体制。