快捷導航

React編程中需要注意的兩個錯誤

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

React可以說是前端的先驅(qū)者,它總是會引領(lǐng)整個前端的潮流。但我們在使用也經(jīng)常會遇到錯誤，下面這篇文章主要給大家介紹了關(guān)于React編程中需要注意的兩個錯誤，需要的朋友可以參考下

前言

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

一. useEffect無限渲染

背景：

頁面初始化的時候，我們需要通過useEffect()來進行一些初始化工作。
在useEffect()方法中，調(diào)用了代碼getData()去后臺調(diào)取數(shù)據(jù)。
比如頁面所需的userName字段，我們在獲取數(shù)據(jù)后，調(diào)用setUserName(userName)來進行賦值。

偽代碼如下：

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

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

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

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

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;

頁面效果如下：

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

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

原因分析如下：

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

解決方案如下：useEffect()的第二個參數(shù)加一個空數(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()就只會執(zhí)行一次：

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

廢話不說，直接上案例：

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;

那么頁面的效果是這樣的：

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

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

解決方案：給這個Input框增加一個onChange事件，讓其監(jiān)聽到內(nèi)容的改變，并實時的調(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;

頁面效果如下：