usePrevious#

import { usePrevious } from 'miaoma-rhooks'
import React, { useState } from 'react'

function Demo() {
    const [count, setCount] = useState(0)
    const previousCount = usePrevious(count)

    return (
        <div>
            <p>当前值: {count}</p>
            <p>上一次的值: {previousCount}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
        </div>
    )
}

import { usePrevious } from 'miaoma-rhooks'
import React, { useState, useEffect } from 'react'

function CompareChanges() {
    const [count, setCount] = useState(0)
    const previousCount = usePrevious(count)
    const [direction, setDirection] = useState('')

    useEffect(() => {
        if (previousCount !== undefined) {
            if (count > previousCount) {
                setDirection('增加')
            } else if (count < previousCount) {
                setDirection('减少')
            }
        }
    }, [count, previousCount])

    return (
        <div>
            <p>当前值: {count}</p>
            <p>上一次的值: {previousCount}</p>
            <p>变化方向: {direction}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
    )
}

import { usePrevious } from 'miaoma-rhooks'
import React, { useState, useEffect } from 'react'

function ObjectPropertyMonitor() {
    const [user, setUser] = useState({
        name: '张三',
        age: 25,
        role: '开发者'
    })
    const previousUser = usePrevious(user)
    const [changes, setChanges] = useState([])

    // 检测对象属性变化
    useEffect(() => {
        if (previousUser) {
            const changedProps = []
            Object.keys(user).forEach(key => {
                if (user[key] !== previousUser[key]) {
                    changedProps.push({
                        property: key,
                        from: previousUser[key],
                        to: user[key]
                    })
                }
            })

            if (changedProps.length > 0) {
                setChanges(changedProps)
            }
        }
    }, [user, previousUser])

    const updateUser = (field, value) => {
        setUser({
            ...user,
            [field]: value
        })
    }

    return (
        <div>
            <h3>用户信息</h3>
            <div>
                <label>姓名: </label>
                <input value={user.name} onChange={e => updateUser('name', e.target.value)} />
            </div>
            <div>
                <label>年龄: </label>
                <input type="number" value={user.age} onChange={e => updateUser('age', Number(e.target.value))} />
            </div>
            <div>
                <label>角色: </label>
                <select value={user.role} onChange={e => updateUser('role', e.target.value)}>
                    <option value="开发者">开发者</option>
                    <option value="设计师">设计师</option>
                    <option value="产品经理">产品经理</option>
                </select>
            </div>

            {changes.length > 0 && (
                <div>
                    <h4>最近的变化:</h4>
                    <ul>
                        {changes.map((change, index) => (
                            <li key={index}>
                                {change.property}: {String(change.from)} → {String(change.to)}
                            </li>
                        ))}
                    </ul>
                </div>
            )}
        </div>
    )
}