纯净、安全、绿色的下载网站

首页

当前位置:首页IT学院IT技术

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

Zong_0915   2021-05-14 我要评论
想了解React编程中需要注意的两个错误的相关内容吗,Zong_0915在本文为您仔细讲解React编程错误的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:react开发,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;

页面效果如下:

总结


相关文章

猜您喜欢

  • Java char类型与编码关系 Java数据类型之细讲char类型与编码关系

    想了解Java数据类型之细讲char类型与编码关系的相关内容吗,GDUT_Ember在本文为您仔细讲解Java char类型与编码关系的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,char类型与编码关系,java数据类型,下面大家一起来学习吧。..
  • js数据类型转换 JavaScript数据类型转换详解(推荐)

    想了解JavaScript数据类型转换详解(推荐)的相关内容吗,努力学习前端在本文为您仔细讲解js数据类型转换的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js数据类型转换面试题,js数据类型转换,js数据转换,下面大家一起来学习吧。..

网友评论

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们