react 计算属性

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

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`是函数式组件中的钩子,需要在函数组件的顶部引入并按照特定的语法规则使用。它们更侧重于性能优化和函数引用的管理。

相关推荐
软件技术NINI9 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
知识分享小能手9 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
长空任鸟飞_阿康9 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
苏打水com10 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手10 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
tianchang10 小时前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
JNU freshman10 小时前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼11 小时前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
Asort11 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
我是日安11 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js