React函数组件对state进行初始化操作

前言

最近学完React开始实战做项目了，但是在使用React18的函数组件时还是遇到了众多的困难。
让我不禁感叹，函数组件确实比类式组件难上手太多了。

问题

最近让我头疼的问题是，怎么样才能在函数组件中初始化呢？

对于类式组件，我们直到可以使用 componentDidMount()方法来作用与组件声明周期中的初始化阶段，
但是对于函数组件，并没有上述方法。

在一开始，我想到了直接在函数中调用：

const getData = () => {
    //function body
}
getData();

这个方法对于正常的变量是没有问题的，但是我要处理的并不是普通的变量，而是state。

state的特点就是每次变化的时候都会重新渲染界面，而每次重新渲染界面都会重新调用getData函数，
然后更新state，这就陷入了一个 state更新->重新渲染->更新state...的死循环。

面对这个问题，我最开始想到的解决方案是Effect Hock，不过我查了半天资料并没有找到
很合适的解决方案……然后又走了很多弯路，换了其他的方法。最终还是决定细细的看一下Effect Hock

我记得曾经听说过，Effect Hook中的deps写空数组就会对任何变化都无反应，于是我就写了一个空数组

const getData = () => {
    //function body
}
useEffect(()=>{
    getData()
},[])

但是我发现，getData方法并没有执行，而且报一个warning，提示必须在deps中加入依赖的变量

于是我就按图索骥的将getDate写进去

const getData = () => {
    //function body
}
useEffect(()=>{
    getData()
},[getData])

结果它提示我函数最好放在useEffect的体内，于是我写成了这样

const [state,setState] = useState([]);
    useEffect(()=>{
        setApplication(data);
    },[])

后来发现我又依赖setState函数，但是绝对不可能将他写入函数体内，同时我也不能把state变量写入deps

在这里讲一下Effect Hook，它会在他的deps中的内容刷新的时候调用函数，而你在函数中用到的变量又
必须写入deps中

这里我陷入了两难，最终我通过查看文档，发现了这个hook能够return，开始我错误的理解了return的意思
我以为需要在return时进行更改，于是我写成了下面的样子

const [state,setState] = useState([]);
    useEffect(()=>{
        //body
        return()=>{
            setApplication(data);
        }
    },[])

有趣的是，当时我刚好在调试模式卸载了这个界面，得到了我想要的效果，为此我欣喜了一下，后来我却不能
复现这场成功。经过我对文档的探索，发现return原来是卸载Effect钩子的！

解决之道

最终，我解决问题的代码是这样的：

const [state,setState] = useState([]);
    useEffect(()=>{
        //body
        setApplication(data);
        return()=>{
            
        }
    },[])

这里再讲一下Effect Hook：
它会在他的deps中的内容刷新的时候调用函数，而你在函数中用到的变量又必须写入deps中，
但是写入deps就会刷新，这样就和没使用EffectHook一样了，为了解决这个问题，我们在使用完成
这个钩子之后要将它卸载，这样它就不会再被调用了，return就是来解决这个问题的，调用return之后
这个钩子就被卸载了，这样我们就解决了函数被多次调用的问题~