React Hooks：前端开发的新纪元React Hooks开启了前端开发的新纪元，通过引入useState、useE

React Hooks 是 React版本引入的一项新特性，它允许开发者在不编写类组件的情况下使用状态和其他 React 特性。Hooks 提供了一种更简洁、更灵活的方式来组织组件逻辑，使得状态管理和副作用操作变得更加简单明了。React Hooks 的出现不仅改变了 React 开发者的编码习惯，也对整个前端社区产生了深远的影响。

一、React Hooks 的诞生

React Hooks 的设计灵感来源于函数式编程的理念，它允许开发者在一个函数组件中使用状态、生命周期以及其他 React 特性。在 React Hooks 出现之前，React 开发者主要依赖于类组件来管理组件的状态和生命周期。虽然类组件可以满足大多数需求，但它们的语法相对繁琐，而且当涉及到复杂的逻辑时，类组件往往会变得难以维护。 React Hooks 的引入解决了这些问题，让开发者能够以更简洁的方式编写代码。此外，Hooks 还有助于避免一些常见的模式陷阱，例如高阶组件和 render props 的过度使用。在这里我们就不过多展开叙述。

下面我们就切入正题吧！

二、useState: 引入响应式状态

useState 是一个用于在函数组件中管理状态的 Hook。它接受一个初始值，并返回一个数组，其中第一个元素是当前的状态值，第二个元素是一个更新状态的函数。

在这段代码中，useState 被用于管理多个状态变量：

1. sourceLanguage: 源语言选择的状态

const [sourceLanguage, setSourceLanguage] = useState('eng_Latn');

1. targetLanguage: 目标语言选择的状态

const [targetLanguage, setTargetLanguage] = useState('zho_Hans');

......

三、useRef: 动态绑定节点/对象

useRef 是另一个重要的 Hook，它可以用来创建一个可变的引用对象。这个引用对象的 .current 属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

const worker = useRef(null); // 响应式 web worker 对象

worker.current 的值将在组件的整个生命周期内保持不变。这意味着一旦 worker.current 被初始化为一个新的 Web Worker 实例，这个引用将一直指向同一个 Web Worker 实例，即使组件重新渲染。

四、useEffect: 生命周期钩子函数

useEffect 是一个功能强大的 Hook，它用于处理副作用操作，如数据获取、订阅或者手动更改 DOM。useEffect 接受一个回调函数作为参数，该回调会在组件渲染之后执行。此外，还可以传递一个依赖数组，用于告诉 React 当依赖项变化时是否需要重新执行该回调。

useEffect(() => {
// 局部 onMouted
if (!worker.current) {
  worker.current = new Worker(
    new URL("./worker.js", import.meta.url), {
      type: 'module'
    }
  )
  console.log(worker.current)
  worker.current.addEventListener('message', (e) => {
    switch(e.data.status){
      // LLM 依赖的多个文件触发 initiate 事件
      case 'initiate':
        setReady(false)
        // 接受一个函数  上一次的状态
        setProgressItems((prev) => [...prev,e.data])
        break;
        case 'progress':
          setProgressItems(
            prev => prev.map(item => {
              if (item.file === e.data.file) {
                return {...item, progress: e.data.progress};
              } else {
                return item; //确保了 map 函数总是返回一个有效的元素,防止 undefined 导致的错误
              }
            })
          )
            break;
          case 'done':
            setProgressItems(prev => prev.filter(item => item.file !== e.data.file))
            break;
          case 'ready':
            setReady(true)
            break;
          case 'update':
            setOutput(e.data.output)
            break;
          case 'complete':
            setDisabled(false);
            break;
    }
  })
}
})

在这段代码中，useEffect 被用于执行以下任务：

1. 初始化 Web Worker:
   • 当组件首次挂载时（即 useEffect 的依赖数组为空），检查 worker.current 是否为空。
   • 如果为空，则创建一个新的 Web Worker 实例，并将其赋值给 worker.current。
   • 为 Web Worker 添加事件监听器，处理来自 Worker 的消息。
   • 根据消息的不同状态更新状态变量。
2. 清理 Web Worker:
   • 当组件卸载时，useEffect 的返回函数会被调用，此时可以进行必要的清理操作，如取消监听事件等。

五、Vue 对 React Hooks 的借鉴

Vue.js 也受到了 React Hooks 思想的影响。Vue 3 引入了 Composition API，它类似于 React Hooks 的功能，允许开发者在 Vue 组件中使用类似的函数式编程方法。Composition API 通过 <script setup> 语法糖和组合式 API 函数（如 ref, reactive, computed, watch 等）提供了类似的功能。

1.Vue 中的 ref 和 reactive

Vue 的 ref 和 reactive 类似于 React 的 useState 和 useRef。ref 创建了一个响应式的引用，而 reactive 则创建了一个响应式的对象。

import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({ count: 0 });

// 使用 ref
count.value++;
// 使用 reactive
state.count++;

2.Vue 中的生命周期钩子

Vue 3 的 Composition API 提供了一系列生命周期钩子，如 onMounted, onUnmounted, 和 onUpdated，这些钩子的功能与 React 的 useEffect 类似。

import { onMounted, onUnmounted, onUpdated } from 'vue';

const setup = () => {
  let timer;

  onMounted(() => {
    timer = setInterval(() => {
      console.log('qyt mounted');
    }, 1000);
  });

  onUnmounted(() => {
    clearInterval(timer);
    console.log('qyt unmounted');
  });

  onUpdated(() => {
    console.log('qyt updated');
  });
};

六、结论

React Hooks 和 Vue 的 Composition API 都极大地简化了状态管理和副作用操作的过程，使得开发者能够更加专注于业务逻辑而非框架本身的细节。这两种方法都证明了函数式编程理念在前端开发中的价值，并且正在推动着整个前端领域的进步和发展。

React Hooks 的出现标志着 React 朝着更加现代化的方向迈进了一大步，同时也激发了其他框架和库的发展。随着这些新技术的应用越来越广泛，我们期待看到更多创新和改进出现在未来的前端开发实践中。