如何在状态首次更新时执行特定操作，而非每次更新都执行？

你可以通过额外标记首次执行状态的方式实现，下面给两种实用方案：

方案一：使用useRef标记（推荐，更轻量） #

用useRef存储是否已经执行过首次逻辑，因为ref的修改不会触发组件重渲染，性能更好：

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

const YourComponent = () => {
  const [annotations, setAnnotations] = useState();
  // 用ref记录是否已经执行过首次更新逻辑
  const hasRunFirstUpdate = useRef(false);

  useEffect(() => {
    // 只有当annotations从undefined变为有值，且还没执行过首次逻辑时才触发
    if (annotations !== undefined && !hasRunFirstUpdate.current) {
      // 这里写你要执行的首次更新代码
      console.log('首次更新触发，当前值：', annotations);
      // 标记为已执行，后续更新不会再进入这个逻辑
      hasRunFirstUpdate.current = true;
    }
  }, [annotations]); // 依赖annotations，状态变化时触发检查

  // 模拟后续更新annotations的操作
  const triggerUpdate = () => {
    setAnnotations([{ id: 1, content: '测试标注' }]);
    // 后续再调用也不会触发首次逻辑
    setTimeout(() => setAnnotations([{ id: 2, content: '第二次更新' }]), 1000);
  };

  return <button onClick={triggerUpdate}>触发更新</button>;
};

方案二：使用useState标记 #

如果习惯用状态管理，也可以用额外的useState来标记，但会触发一次额外的重渲染：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [annotations, setAnnotations] = useState();
  const [hasRunFirstUpdate, setHasRunFirstUpdate] = useState(false);

  useEffect(() => {
    if (annotations !== undefined && !hasRunFirstUpdate) {
      // 执行首次逻辑
      console.log('首次更新触发，当前值：', annotations);
      setHasRunFirstUpdate(true);
    }
  }, [annotations, hasRunFirstUpdate]);

  // 模拟更新操作
  const triggerUpdate = () => {
    setAnnotations([{ id: 1, content: '测试标注' }]);
    setTimeout(() => setAnnotations([{ id: 2, content: '第二次更新' }]), 1000);
  };

  return <button onClick={triggerUpdate}>触发更新</button>;
};

为什么原来的空依赖useEffect不行？ #

空依赖的useEffect只会在组件首次挂载时执行，此时annotations还是初始的undefined，拿不到后续更新后的值，所以无法满足需求。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung