react常见问题(React编程中需要注意的两个错误)
类别:编程学习 浏览量:2058
时间:2022-04-01 01:12:46 react常见问题
React编程中需要注意的两个错误前言
在React编程中, 我们习惯用useEffect、useState等Hook去进行开发,但是在开发过程中难免会遇到许多问题,前阵子,我在写代码的时候,踩过不少坑,这里先列举两个较为常见的,也希望读者们看完这篇文章能够避免踩坑!
一. useEffect无限渲染
背景:
- 页面初始化的时候,我们需要通过useEffect()来进行一些初始化工作。
- 在useEffect()方法中,调用了代码getData()去后台调取数据。
- 比如页面所需的userName字段,我们在获取数据后,调用setUserName(userName)来进行赋值。
伪代码如下:
import React, { useState, useEffect } from 'react'; const App = () => { const [userName, setUserName] = useState<string>('') useEffect(() => { // 调取后台接口 const data = getData() // 赋值给对应的State setUserName(data.userName) }) return ( <li> <span>用户名:{userName}</span> </li> ) } export default App;
这样的代码看似没什么问题,逻辑也很正确,但是实际效果会发生什么呢?来看下下面的例子:
import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState(0) useEffect(() => { setCount(count+1) }) return ( <li> <span>{count}</span> </li> ) } export default App;
页面效果如下:
大家测试一下就会发现,页面上的数字是会无限增长的,而且你的电脑内存一下子Up起来(可以听听你的电脑风扇是不是吹得更猛了~)。
这个结果说明了什么?说明了useEffect()
在无限的调用中。
原因分析如下:
- useEffect()可以理解为初始化,那么初始化中对 有状态的变量 进行了值的更新。
- 而通过useState()创建出来的 有状态的变量 ,其值一旦发生改变,又会重新渲染页面,那么又会重新调用useEffect()方法。
- 因此就成了一个无限循环。最终造成上述图片所展示的效果。
解决方案如下:useEffect()
的第二个参数加一个空数组即可。
import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState(0) useEffect(() => { setCount(count+1) },[]) return ( <li> <span>{count}</span> </li> ) } export default App;
那么useEffect()
就只会执行一次:
二. 带状态的变量赋给Input框作为默认值,页面无法修改内容
废话不说,直接上案例:
import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState('初始内容') return ( <li> <input type="text" value={count} /> </li> ) } export default App;
那么页面的效果是这样的:
可以发现我明明尝试输入字段,但是Input
的内容依旧无法改变。原因如下:
- 我们用带状态的变量作为默认值赋给Input后,页面会显示其初始内容。
- Input框的value值代表其内容值,那么竟然和这个带状态的变量进行了绑定,那么要想Input框的内容发生改变,带状态的变量也必须改变,这样才能触发渲染。
- 但是我们在Input中输入一些信息,而这个带状态的变量并没有感知到这个变量的值发生了改变,所以页面上的内容也不会发生改变。
解决方案:给这个Input
框增加一个onChange
事件,让其监听到内容的改变,并实时的调用setXXX
方法。
代码如下:
import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState('初始内容') return ( <li> <input type="text" value={count} onChange={(event)=>setCount(event.target.value)}/> </li> ) } export default App;
页面效果如下:
总结
到此这篇关于React编程中需要注意的两个错误的文章就介绍到这了,更多相关React编程错误内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- react源码教程(详解React 代码共享最佳实践方式)
- react加载优化(React星星评分组件的实现)
- yii2对比springboot(yii2.0框架使用 beforeAction 防非法登陆的方法分析)
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- react执行流程(React开启代理的2种实用方式)
- vue react和angular(详解React Angular Vue三大前端技术)
- react常用设计模式(提高React界面性能的十个技巧)
- react app框架(浅谈React原生APP更新)
- react配置上下文路由(React中Portals与错误边界处理实现)
- react组件分析(react-diagram 序列化Json解读案例分析)
- react怎么绑定state(react纯函数组件setState更新页面不刷新的解决)
- react的动画实现(React实现动效弹窗组件)
- react判断数据格式(详解Ref在React中的交叉用法)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- react子组件的动态参数(浅谈React Component生命周期函数)
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- 英语难学吗(初中英语难学吗)
- 如何追女孩子(如何追女孩子的技巧和方法)
- 是不是快乐全被你拿走了(而是你得到的)
- 世界上只有妈妈好(世界上只有妈妈好的歌词)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
- 直播带货能赚到很多钱吗(直播带货能赚到很多钱吗现在)
热门推荐
- apache服务器设置301(Apache Rewrite实现URL的301跳转和域名跳转)
- python交互模式下如何开始运行(python交互界面的退出方法)
- python怎样看字符unicode编码(Python3中编码与解码之Unicode与bytes的讲解)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- socket和tcp什么关系(TCP socket SYN队列和Accept队列区别原理解析)
- dedecms后台关键词(DedeCms防止垃圾文章群发、垃圾评论和注册的方法)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- 安装apache服务器配置(Apache 配置详解最好的APACHE配置教程)
- 网站服务器需要买哪些设备(选择网站服务器需要注意哪些地方?)
- php秒杀实现代码(php无限极分类实现方法分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9