脱围机制#

import {useRef} from 'react';

const ref = useRef(0);

{
    current: 0 // 你向 useRef 传入的值
}

ref.current = ref.current + 1;

import {useRef} from 'react';

const myRef = useRef(null);

<div ref={myRef}>

// 你可以使用任意浏览器 API，例如：
myRef.current.scrollIntoView();

import {useRef} from 'react';

function MyInput({ref}) {
    return <input ref={ref}/>;
}

export default function MyForm() {
    const inputRef = useRef(null);

    function handleClick() {
        inputRef.current.focus();
    }

    return (
        <>
            <MyInput ref={inputRef}/>
            <button onClick={handleClick}>
                聚焦输入框
            </button>
        </>
    );
}

import {useEffect} from 'react';

function MyComponent() {
    useEffect(() => {
        // 每次渲染后都会执行此处的代码
    });
    return <div/>;
}

import {useEffect, useRef} from 'react';

function VideoPlayer({src, isPlaying}) {
    const ref = useRef(null);

    // ❌这段代码不能放在渲染过程中，
    // 因为此时DOM还没有创建或更新
    // if (isPlaying) {
    //     ref.current.play();
    // } else {
    //     ref.current.pause();
    // }

    useEffect(() => {
        // ✅
        if (isPlaying) {
            ref.current.play();
        } else {
            ref.current.pause();
        }
    });

    return <video ref={ref} src={src} loop playsInline/>;
}

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
        connection.disconnect();
    };
}, []);

// 比如说你想在你的页面添加一个地图组件。
// 它有一个 setZoomLevel() 方法，
// 然后你希望地图的缩放比例和代码中的 zoomLevel state 保持同步。
useEffect(() => {
    const map = mapRef.current;
    map.setZoomLevel(zoomLevel);
}, [zoomLevel]);

//在开发环境中，React 会调用 Effect 两次
// 有些 API 可能不允许你连续调用两次。
// 此时可以通过实现清理函数
useEffect(() => {
    const dialog = dialogRef.current;
    dialog.showModal();
    return () => dialog.close();
}, []);

useEffect(() => {
    function handleScroll(e) {
        console.log(window.scrollX, window.scrollY);
    }

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, []);

useEffect(() => {
    const node = ref.current;
    node.style.opacity = 1; // 触发动画
    return () => {
        node.style.opacity = 0; // 重置为初始值
    };
}, []);

useEffect(() => {
    let ignore = false;

    async function startFetching() {
        //这段请求可能持续很长事件
        const json = await fetchTodos(userId);
        // 当请求完成，页面可能已被销毁
        if (!ignore) {
            setTodos(json);
        }
    }

    startFetching();

    return () => {
        //页面销毁时，设置ignore，防止没有意义的状态提交
        ignore = true;
    };
}, [userId]);

useEffect(() => {
    logVisit(url); // 发送 POST 请求
}, [url]);

if (typeof window !== 'undefined') { // 检查是否在浏览器中运行
    checkAuthToken();
    loadDataFromLocalStorage();
}

function App() {
    // ……
}

function App() {
    useEffect(() => {
        checkAuthToken();
        loadDataFromLocalStorage();
    }, []);

    // ……
}

useEffect(() => {
    // 🔴 错误：此处的 Effect 在开发环境中会触发两次，暴露出代码中的问题。
    fetch('/api/buy', {method: 'POST'});
}, []);

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // 🔴 避免：多余的 state 和不必要的 Effect
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  // ✅ 非常好：在渲染期间进行计算
  const fullName = firstName + ' ' + lastName;
  // ...
}

import { useMemo, useState } from 'react';

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');
  const visibleTodos = useMemo(() => {
    // ✅ 除非 todos 或 filter 发生变化，否则不会重新执行
    return getFilteredTodos(todos, filter);
  }, [todos, filter]);
  // ...
}

export default function ProfilePage({ userId }) {
  const [comment, setComment] = useState('');

  // ❗避免：当 prop 变化时，在 Effect 中重置 state
  useEffect(() => {
    setComment('');
  }, [userId]);
  // ...
}

export default function ProfilePage({ userId }) {
  return (
    <Profile
      userId={userId}
      key={userId}
    />
  );
}

function Profile({ userId }) {
  // ✅ 当 key 变化时，该组件内的 comment 或其他 state 会自动被重置
  const [comment, setComment] = useState('');
  // ...
}