• 售前

  • 售后

热门帖子
入门百科

React useEffect的理解与利用

[复制链接]
刘久田 显示全部楼层 发表于 2021-10-26 13:33:37 |阅读模式 打印 上一主题 下一主题
目录


  • 制止重复循环渲染
  • 关于副作用的扫除
React16.8新增的useEffec这个hook函数就是处置惩罚副作用的。
所谓的“副作用”,举个通俗一点的例子,假如感冒了原来吃点药就没事了,但是吃了药发现身体过敏了,而这个“过敏”就是副作用。
放到React中,原来只是想渲染DOM展示到页面上,但除了DOM之外另有数据,而这些数据必须从外部的数据源中获取,这个“获取外部数据源”的过程就是副作用。
useEffect怎么用可以参考官网给出的例子,这里紧张针对使用useEffect过程中碰到的题目举行总结。

制止重复循环渲染


使用useEffect接收一个数组作为第二个参数,将第二个参数作为dependence,每次渲染完DOM实行副作用函数时都会浅比较dependence渲染前后的值是否一致,不一致就实行副作用,反之就不实行;如果该dependence为一个空数组[],即没有传入比较变化的变量,则比较效果永远都保持稳定,那么副作用逻辑就只能实行一次。
  1. useEffect(() => {
  2.   setTimeout(() => {   
  3.         setCounter(counter + 1);  
  4.     }, 300)
  5. }, []);
复制代码
初此之外,如果我们还想通过点击刷新按钮实现获取外部数据但又不想造成死循环,那么可以通过一个变量作为“开关”,在实现目的的同时做到制止循环渲染DOM。
[code]画动图太麻烦,各位看注释脑补

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作