react18中的计算属性及useMemo的性能优化技巧

react18里面的计算属性和使用useMemo来提升组件性能的方法

计算属性

  • 实现效果
  • 代码实现
    函数式组件极简洁的实现,就这样
js 复制代码
import { useState } from "react";
function FullName() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const fullName = firstName + " " + lastName;
  return (
    <>
      <h1>fullname:{fullName}</h1>

      <label>
        First Name :
        <input
          type="text"
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
      </label>

      <br />
      <label>
        Last Name :
        <input
          type="text"
          value={lastName}
          onChange={(e) => setLastName(e.target.value)}
        />
      </label>
    </>
  );
}

export default FullName;

计算大的方法缓存

子组件会因为propsstate的变化而重新渲染,这其中如果有很大计算量的方法的话,就会严重拖慢页面加载速度。像下面这种就是因为一个无关的更新,导致计算一会在执行,计算量大的话性能损耗很大

js 复制代码
import { useState, useMemo } from "react";
function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState("");
  const visibleTodos = getFilteredTodos(todos, filter);
  return (
    <>
      <ul>
        {visibleTodos.map((todo) => {
          return <li>{todo.name}</li>;
        })}
      </ul>
      {newTodo}
      <br />
      <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
    </>
  );
}

function getFilteredTodos(todos, filter) {
  console.log("🚀 ~ getFilteredTodos ~ todos:", todos);
  return todos.filter((todo) => {
    return filter.call(null, todo);
  });
}
export default TodoList;

优化代码

js 复制代码
import { useState, useMemo } from "react";
function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState("");
  const visibleTodos = useMemo(
    () => getFilteredTodos(todos, filter),
    [todos, filter]
  );
  return (
    <>
      <ul>
        {visibleTodos.map((todo) => {
          return <li>{todo.name}</li>;
        })}
      </ul>
      {newTodo}
      <br />
      <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
    </>
  );
}

function getFilteredTodos(todos, filter) {
  console.log("🚀 ~ getFilteredTodos ~ todos:", todos);
  return todos.filter((todo) => {
    return filter.call(null, todo);
  });
}
export default TodoList;


这会告诉 React,除非 todos 或 filter 发生变化,否则不要重新执行传入的函数,这样我们我们的计算就不会在无关的状态变化时执行了,极大的提升了性能。

相关推荐
前端小巷子2 分钟前
CSS 单位指南
前端·css
St2 分钟前
探索JavaScript原型链设计——详解prototype、__proto__及constructor三者之间的关系
前端·javascript
前端大白话3 分钟前
JavaScript中`Symbol.for()`和`Symbol()`的区别,在创建全局唯一的`Symbol`值时如何选择使用?
前端·javascript·设计模式
喵爱吃鱼3 分钟前
原来这就是react设计模式啊
前端·javascript·react.js
前端大白话5 分钟前
前端必看!90% 工程师踩过的状态管理坑,useReducer 如何一招化解?
前端·javascript·react.js
前端大白话5 分钟前
揭秘 HTML 可拖动元素及拖放功能:HTML5 API 大起底
前端·javascript·html
Moment22 分钟前
通过爬取 B 站热门视频来带你彻底了解 Playwright 🤷🏿‍♂️🤷🏿‍♂️🤷🏿‍♂️
前端·javascript·后端
Java~~38 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-前端美化滚动条问题
前端
掘金安东尼1 小时前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试
喝养乐多长不高1 小时前
详细PostMan的安装和基本使用方法
java·服务器·前端·网络协议·测试工具·https·postman