React Ref 清理：掌握引用生命周期管理

            
import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Explicitly focus the text input using the raw DOM API
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };

  return (
    <>
      
      Focus the input
    
  );
}

export default TextInputWithFocusButton;

            

              
                Copy
              
            
          

            
import React, { useRef, useEffect } from 'react';

function ScrollTracker() {
  const scrollContainerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      if (scrollContainerRef.current) {
        console.log('Scroll position:', scrollContainerRef.current.scrollTop);
      }
    };

    const element = scrollContainerRef.current;
    if (element) {
      element.addEventListener('scroll', handleScroll);
    }

    // Cleanup function
    return () => {
      if (element) {
        element.removeEventListener('scroll', handleScroll);
        console.log('Scroll listener removed.');
      }
    };
  }, []); // Empty dependency array means this effect runs only once on mount and cleans up on unmount

  return (
    

      

        Scroll me!
      
    
  );
}

export default ScrollTracker;

            

              
                Copy
              
            
          

            
import React, { useRef, useEffect } from 'react';
// Assume 'SomeChartLibrary' is a hypothetical charting library
// import SomeChartLibrary from 'some-chart-library';

function ChartComponent({ data }) {
  const chartContainerRef = useRef(null);
  const chartInstanceRef = useRef(null); // To store the chart instance

  useEffect(() => {
    const initializeChart = () => {
      if (chartContainerRef.current) {
        // Hypothetical initialization:
        // chartInstanceRef.current = new SomeChartLibrary(chartContainerRef.current, {
        //   data: data
        // });
        console.log('Chart initialized with data:', data);
        chartInstanceRef.current = { destroy: () => console.log('Chart destroyed') }; // Mock instance
      }
    };

    initializeChart();

    // Cleanup function
    return () => {
      if (chartInstanceRef.current) {
        // Hypothetical cleanup:
        // chartInstanceRef.current.destroy();
        chartInstanceRef.current.destroy(); // Call the destroy method of the chart instance
        console.log('Chart instance cleaned up.');
      }
    };
  }, [data]); // Re-initialize chart if 'data' prop changes

  return (
    

      {/* Chart will be rendered here by the library */}
    
  );
}

export default ChartComponent;

            

              
                Copy
              
            
          

            
import React, { useRef, useEffect, useState } from 'react';

function MyComponent() {
  const isMounted = useRef(false);
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    isMounted.current = true; // Set to true when mounted

    const timerId = setTimeout(() => {
      if (isMounted.current) { // Check if still mounted before updating state
        setMessage('Data loaded!');
      }
    }, 2000);

    // Cleanup function
    return () => {
      isMounted.current = false; // Set to false when unmounting
      clearTimeout(timerId); // Clear the timeout as well
      console.log('Component unmounted and timeout cleared.');
    };
  }, []);

  return (
    

      
{message}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

            
import React, { useRef, useEffect } from 'react';

function Modal({ isOpen, onClose, children }) {
  const modalRef = useRef(null);

  useEffect(() => {
    const handleOutsideClick = (event) => {
      // Check if the click was outside the modal content and not on the modal overlay itself
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleOutsideClick);
    }

    // Cleanup function
    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
      console.log('Modal click listener removed.');
    };
  }, [isOpen, onClose]); // Re-run effect if isOpen or onClose changes

  if (!isOpen) {
    return null;
  }

  return (
    

      

        {children}
        Close
      
    
  );
}

export default Modal;

            

              
                Copy
              
            
          

            
import { useRef, useEffect } from 'react';

function useClickOutside(ref, callback) {
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    // Cleanup function
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref, callback]); // Dependencies ensure effect re-runs if ref or callback changes
}

export default useClickOutside;

            

              
                Copy
              
            
          

            
import React, { useRef, useEffect, useState } from 'react';

function WebSocketComponent({ url }) {
  const wsRef = useRef(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Establish WebSocket connection
    wsRef.current = new WebSocket(url);
    console.log(`Connecting to WebSocket: ${url}`);

    wsRef.current.onmessage = (event) => {
      setMessage(event.data);
    };

    wsRef.current.onopen = () => {
      console.log('WebSocket connection opened.');
    };

    wsRef.current.onclose = () => {
      console.log('WebSocket connection closed.');
    };

    wsRef.current.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    // Cleanup function
    return () => {
      if (wsRef.current) {
        wsRef.current.close(); // Close the WebSocket connection
        console.log(`WebSocket connection to ${url} closed.`);
      }
    };
  }, [url]); // Reconnect if the URL changes

  return (
    

      
WebSocket Messages:
      
{message}
    
  );
}

export default WebSocketComponent;

            

              
                Copy
              
            
          

            
import React, { useRef, useEffect } from 'react';

function PreviousValueTracker({ value }) {
  const currentValueRef = useRef(value);
  const previousValueRef = useRef();

  useEffect(() => {
    previousValueRef.current = currentValueRef.current;
    currentValueRef.current = value;
  }); // Runs after every render

  const previousValue = previousValueRef.current;

  return (
    

      
Current Value: {value}
      
Previous Value: {previousValue}
    
  );
}

export default PreviousValueTracker;

            

              
                Copy