react 有没有 vue 的watch

React 中虽然没有直接与 Vue 相似的 `computed` 和 `watch` 特性，但可以使用 Hook（函数组件）的方式模拟这些功能。Vue 的 `computed` 对象类似于 React 中的自定义函数，用于计算并返回依赖于其他状态的值。而在 Vue 的 `watch` 中，你可以观察数据变化并在它们改变时触发回调。

在 React 中，如果你想要实现类似的功能，可以使用 `useEffect` Hook 来替代 Vue 的 `watch`，并且结合 `useState` 或 `useReducer` 来管理状态。比如：

import React, { useState, useEffect } from "react";

function MyComponent({ name, food }) {
  const [msg, setMsg] = useState('');

  // 类似于 Vue 的 computed
  useEffect(() => {
    setMsg(`我是${name}，我爱吃${food}`);
  }, [name, food]); // 当 name 或 food 发生改变时，重新渲染

  // 类似于 Vue 的 watch
  useEffect(() => {
    function nameChange(newName) {
      setMsg(`我是${newName}，我爱吃${food}`);
    }
    
    if (typeof name === 'string') {
      // 如果名字可用（非空），开始监听
      // 这里仅示例，实际应用可能需要更精细的控制如取消订阅
      nameChange(name);
    }
    // ...其他监听逻辑

    return () => {
      // 移除事件监听，防止内存泄漏
      // ...此处移除监听逻辑
    };
  }, [name]); // 只监听 name 的变化

  return <h1>{msg}</h1>;
}

export default MyComponent;