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 app框架(浅谈React原生APP更新)
- react事件绑定的方式和区别(react合成事件与原生事件的相关理解)
- react的setstate第二个参数(示例详解react中useState的用法)
- yii2对比springboot(yii2.0框架使用 beforeAction 防非法登陆的方法分析)
- react定时任务(手把手带你用React撸一个日程组件)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- react路由原理解析(React配置子路由的实现)
- react 分页列表优化(使用react-beautiful-dnd实现列表间拖拽踩坑)
- reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
- reactnative ios(详解React Native与IOS端之间的交互)
- react绑定详解(React列表栏及购物车组件使用详解)
- vue react和angular(详解React Angular Vue三大前端技术)
- reactnative零基础入门到项目实战(用React Native制作一个简单的游戏引擎)
- reactmap给了key仍然提示错误(react为什么不推荐使用index作为key)
- react native web白屏(关于React Native 无法链接模拟器的问题)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
热门推荐
- php添加到数组的用法(详解PHP 7.4 中数组延展操作符语法知识点)
- pythonpandas使用攻略(详解Python中pandas的安装操作说明傻瓜版)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- react 的事件机制(React如何优雅的捕获异常)
- 进度条代码大全(多步骤进度条的实现原理及代码)
- 织梦dedecms教程(DedeTag Engine Create File False 提示的种种原因及解决方法小结)
- extjs 日期控件
- css样式基础知识(CSS深入教程之文字修饰的那点事)
- nodejs架构解析(详解NodeJS模块化)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9