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: number
  name: string
  age: 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 + 1
    setUsers([...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>
        <Input
          style={{
            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