useEffect WITH [] 参数如何运行多次答案

【问题标题】：How can useEffect WITH [] argument run multiple timesuseEffect WITH [] 参数如何运行多次
【发布时间】：2019-12-25 18:52:33
【问题描述】：

这样的结构在什么情况下可以

useEffect(() => {
   ...
}, []);

多次运行？

我认为根据定义它不应该，但在这个视频中它确实： https://www.youtube.com/watch?v=7RMwZ0_tANg

【问题讨论】：

检查这个：stackoverflow.com/a/53121021/6950012
How to call loading function with React useEffect only once的可能重复

标签： use-effect

【解决方案1】：

[] 的意思是，它只会在初始渲染时渲染，所以可能有一个组件的多次渲染

【讨论】：

让我有正确的想法，谢谢。发布了关于这是如何发生的答案。

【解决方案2】：

您使用 useEffect 的方式与类组件的 componentDidMount 相等。

useEffect 可以用作 componentDidMount 、 componentDidUpdate 和 componentWillUnmount。

useEffect(() => {
  console.log('mounted'); //This way you can get componentDidMount
  return () => console.log('unmounting...'); //This way you can get componentDidUnmount
}, [])  // <-- The effect depends on variable you put into array(if you would want to check and do something every time variable did update you would put variable name inside - componentDidUpdate)

【讨论】：

【解决方案3】：

我发现了，这是怎么可能的。

const ComponentWithLoader = WithLoader(Component);
return <ComponentWithLoader { ...{
  isLoading, data, remove, update, setData, ...props,
}}/>;

我在功能组件的主体内使用了一个高阶组件。而且由于 WithLoader 调用每次都会创建一个全新的组件，它内部的整个组件结构在每次外部功能组件的重新渲染时都会重新创建。

【讨论】：