React Hooks useMemo

    React Native+Taro+TypeScript的开发环境，useMemo的一些简单的使用

import React, { useState, useMemo } from "react";
import { View, Text, Input, Button } from "@tarojs/components";
import './index.scss';const expensiveCalculation = (num: number):number => {console.log('Calculating...')for (let index = 0; index < 1000000000; index++) {num += 1}return num
}// 用户数据类型
interface User {id: numbername: stringage: number
}
const UseMemoExample:React.FC = ()=> {const [count, setCount] = useState<number>(0);const [users, setUsers] = useState<User[]>([{id:1, name:'Alice', age: 25},{id:2, name:'Bob', age: 30},{id:3, name:'Charlie', age:35},]);const [searchTerm, setSearchTerm] = useState<string>('');// 使用 useMemo 缓存昂贵的计算结果const calculatedValue = useMemo<number>(()=>{return expensiveCalculation(count)}, [count])// 使用 useMemo 过滤用户列表，避免每次渲染都重新计算const filteredUsers = useMemo<User[]>(()=>{console.log('Filtering users...')return users.filter(user=>user.name.toLowerCase().includes(searchTerm.toLowerCase()))}, [users, searchTerm])// 使用 useMemo 缓存组件，避免不必要的重新渲染const userList = useMemo(()=>{return filteredUsers.map(user=>(<View key={user.id} className='txt'><Text>{user.name} - {user.age} years old</Text></View>), [filteredUsers])})const addUser = () => {const newId = users.length + 1setUsers([...users, {id: newId,name: `User ${newId}`,age: Math.floor(Math.random() * 30) + 20}])}return (<View className='container'><Text className='txt'>useMemo Example</Text><View className='container'><Text className='txt'>Expensive Calculation</Text><Text className='txt'>Count: {count}</Text><Text className='txt'>Calculated Value: {calculatedValue}</Text><Button className='btn' onClick={()=>setCount(count + 1)}>Increment</Button></View><View className='container'><Text className='txt'>User Search</Text><Inputstyle={{width: 320,height: 74,backgroundColor: 'darkkhaki',marginBottom: 30}}type='text'value={searchTerm}onInput={(e)=>setSearchTerm(e.detail.value)}placeholder='Search users...'/><Text className='txt'>Filter Users:</Text>{userList}<Button className='btn' onClick={addUser}>Add Random User</Button></View></View>)
}export default UseMemoExample