渲染外部使用效果和内部使用效果之间的差异

Question

考虑一个反应功能组件， 如果我将我的组件作为子组件添加到其他组件中。 它完美地工作。 出于测试目的，我记录了外部使用效果。当页面加载时，它会在useEffect内部呈现一次，在useEffect外部呈现多次。这是否意味着，由于消息多次记录在 useEffect 之外，我的组件多次渲染？

useEffect(()=>{
console.log('from toolbar inside useEffect')
},[]);
console.log('from toolbar outside useEffect')

Answer 1

是的，这意味着您的组件正在多次渲染您的组件

console.log('from toolbar inside useEffect')

这只会呈现一次，因为您已将其设置为如此。 您已将 UseEffect 设置为仅在页面加载时运行一次。

UseEffect可用于在发生更改时运行一些逻辑

useEffect(() => {
// The logic that you want to run
},[comma seperated parameters])

每当任何参数更改时，都会调用 useEffect 钩子。

由于您没有传递任何参数，因此它只运行一次。

您可以在此处阅读有关useEffect的更多信息