如何多次使用带有 [] 参数运行的效果

Question

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

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

运行多次？

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

Answer 1

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

Answer 2

您使用 useEffect 的方式与 class 组件的 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 调用每次都会创建一个全新的组件，因此在外部功能组件的每次重新渲染时都会重新创建其中的整个组件结构。

如何多次使用带有 [] 参数运行的效果

How can useEffect WITH [] argument run multiple times

use-effect

如何多次使用带有 [] 参数 运行 的效果

How can useEffect WITH [] argument run multiple times

use-effect

如何多次使用带有 [] 参数运行的效果