React编程中需要注意的两个错误

更新时间：2021年05月14日 11:30:52 作者：Zong_0915

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 (
        <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起来（可以听听你的电脑风扇是不是吹得更猛了~）。

这个结果说明了什么？说明了useEffect()在无限的调用中。

原因分析如下：

useEffect()可以理解为初始化，那么初始化中对有状态的变量进行了值的更新。
而通过useState()创建出来的有状态的变量，其值一旦发生改变，又会重新渲染页面，那么又会重新调用useEffect()方法。
因此就成了一个无限循环。最终造成上述图片所展示的效果。

解决方案如下：useEffect()的第二个参数加一个空数组即可。

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;

那么useEffect()就只会执行一次：

二. 带状态的变量赋给Input框作为默认值，页面无法修改内容

废话不说，直接上案例：

import React, { useState, useEffect } from 'react';

const App = () => {
    const [count, setCount] = useState('初始内容')
    return (
        <div>
            <input type="text" value={count} />
        </div>
    )
}
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 (
        <div>
            <input type="text" value={count} onChange={(event)=>setCount(event.target.value)}/>
        </div>
    )
}
export default App;

页面效果如下：

总结

到此这篇关于React编程中需要注意的两个错误的文章就介绍到这了,更多相关React编程错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react
编程

React-router v6在Class组件和非组件代码中的正确使用
这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
react配置代理setupProxy.js无法访问v3.0版本问题
这篇文章主要介绍了react配置代理setupProxy.js无法访问v3.0版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
React useReducer终极使用教程
useReducer是在react V16.8推出的钩子函数，从用法层面来说是可以代替useState。相信前期使用过 React 的前端同学，大都会经历从class语法向hooks用法的转变，react的hooks编程给我们带来了丝滑的函数式编程体验
2022-10-10
作为老司机使用 React 总结的 11 个经验教训
这篇文章主要介绍了作为老司机使用 React 总结的 11 个经验教训,需要的朋友可以参考下
2017-04-04
深入理解react-router@4.0 使用和源码解析
这篇文章主要介绍了深入理解react-router@4.0 使用和源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
react如何快速设置文件路径别名
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，这篇文章主要介绍了react如何快速设置文件路径别名,需要的朋友可以参考下
2021-04-04
react高阶组件经典应用之权限控制详解
在React中,高阶组件是重用组件逻辑的一项高级技术。下面这篇文章主要给大家介绍了关于react高阶组件经典应用之权限控制的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
React使用Ant Design方式(简单使用)
文章介绍了AntDesign组件库,它是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品,文章详细讲解了如何下载和按需引入antd组件库,并通过一个小案例展示了如何使用antd进行布局和改造,最后,文章提醒大家在使用过程中可以参考官网的属性介绍
2024-11-11
React可定制黑暗模式切换开关组件
这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React的Props、生命周期详解
“Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了React的Props、生命周期,需要的朋友可以参考下
2024-06-06