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

Posted 2023-02-22

【中文标题】在不改变状态、道具或父级的情况下反应子级渲染

【英文标题】：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

【参考方案1】：

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