前言

在React编程中，我们习惯用useEffect、useState等Hook开发，但在开发过程中难免会出现很多问题。不久前，我在写代码的时候踩了很多坑

I. useEffect无限渲染

背景：

初始化页面时，必须通过useEffect()执行一些初始化操作。

UseEffect()方法会呼叫程式码getData()，在背景撷取资料。

例如，导入数据(如页面所需的userName字段)后，通过调用setUserName(userName)指定值。

伪代码如下：

Importreact、{usestate、useeffect } from ' react

Const App=()={

Const [username，set username]=usestatestring(' ')

use effect()={

//汇入背景介面

Const data=getData()

//分配给相应的状态

SetUserName(data.userName)

})。

Return(

迪夫

Span用户名：{userName}/span

/div

)。

}

导出默认应用程序；

这种代码似乎没问题，逻辑也没错，实际效果会怎么样？让我们看下一个例子。

Importreact、{usestate、useeffect } from ' react

Const App=()={

Const [count，setcount]=usestate (0)

use effect()={

SetCount(count 1)

})。

Return(

迪夫

Span{count}/span

/div

)。

}

导出默认应用程序；

页面效果如下：

测试显示，页面上的数字可以无限增加，计算机内存一下子上升到Up。(可以听到你的电脑迷吹得不更猛。) (计算机)。

这个结果说明了什么？描述无限调用中的useEffect()。

原因分析如下：

UseEffect()可以解释为初始化，初始化中处于状态的变量的值将更新。

通过UseState()创建的状态变量的值发生更改时，页面将重新呈现，并再次调用useEffect()方法。

所以变成了无限循环。最终导致了上图中出现的效果。

解决方法如下：只需将空数组添加到useEffect()的第二个参数中即可。

Importreact、{usestate、useeffect } from ' react

Const App=()={

Const [count，setcount]=usestate (0)

use effect()={

SetCount(count 1)

}，[])

Return(

迪夫

Span{count}/span

/div

)。

}

导出默认应用程序；

然后，useEffect()只执行一次。

2.具有状态的变量在Input框中指定为默认值，页面不能修改内容

不说废话，直接上事件。

Importreact、{usestate、useeffect } from ' react

Const App=()={

Const [count，setCount]=useState(“初始内容”)

Return(

迪夫

Input type='text' value={count}/

/div

)。

}

导出默认应用程序；

页面的效果如下：

我明明尝试了输入字段，但Input的内容仍然不能更改。原因如下。

如果将状态变量指定为默认值Input，则页面将显示初始内容。

“输入”框中的“值”值表示内容值，如果绑定到该“状态”变量，要更改“输入”框的内容，还必须更改状态变量才能触发渲染。

但是，您在Input中输入了信息，该状态变量无法检测到此变量的值已更改，因此页面的内容也不会更改。(大卫亚设，北方执行部队。)

解决方法：将onChange事件添加到此Input框中，以接收内容的更改，并实时调用setXXX方法。

代码如下：

Importreact、{usestate、useeffect } from ' react

Const App=()={

Const [count，setCount]=useState(“初始内容”)

Return(

迪夫

input type=' text ' value={ count } onchange={(event)=set count(event . target . value)}

/div

)。

}

导出默认应用程序；