前言

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

一. 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;

這樣的代碼看似沒(méi)什么問(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)（可以聽(tīng)聽(tīng)你的電腦風(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)的變量并沒(méi)有感知到這個(gè)變量的值發(fā)生了改變，所以頁(yè)面上的內(nèi)容也不會(huì)發(fā)生改變。
  

解決方案：給這個(gè)Input框增加一個(gè)onChange事件，讓其監(jiān)聽(tīng)到內(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è)面效果如下：

總結(jié)

到此這篇關(guān)于React編程中需要注意的兩個(gè)錯(cuò)誤的文章就介紹到這了,更多相關(guān)React編程錯(cuò)誤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！