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

Posted on by

前言

在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編程錯誤內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：