雪花的博客

// ❌ 危险做法
useEffect(() => {
  // ...
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

// ❌ 不好的做法
function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (message) {
      logVisit(roomId, message);
    }
  }, [roomId, message]); // message 变化会重复记录

  return <input value={message} onChange={e => setMessage(e.target.value)} />;
}

// ✅ 好的做法
function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const handleSend = () => {
    logVisit(roomId, message); // 只在发送时记录
  };

  return (
    <>
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={handleSend}>发送</button>
    </>
  );
}

// ❌ 不好的做法
useEffect(() => {
  connectToChat(roomId);
  trackPageView(page);
}, [roomId, page]); // roomId 变化会触发不必要的页面追踪

// ✅ 好的做法
useEffect(() => {
  connectToChat(roomId);
}, [roomId]);

useEffect(() => {
  trackPageView(page);
}, [page]);

// ❌ 不好的做法
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // 依赖 count
    }, 1000);
    return () => clearInterval(timer);
  }, [count]); // 每次 count 变化都会重置定时器

  return <div>{count}</div>;
}

// ✅ 好的做法
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1); // 使用更新函数,不依赖 count
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 空依赖数组,定时器不会重置

  return <div>{count}</div>;
}

// ✅ 使用 Effect Event
function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('已连接', theme); // 读取最新的 theme
  });

  useEffect(() => {
    const connection = connectToChat(roomId);
    connection.on('connected', onConnected);
    return () => connection.disconnect();
  }, [roomId]); // theme 变化不会重新连接
}

// ❌ 不好的做法
function SearchResults({ query }) {
  const options = { // 每次渲染都是新对象
    includeArchived: true
  };

  useEffect(() => {
    fetchResults(query, options);
  }, [query, options]); // options 每次都会触发
}

// ✅ 解决方案 1: 移到 Effect 内部
function SearchResults({ query }) {
  useEffect(() => {
    const options = { includeArchived: true };
    fetchResults(query, options);
  }, [query]);
}

// ✅ 解决方案 2: 移到组件外部
const OPTIONS = { includeArchived: true };

function SearchResults({ query }) {
  useEffect(() => {
    fetchResults(query, OPTIONS);
  }, [query]);
}

// ✅ 解决方案 3: 使用 useMemo
function SearchResults({ query, includeArchived }) {
  const options = useMemo(() => ({
    includeArchived
  }), [includeArchived]);

  useEffect(() => {
    fetchResults(query, options);
  }, [query, options]);
}

// ❌ 不好的做法
function ChatRoom({ options }) {
  useEffect(() => {
    connectToChat(options.roomId);
  }, [options]); // options 对象每次渲染都是新的
}

// ✅ 好的做法
function ChatRoom({ options }) {
  const { roomId } = options;

  useEffect(() => {
    connectToChat(roomId);
  }, [roomId]); // 只依赖原始值
}

function mountStateImpl<S>(initialState: (() => S) | S): Hook {
  const hook = mountWorkInProgressHook();
  if (typeof initialState === 'function') {
    const initialStateInitializer = initialState;
    // 执行初始化函数获取初始值
    initialState = initialStateInitializer();
    if (shouldDoubleInvokeUserFnsInHooksDEV) {
      setIsStrictModeForDevtools(true);
      try {
        // 严格模式下会执行两次,检测副作用
        initialStateInitializer();
      } finally {
        setIsStrictModeForDevtools(false);
      }
    }
  }
  hook.memoizedState = hook.baseState = initialState;
  // ...
}

// 为什么惰性初始化不需要依赖
function Component() {
  // ✅ 初始化函数只在首次渲染时执行一次
  const [data] = useState(() => {
    return expensiveComputation(); // 不会重复执行
  });

  useEffect(() => {
    // data 来自 state,是响应式的,需要作为依赖
    processData(data);
  }, [data]);
}

function ChatRoom({ roomId, theme, currentUser }) {
  const [messages, setMessages] = useState([]);
  const [isConnected, setIsConnected] = useState(false);

  // ✅ 使用 Effect Event 处理非响应式逻辑
  const onMessage = useEffectEvent((message) => {
    setMessages(msgs => [...msgs, message]); // 使用更新函数
    showNotification(message, theme); // 读取最新 theme,但不触发重连
  });

  const onConnectionChange = useEffectEvent((connected) => {
    setIsConnected(connected);
    if (connected) {
      logUserActivity(currentUser.id); // 读取最新 user,但不触发重连
    }
  });

  // ✅ 只在 roomId 变化时重新连接
  useEffect(() => {
    const connection = createConnection(roomId);

    connection.on('message', onMessage);
    connection.on('connection', onConnectionChange);
    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [roomId]); // 只依赖 roomId

  return (
    <div className={theme}>
      <ConnectionStatus isConnected={isConnected} />
      <MessageList messages={messages} />
    </div>
  );
}

useEffect(() => {
  console.log('Effect 执行:', { roomId, theme });
  // ...
  return () => {
    console.log('Effect 清理:', { roomId, theme });
  };
}, [roomId, theme]);

// ❌ 错误理解
useEffect(() => {
  setCount(count + 1); // count 永远是初始值
}, []); // 缺少 count 依赖

// ❌ 这是技术债务
useEffect(() => {
  // ...
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);