use-effect - useEffect WITH [] 参数如何运行多次

Question

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

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

运行多次？

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

Answer 1

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

Answer 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)

Answer 3

我发现，这怎么可能。

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

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