在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前言在React编程中, 我们习惯用useEffect、useState等Hook去进行开发,但是在开发过程中难免会遇到许多问题,前阵子,我在写代码的时候,踩过不少坑,这里先列举两个较为常见的,也希望读者们看完这篇文章能够避免踩坑! 一. useEffect无限渲染背景:
伪代码如下: import React, { useState, useEffect } from 'react'; const App = () => { const [userName, setUserName] = useState<string>('') useEffect(() => { // 调取后台接口 const data = getData() // 赋值给对应的State setUserName(data.userName) }) return ( <div> <span>用户名:{userName}</span> </div> ) } export default App; 这样的代码看似没什么问题,逻辑也很正确,但是实际效果会发生什么呢?来看下下面的例子: import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState(0) useEffect(() => { setCount(count+1) }) return ( <div> <span>{count}</span> </div> ) } export default App; 页面效果如下: 大家测试一下就会发现,页面上的数字是会无限增长的,而且你的电脑内存一下子Up起来(可以听听你的电脑风扇是不是吹得更猛了~)。 这个结果说明了什么?说明了 原因分析如下:
解决方案如下: import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState(0) useEffect(() => { setCount(count+1) },[]) return ( <div> <span>{count}</span> </div> ) } export default App; 那么 二. 带状态的变量赋给Input框作为默认值,页面无法修改内容废话不说,直接上案例: import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState('初始内容') return ( <div> <input type="text" value={count} /> </div> ) } export default App; 那么页面的效果是这样的: 可以发现我明明尝试输入字段,但是
解决方案:给这个 代码如下: import React, { useState, useEffect } from 'react'; const App = () => { const [count, setCount] = useState('初始内容') return ( <div> <input type="text" value={count} onChange={(event)=>setCount(event.target.value)}/> </div> ) } export default App; 页面效果如下: 总结到此这篇关于React编程中需要注意的两个错误的文章就介绍到这了,更多相关React编程错误内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论