在不改变状态、道具或父级的情况下反应子级渲染答案

【问题标题】：React Child Rerenders without change in State, Props, or Parent在不改变状态、道具或父级的情况下反应子级渲染
【发布时间】：2021-04-21 10:26:57
【问题描述】：

我正在尝试跟踪子组件中的过度重新渲染。我正在使用 useEffect 挂钩来跟踪道具的变化和状态的变化。像这样：

export default function Child(props) {
  const [user] = useAuthState(firebase.auth());
  const [error, setError] = useState(false);

  useEffect(() => console.log(user, error, props), [user, error, props]);
  console.log('render');

  return (<p>Test</p>);
};

这个日志是什么：

render
{userObject: value}, false, {prop1: value1}
render

如果我的状态和道具只改变一次，我无法弄清楚为什么render 被记录了两次。 在this 答案中，它说父组件的重新渲染会触发子组件的重新渲染组件，以及 props 的变化和子状态的变化。我检查了父组件是否呈现了两次（它为子组件获取数据）。 但我只在父组件的第二次渲染时渲染子组件（当数据准备好时）。

export default function Parent {
   const [data, setData] = useState(null);
   useEffect(() => getData({callback: setData}), []); //Get data on first render. 

   console.log(data); //Output is null, then {prop1: value1}

   let returnItem;
   if (data) {
     returnItem = <Child data={data} />
   } else returnItem = null;

   return ({returnItem});
}

我检查了第一次渲染时返回的项目是null。而且我还检查了父组件只渲染了两次。所以我很确定 Child 应该只在第二次渲染。 有谁知道还有什么可能导致孩子登录render 两次？

【问题讨论】：

你在使用 StrictMode 吗？
是的，我是@RapSherlock

标签： javascript reactjs

【解决方案1】：

useEffect 中的控制台日志只会在组件挂载后运行。 useEffect 之外的控制台日志也将在安装组件时运行。这就是为什么您在“渲染”控制台日志上得到 2 次打印，而在 useEffect 控制台日志上只有一个。

【讨论】：