Question

在什么情况下可以使用这种结构

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

多次运行？

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

Answer 1

[]意味着它将仅在初始渲染时渲染，因此可能存在一个组件的多个渲染

Answer 2

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

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

3 个答案: