布魯斯前端React面試題目 - useRef用途與實現原理

function AutoPlayVideo() {
  const videoRef = useRef(null);
  
  useEffect(() => {
    // 元件掛載後自動播放
    videoRef.current.play();
    
    return () => {
      // 元件卸載前暫停
      videoRef.current.pause();
    };
  }, []);
  
  return <video ref={videoRef} src="https://example.com/video.mp4" />;
}

function IntervalCounter() {
  const [count, setCount] = useState(0);
  // 保存interval ID，便於清理
  const intervalRef = useRef(null);
  // 記錄最後一次渲染時的count值
  const previousCountRef = useRef(0);
  
  useEffect(() => {
    // 保存前一次的count（會在每次渲染後執行）
    previousCountRef.current = count;
    
    // 設置interval
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    
    return () => {
      // 清理interval
      clearInterval(intervalRef.current);
    };
  }, []);
  
  return (
    <div>
      現在: {count}, 之前: {previousCountRef.current}
    </div>
  );
}

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  // 用ref快取前一次搜尋結果
  const prevQueryRef = useRef('');
  const cachedResultsRef = useRef({});
  
  useEffect(() => {
    // 如果查詢條件沒變，或者我們已經有快取結果，直接使用
    if (query === prevQueryRef.current && cachedResultsRef.current[query]) {
      setResults(cachedResultsRef.current[query]);
      return;
    }
    
    // 否則執行搜尋，並儲存結果
    fetchSearchResults(query).then(data => {
      setResults(data);
      prevQueryRef.current = query;
      cachedResultsRef.current[query] = data;
    });
  }, [query]);
  
  return (
    <ul>
      {results.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// 考慮這個計數器例子，兩種實現方式的區別
function CounterExample() {
  // 更新時會重新渲染
  const [stateCount, setStateCount] = useState(0);
  // 更新時不會重新渲染
  const refCount = useRef(0);
  
  return (
    <>
      <div>
        <h3>useState計數器: {stateCount}</h3>
        <button onClick={() => setStateCount(c => c + 1)}>
          增加state計數
        </button>
      </div>
      
      <div>
        <h3>useRef計數器: {refCount.current}</h3>
        <button 
          onClick={() => {
            refCount.current += 1;
            // 注意: 這裡需要手動強制重新渲染才能看到更新
            console.log('useRef值已更新，但UI不會自動更新');
          }}
        >
          增加ref計數 (不會顯示變化)
        </button>
      </div>
    </>
  );
}

// React內部useRef的簡化實現
function useRef(initialValue) {
  const hookIndex = currentComponent.currentHookIndex++;

  if (!currentComponent.hooks[hookIndex]) {
    currentComponent.hooks[hookIndex] = { current: initialValue };
  }

  return currentComponent.hooks[hookIndex];
}

// 在React Fiber中的Hook結構
{
  memoizedState: {
    /* useState的Hook節點 */
    // ...
    next: {
      // useRef的Hook節點
      memoizedState: { current: initialValue },
      next: {
        /* 下一個Hook */
        // ...
      }
    }
  }
}

function usePrevious(value) {
  const ref = useRef();
  
  useEffect(() => {
    // 每次渲染後更新ref的值
    ref.current = value;
  }, [value]);
  
  // 返回前一次的值
  return ref.current;
}

function ProfileUpdater({ userId }) {
  const prevUserId = usePrevious(userId);
  
  useEffect(() => {
    // 只有當用戶切換時才執行
    if (prevUserId !== userId) {
      console.log(`用戶從 ${prevUserId} 切換到 ${userId}`);
      fetchUserData(userId);
    }
  }, [userId, prevUserId]);
  
  // 組件其餘部分
}

function ConditionalRefExample({ showInput }) {
  const inputRef = useRef(null);
  
  // 與useLayoutEffect結合使用，確保DOM操作安全
  useLayoutEffect(() => {
    // 安全地檢查元素是否存在
    if (showInput && inputRef.current) {
      inputRef.current.focus();
    }
  }, [showInput]);
  
  return (
    <div>
      {showInput && (
        <input ref={inputRef} type="text" placeholder="我會自動聚焦" />
      )}
      {/* 沒有元素時ref.current為null */}
    </div>
  );
}