useEffect

在react中 useEffect 有4种写法

• 1， 参数中只有一个函数 相当于 componentDidMount & componentDidUpdate，每次渲染完成都会触发 useEffect(()=>{ console.log('每次渲染完成都会触发'); });

可以拿到每次更新的状态值

• 2，参数有2个：第一个是个函数，第二个是空数组 相当于 componentDidMount 第一次渲染完成 useEffect(()=>{ console.log('只有第一次渲染完成会触发'); },[]);

只能拿到第一次状态的值，以后改变的状态值拿不到 可以在这里调取接口

• 3，参数有2个：第一个是个函数，第二个是依赖项 只有依赖项（某个状态或多个状态的值）改变了，才能触发

useEffect(()=>{ console.log('只有state.y/state.x值改变的时候触发'); },[state.y,state.x])

注意：不要在这里再次更改依赖的状态，否则会引发死循环

• 4，参数有一个函数，函数中返回一个小函数 相当于componentWillUnmount 卸载组件 useEffect(()=>{ console.log('wai',state.x); //1，创建执行 3，再创建 return ()=>{ console.log('li',state.x); //2，卸载执行 先卸载 } })

函数组件重新渲染都是先卸载，再创建的过程 这里执行的顺序：当状态改变重新渲染的时候，先卸载组件（里层小函数可以获取上次组件的状态），再重新创建组件（外层函数可以获取到最新的状态值）