React组件为何重复渲染？请求技术排查解决指引

兄弟，我来帮你捋捋这个React组件两次渲染的问题！这种情况在日常开发里挺常见的，咱们一步步拆解原因和解决办法：

这是最常见的“假重复渲染”原因！React的Strict Mode在开发环境下会刻意让组件重复执行挂载、更新逻辑，目的是帮你提前发现潜在的副作用问题（比如未清理的定时器、重复订阅等），但生产环境下不会有这个行为。

你可以去根组件文件（比如index.js）看看，是不是用<React.StrictMode>把你的App给包裹起来了？如果是，那开发时的两次渲染完全是预期现象，不用慌——要是想验证，暂时注释掉Strict Mode，组件就只会渲染一次了。

从你描述的“首次显示手机号+0积分，二次显示完整数据”来看，你的数据流逻辑可能触发了两次state更新，进而导致两次渲染：

1. 第一次渲染：组件拿到params里的手机号，先把它存到state，这时候积分还没从Firestore查到，所以显示0；
2. 第二次渲染：Firestore查询完成，拿到积分数据，更新state后组件重新渲染，数据正常。

你可以调整逻辑，把“存手机号”和“查积分”合并成一次state更新，减少不必要的渲染：

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { firestore } from './firebaseConfig'; // 假设你的Firebase配置文件路径

const YourComponent = () => {
  const { phoneNumber } = useParams();
  const [userData, setUserData] = useState({ phone: '', points: 0 });

  useEffect(() => {
    const fetchUserInfo = async () => {
      // 直接用params里的手机号去查Firestore，不用先单独存到state
      const userDoc = await firestore.collection('users').doc(phoneNumber).get();
      
      if (userDoc.exists) {
        // 查询到数据后，一次性设置完整的userData
        setUserData({ phone: phoneNumber, ...userDoc.data() });
      } else {
        // 如果没查到，也一次性设置默认值
        setUserData({ phone: phoneNumber, points: 0 });
      }
    };

    fetchUserInfo();
  }, [phoneNumber]); // 依赖项只放phoneNumber，确保参数变化时重新查询

  return (
    <div>
      <p>手机号：{userData.phone}</p>
      <p>积分：{userData.points}</p>
    </div>
  );
};

export default YourComponent;

这样调整后，组件只会在Firestore查询完成后更新一次state，避免了中间那次只更新手机号的渲染。

如果上面的方法还没解决，你可以打开React DevTools的Profiler工具，录制组件的渲染过程，就能清楚看到每次渲染是由哪个state/props变化触发的——说不定是父组件传递的某个props意外更新，导致你的组件跟着重渲染了。

内容的提问来源于stack exchange，提问作者Raul Sanchez