场景：小汪有个页面需要渲染echarts表格，数据肯定是数据库请求来的，既然用到函数式组件的话，离不开userEffect,但这里面的确很多坑。如下:

const index = () => {
  let [data, setdata] = useState({})
  useEffect(() => {
   //此处请求数据
      getDATA().then(res => {
        let Newdata: any = res.data.data
        setdata(Newdata)
      })
  },[])
  return (
    <div>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>bord</Breadcrumb.Item>
      </Breadcrumb>
      <ReactEcharts option={data} notMerge={true} lazyUpdate={true} />
    </div>
  )
}

useEffect有两个参数，第一个参数主要执行上文useState数据更改的函数，但这儿就这么运行的话，小汪发现他的前端发送了很多很多的请求，以至于，他急忙停掉了后端服务。小汪说了句:老汪，发生什么事了？

原来useEffect在初次渲染完成后触发，以及函数式组件数据更新触发。这样请求到数据后，数据更新了，又要触发userEffect，就造成了死循环，不停的在请求数据。这时候就要看到useEffect的第二个参数了。useEffect在每次被调用的时候，都会“记住”这个数组参数，当下一次被调用的时候，会逐个比较数组中的元素，看是否和上一次调用的数组元素一模一样，如果一模一样，第一个参数（那个函数参数）也就不用被调用了，如果不一样，就调用那个第一个参数。这样就可以解决重复触发的问题了！

详细解释见:知乎

componentWillUnmount中卸载类组件定时器
函数式组件中卸载全局行为如图所示: