在 useEffect 外部渲染和在 useEffect 内部渲染之间的区别

【问题标题】：difference between renders outside useEffect and inside useEffect在 useEffect 外部渲染和在 useEffect 内部渲染之间的区别
【发布时间】：2020-06-29 22:14:00
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

是的，这意味着您的组件与您的组件一样多次渲染

  console.log('from toolbar inside useEffect')

这只会渲染一次，因为你已经设置好了。您已将 UseEffect 设置为仅在页面加载时运行一次。

UseEffect 可用于在发生变化时运行一些逻辑

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

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

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

你可以阅读更多关于 useEffect here

【讨论】：

我想补充一点，useEffect 总是在渲染之后运行，所以 componentDidMount.正如我之前所说的，“页面加载”有点正确，但更准确地说。