不改变State、Props或Parent的React子渲染器

Question

我试图在子组件中跟踪多余的呈现器。我使用了一个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被记录了两次，如果我的状态和道具只改变了一次。在这个回答中，它说父组件的渲染会触发子组件的渲染，以及道具的变化和子状态的变化。我检查了父组件呈现两次(它为子组件获取数据)。但是我只在父组件的第二次渲染时渲染子组件(当数据准备好时)。

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在第一次渲染。我还检查了父组件只渲染两次。所以我很确定孩子应该只渲染第二次。有没有人知道还有什么可以导致孩子两次记录render?

Answer 1

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