骨架屏加载时数据闪现怎么解决？

问题应该出在数据切换时的 DOM 渲染顺序上。虽然你设置了 loading 状态，但 React 的状态更新和渲染不是同步的，这中间可能会导致短暂的空白闪现。

试试这个方案：保持 loading 状态到数据完全准备好再切换。可以在 setData 前预处理数据结构，确保数据格式完整后再触发渲染。

useEffect(() => {

  setLoading(true);

  fetchData().then(res => {

    // 这里可以对数据做一些预处理

    const formattedData = processData(res);

    // 先设置好所有数据再取消loading

    setData(formattedData);

    setTimeout(() => setLoading(false), 0); // 用微任务确保状态更新

  });

}, []);



// 如果数据结构复杂，这里处理一下

function processData(data) {

  return data.map(item => ({

    ...item,

    // 处理可能缺失的字段

    missingField: item.missingField || 'default value'

  }));

}

这样能保证骨架屏和真实数据之间过渡更平滑。记得检查 CSS 样式是否一致，有时候样式差异也会导致视觉上的闪动。如果还有问题，考虑用 css transition 来平滑过渡效果。

这个问题挺常见的，本质是骨架屏和真实内容切换太生硬了。

先说最直接的解决方案：不要让 loading 状态直接控制显示隐藏，用 CSS 过渡来平滑切换。

你的代码稍微改一下：

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);



// 用一个标志来控制过渡，而不是直接切换

const [showContent, setShowContent] = useState(false);



useEffect(() => {

  setLoading(true); fetchData().then(res => {

    setData(res);

    setLoading(false);

    // 数据到了以后，先等一下让 DOM 渲染完，再显示真实内容

    setTimeout(() => setShowContent(true), 50);

  });

}, []);



// 渲染时用 opacity 过渡

return (

  <div className={showContent ? 'content-visible' : 'content-hidden'}>

    {loading ? <Skeleton /> : <RealContent data={data} />}

  </div>

);

对应的 CSS：

.content-hidden {

  opacity: 0;

  transition: opacity 0.2s ease;

}



.content-visible {

  opacity: 1;

  transition: opacity 0.2s ease;

}

另外还有个容易忽略的点：你的骨架屏和真实内容的 DOM 结构要完全一致，包括高度。很多时候闪屏是因为骨架屏占位是固定高度，但真实内容渲染后发现高度变了，页面会跳一下。

如果用的是同一个组件，可以通过条件渲染不同的 children 来解决：

function ListItem({ loading, data }) {

  // 不管 loading 还是非 loading，外层结构保持一致

  return (

    <div className="item-wrapper">

      {loading ? (

        <>

          <div className="skeleton-avatar" />

          <div className="skeleton-text" />

        </>

      ) : (

        <>

          <img src={data.avatar} />

          <p>{data.name}</p>

        </>

      )}

    </div>

  );

}

最后提醒一下，setTimeout 的 50ms 可以根据实际效果调整，太短了过渡会显得突兀，太长了又会让用户觉得慢。如果接口响应本身比较快，这个时间可以设得更短或者不加。