watch
Vue中的watch用于观测指定属性或表达式的变化并作出相应的操作。在React中，我们可以使用useEffect钩子函数来模拟类似功能。下面是一个示例代码：
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
// 当 count 发生改变时会调用该 effect
useEffect(() => {
console.log('count changed');
// 这里可以进行其他操作，比如更新状态、发送网络请求等
}, [count]);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(prevCount => prevCount + 1)}>Increase</button>
</div>
);
}
上述代码中，每次点击按钮后，setCount被调用，从而导致count值的改变。由于useEffect内部传入了[count]参数，所以只有当count发生改变时才会重新运行effect。
computed
Vue中的computed用于根据已存在的属性计算得到一个新的属性。在React中，我们也可以使用自定义hooks来实现类似功能。下面是一个示例代码：
import React, { useState } from 'react';
// 创建一个自定义 hooks
const useComputedValue = () => {
const [valueA, setValueA] = useState(0);
const [valueB, setValueB] = useState(0);
// computed value
const sum = valueA + valueB;
return [sum, setValueA, setValueB];
};
function MyComponent() {
const [sum, setValueA, setValueB] = useComputedValue();
return (
<div>
<input type="number" onChange={e => setValueA(parseInt(e.target.value))} />
<input type="number" onChange={e => setValueB(parseInt(e.target.value))} />
<p>Sum: {sum}</p>
</div>
);
}
上述代码中，我们创建了一个名为useComputedValue的自定义hook，返回了三个值：sum（计算结果）、setValueA（设置valueA的函数）和setValueB（设置valueB的函数）。然后在组件中使用这些值来展示输入框和显示计算结果。
