快捷導(dǎo)航

React編程中需要注意的兩個(gè)錯(cuò)誤

更新時(shí)間：2021年05月14日 11:30:52 作者：Zong_0915

React可以說(shuō)是前端的先驅(qū)者,它總是會(huì)引領(lǐng)整個(gè)前端的潮流。但我們?cè)谑褂靡步?jīng)常會(huì)遇到錯(cuò)誤，下面這篇文章主要給大家介紹了關(guān)于React編程中需要注意的兩個(gè)錯(cuò)誤，需要的朋友可以參考下

前言

在React編程中，我們習(xí)慣用useEffect、useState等Hook去進(jìn)行開發(fā)，但是在開發(fā)過(guò)程中難免會(huì)遇到許多問(wèn)題，前陣子，我在寫代碼的時(shí)候，踩過(guò)不少坑，這里先列舉兩個(gè)較為常見的，也希望讀者們看完這篇文章能夠避免踩坑！

一. useEffect無(wú)限渲染

背景：

頁(yè)面初始化的時(shí)候，我們需要通過(guò)useEffect()來(lái)進(jìn)行一些初始化工作。
在useEffect()方法中，調(diào)用了代碼getData()去后臺(tái)調(diào)取數(shù)據(jù)。
比如頁(yè)面所需的userName字段，我們?cè)讷@取數(shù)據(jù)后，調(diào)用setUserName(userName)來(lái)進(jìn)行賦值。

偽代碼如下：

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

const App = () => {
    const [userName, setUserName] = useState<string>('')
    
    useEffect(() => {
    	// 調(diào)取后臺(tái)接口
        const data = getData()
        // 賦值給對(duì)應(yīng)的State
        setUserName(data.userName)
    })

    return (
        <div>
            <span>用戶名：{userName}</span>
        </div>
    )
}
export default App;

這樣的代碼看似沒什么問(wèn)題，邏輯也很正確，但是實(shí)際效果會(huì)發(fā)生什么呢？來(lái)看下下面的例子：

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;

頁(yè)面效果如下：

大家測(cè)試一下就會(huì)發(fā)現(xiàn)，頁(yè)面上的數(shù)字是會(huì)無(wú)限增長(zhǎng)的，而且你的電腦內(nèi)存一下子Up起來(lái)（可以聽聽你的電腦風(fēng)扇是不是吹得更猛了~）。

這個(gè)結(jié)果說(shuō)明了什么？說(shuō)明了useEffect()在無(wú)限的調(diào)用中。

原因分析如下：

useEffect()可以理解為初始化，那么初始化中對(duì) 有狀態(tài)的變量進(jìn)行了值的更新。
而通過(guò)useState()創(chuàng)建出來(lái)的有狀態(tài)的變量，其值一旦發(fā)生改變，又會(huì)重新渲染頁(yè)面，那么又會(huì)重新調(diào)用useEffect()方法。
因此就成了一個(gè)無(wú)限循環(huán)。最終造成上述圖片所展示的效果。

解決方案如下：useEffect()的第二個(gè)參數(shù)加一個(gè)空數(shù)組即可。

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()就只會(huì)執(zhí)行一次：

二. 帶狀態(tài)的變量賦給Input框作為默認(rèn)值，頁(yè)面無(wú)法修改內(nèi)容

廢話不說(shuō)，直接上案例：

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

const App = () => {
    const [count, setCount] = useState('初始內(nèi)容')
    return (
        <div>
            <input type="text" value={count} />
        </div>
    )
}
export default App;

那么頁(yè)面的效果是這樣的：

可以發(fā)現(xiàn)我明明嘗試輸入字段，但是Input的內(nèi)容依舊無(wú)法改變。原因如下：

我們用帶狀態(tài)的變量作為默認(rèn)值賦給Input后，頁(yè)面會(huì)顯示其初始內(nèi)容。
Input框的value值代表其內(nèi)容值，那么竟然和這個(gè)帶狀態(tài)的變量進(jìn)行了綁定，那么要想Input框的內(nèi)容發(fā)生改變，帶狀態(tài)的變量也必須改變，這樣才能觸發(fā)渲染。
但是我們?cè)贗nput中輸入一些信息，而這個(gè)帶狀態(tài)的變量并沒有感知到這個(gè)變量的值發(fā)生了改變，所以頁(yè)面上的內(nèi)容也不會(huì)發(fā)生改變。

解決方案：給這個(gè)Input框增加一個(gè)onChange事件，讓其監(jiān)聽到內(nèi)容的改變，并實(shí)時(shí)的調(diào)用setXXX方法。

代碼如下：

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

const App = () => {
    const [count, setCount] = useState('初始內(nèi)容')
    return (
        <div>
            <input type="text" value={count} onChange={(event)=>setCount(event.target.value)}/>
        </div>
    )
}
export default App;

頁(yè)面效果如下：