我知道没有数组的 useEffect()
只在第一次渲染时运行回调。
那么useEffect(()=>{},[])
和没有useEffect()
的区别是什么。
我的意思是:
function myComponent() {
// some states, variables
useEffect(() => {
// do something on mount <= this is my current concern.
}, [/* empty */]);
// return Element ...
}
还有这个:
function myComponent() {
// some states, variables
// do something on mount <= this is my current concern.
// return Element ...
}
最佳答案
在 React 中,只要组件的状态或其中一个 props 发生变化,组件就会重新渲染。
它这样做的原因是它可以对所提到的数据的变化做出“ react ”,并相应地反射(reflect) UI 变化。
每次组件重新渲染时,其中未缓存的任何逻辑(函数、变量等)也会重新渲染
useEffect
帮助我们对依赖数组中声明的状态或 Prop 的变化使用react。
它为我们提供了在此类事件中自动运行回调函数的选项。
useEffect
具有一个空的依赖项数组,将在安装组件时仅运行一次。
所以在这个例子中——
function myComponent() {
// some states, variables
useEffect(() => {
// do something on mount <= this is my current concern.
}, [/* empty */]);
// return Element ...
}
useEffect
中的回调函数只会运行一次,即组件首次“激活”时。
后续渲染将不会调用它。
虽然在此示例中 -
function myComponent() {
// some states, variables
// do something on mount <= this is my current concern.
// return Element ...
}
每次组件重新渲染时,无论你放在那里什么都会运行。
这是否可行取决于您的用例以及您尝试运行什么功能,运行是否“便宜”等。
关于javascript - 我想知道将 `useEffect()` 与空依赖数组一起使用与不使用 `useEffect()` 本身之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71823520/