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

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;

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