一、计算属性的概念（通过函数和钩子实现）

1. 使用`useMemo`钩子（用于性能优化）

`useMemo`是一个 React 钩子，用于缓存计算结果。它会在组件重新渲染时，根据依赖项数组来决定是否重新计算。如果依赖项没有改变，就会返回之前缓存的计算结果，从而避免不必要的计算开销。

javascript">import React, { useState, useMemo } from "react";function MyComponent() {const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);const sum = useMemo(() => {return numbers.reduce((acc, cur) => acc + cur, 0);}, [numbers]);return (<div><p>The sum of numbers is: {sum}</p><button onClick={() => setNumbers([...numbers, 6])}>Add a number</button></div>);}

2. 使用`useCallback`钩子（用于缓存函数）

`useCallback`主要用于缓存函数。在 React 中，当组件重新渲染时，函数会被重新创建。但是有些情况下，我们希望函数在依赖项没有改变时保持不变，以避免不必要的子组件重新渲染。

javascript">import React, { useState, useCallback } from "react";function ParentComponent() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><ChildComponent onClick={handleClick} /></div>);}function ChildComponent({ onClick }) {return <button onClick={onClick}>Increment in Child</button>;}

二、与传统计算属性（如 Vue 中的计算属性）的对比

1. 响应式原理差异

在 Vue 中，计算属性是基于响应式数据自动计算的。当响应式数据发生变化时，计算属性会自动重新计算。

在 React 中，需要手动使用`useMemo`或`useCallback`来实现类似的功能，并且需要明确指定依赖项来控制计算的触发。

2. 语法和使用方式差异

Vue 的计算属性在组件的`computed`选项中定义，语法比较简洁明了。

javascript">export default {data() {return {numbers: [1, 2, 3, 4, 5],};},computed: {sum() {return this.numbers.reduce((acc, cur) => acc + cur, 0);},},};

在 React 中，`useMemo`和`useCallback`是函数式组件中的钩子，需要在函数组件的顶部引入并按照特定的语法规则使用。它们更侧重于性能优化和函数引用的管理。