当前位置：首页 > news >正文

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

news 2025/7/1 4:18:53

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

计算属性

实现效果
代码实现
函数式组件极简洁的实现，就这样

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 :<inputtype="text"value={firstName}onChange={(e) => setFirstName(e.target.value)}/></label><br /><label>Last Name :<inputtype="text"value={lastName}onChange={(e) => setLastName(e.target.value)}/></label></>);
}export default FullName;

计算大的方法缓存

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

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;

优化代码

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;