'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const ARRAY_SIZE = 15; // Helper to generate sorted unique random numbers const generateSortedArray = (size) => { const set = new Set(); while (set.size < size) { set.add(Math.floor(Math.random() * 90) + 10); } return Array.from(set).sort((a, b) => a - b); // Numeric sort }; export const BinarySearchView = () => { // State const [array, setArray] = useState([]); const [target, setTarget] = useState(null); // Pointers const [low, setLow] = useState(0); const [high, setHigh] = useState(ARRAY_SIZE - 1); const [mid, setMid] = useState(null); // Status const [foundIndex, setFoundIndex] = useState(null); const [message, setMessage] = useState("初始化..."); const [isSearching, setIsSearching] = useState(false); const searchRef = useRef(false); // Initialization useEffect(() => { const initialArr = generateSortedArray(ARRAY_SIZE); setArray(initialArr); // Pick a random target from the array to ensure we find it (for demo purposes) // Occasionally pick a number not in array? For this demo, let's stick to finding it. setTarget(initialArr[Math.floor(Math.random() * ARRAY_SIZE)]); setLow(0); setHigh(ARRAY_SIZE - 1); setMid(null); setFoundIndex(null); setMessage("准备开始二分查找 (Binary Search)"); }, []); // The Algorithm Loop useEffect(() => { const performSearch = async () => { if (searchRef.current || !array.length || target === null) return; searchRef.current = true; setIsSearching(true); let l = 0; let h = array.length - 1; // Delay before start await new Promise(r => setTimeout(r, 1500)); while (l <= h) { // Update visual state for pointers setLow(l); setHigh(h); setMessage(`搜索范围: [${l}, ${h}]`); await new Promise(r => setTimeout(r, 1000)); // Calculate Mid const m = Math.floor((l + h) / 2); setMid(m); setMessage(`计算中间位置 Mid = floor((${l} + ${h}) / 2) = ${m}`); await new Promise(r => setTimeout(r, 1500)); const midVal = array[m]; if (midVal === target) { setMessage(`找到目标值 ${target}！索引为 ${m}`); setFoundIndex(m); await new Promise(r => setTimeout(r, 3000)); break; // Exit loop } else if (midVal < target) { setMessage(`${midVal} < ${target} (太小了)，向右查找`); await new Promise(r => setTimeout(r, 1500)); l = m + 1; } else { setMessage(`${midVal} > ${target} (太大了)，向左查找`); await new Promise(r => setTimeout(r, 1500)); h = m - 1; } // Reset mid visual temporarily between iterations setMid(null); } // Reset Sequence setMessage("演示结束，即将重置..."); await new Promise(r => setTimeout(r, 2000)); // Reset Logic const newArr = generateSortedArray(ARRAY_SIZE); setArray(newArr); setTarget(newArr[Math.floor(Math.random() * ARRAY_SIZE)]); setLow(0); setHigh(ARRAY_SIZE - 1); setMid(null); setFoundIndex(null); setMessage("准备开始..."); searchRef.current = false; setIsSearching(false); // Triggers effect again if we want continuous loop, but need dependency check }; performSearch(); }, [array, target]); // Dependencies trigger restart when state is reset // Visual Constants const boxSize = 50; const gap = 10; const totalWidth = ARRAY_SIZE * (boxSize + gap) - gap; const startX = (VIEW_WIDTH - totalWidth) / 2; const startY = 300; return ( ); };