react hooks useEffect

发布于 2021-04-22  123 次阅读


场景:小汪有个页面需要渲染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中卸载类组件定时器
函数式组件中卸载全局行为如图所示:


一切值得等待且值得期待