个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在编写一个 React Hook ，它允许我在我的组件中使用 setInterval。为此，我需要在 ref 中保留最新版本的回调，以便稍后可以从间隔范围访问它。
到目前为止，这是我的代码:
import { useRef, useEffect } from 'react'
export default function useInterval(
callback: () => void,
delay: number | null,
) {
const callbackRef = useRef(callback)
// Remember the latest callback.
useEffect(() => {
callbackRef.current = callback
})
useEffect(() => {
// Don't schedule if no delay is specified.
if (delay === null) {
return
}
const id = setInterval(() => callbackRef.current(), delay)
return () => clearInterval(id)
}, [delay])
}
我的问题是关于 useEffect 的第一个实例，其中最新值被传递给 ref。根据 React 文档，此代码将在我的组件呈现后执行。
我可以想象这在将 ref 传递给元素时很有用，因此您可以确保它在呈现后具有值。但是，如果我的代码不关心组件何时呈现，将其保留在 useEffect 中是否仍然有意义？
我重写代码如下是否有意义:
import { useRef, useEffect } from 'react'
export default function useInterval(
callback: () => void,
delay: number | null,
) {
const callbackRef = useRef(callback)
// Remember the latest callback.
callbackRef.current = callback
useEffect(() => {
// Don't schedule if no delay is specified.
if (delay === null) {
return
}
const id = setInterval(() => callbackRef.current(), delay)
return () => clearInterval(id)
}, [delay])
}
最佳答案
useEffect 还是直接赋值？来自文档:
The Effect Hook lets you perform side effects in function components
undefined 作为依赖项)的 useEffect 将在第一次渲染和每次后续重新渲染时运行，但是总是作为副作用，即在组件呈现之后。那么，什么时候使用哪一个？这取决于您的用例。
我会说都不是
useEffect(() => {
callbackRef.current = callback
})
也不
callbackRef.current = callback
在这个用例中似乎是正确的。
因为我们不想在每次重新渲染时都进行分配 - callbackRef.current = callback。但我们希望在 callback 发生变化时执行此操作。所以，下面的看起来更好:
useEffect(() => {
callbackRef.current = callback
}, [callback])
您可能会看到 this blog和 this related post .
一个演示，显示一个效果作为副作用运行(Log inside effect 总是最后一个):
function useInterval(callback, delay) {
const callbackRef = React.useRef(callback)
React.useEffect(() => {
callbackRef.current = callback
}, [callback])
React.useEffect(() => {
if (delay !== null) {
const id = setInterval(() => callbackRef.current(), delay)
return () => clearInterval(id)
}
}, [delay])
}
function Demo() {
const [count, setCount] = React.useState(0)
function doThis() {
setCount(count + 1)
}
useInterval(doThis, 1000)
console.log('log - before effect')
React.useEffect(() => {
console.log('log inside effect')
})
console.log('log - after effect')
return <h1>{count}</h1>
}
ReactDOM.render(<Demo />, document.getElementById('root'))<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>关于javascript - 什么时候使用没有依赖关系的 useEffect 与直接赋值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66803614/
25
4
0
我知道没有数组的 useEffect() 只在第一次渲染时运行回调。 那么useEffect(()=>{},[])和没有useEffect()的区别是什么。 我的意思是: function myCom
我的场景很少，我想了解渲染和性能方面的差异。 下面显示的示例是一个简单的函数，但请考虑一个更复杂的函数以及一个异步函数。 场景 1:定义函数并在 useEffect 中调用它。 useEffect((
我需要添加一些与 React 之外的对象交互的事件处理程序(以 Google map 为例)。 在这个处理函数内部，我想访问一些可以发送给这个外部对象的状态。 如果我将状态作为依赖项传递给效果，它可以
要限制 useEffect 在第一个渲染上运行，我们可以这样做: const isFirstRun = useRef(true); useEffect (() => { if (isF
我有一个产品组件，它显示某个类别的产品。CategoryId 从路由参数中获取，然后用户可以对产品进行分页。所以有2个useEffect，一个是改变categoryId的时候，另一个是改变当前页码的时
我有一个产品组件，它显示某个类别的产品。CategoryId 从路由参数中获取，然后用户可以对产品进行分页。所以有2个useEffect，一个是改变categoryId的时候，另一个是改变当前页码的时
我的状态宽度随着窗口大小的调整而变化，showFilters作为 Prop 从true变为false。我想在卸载时删除监听器。因此，我为每个条件使用了三个 useState。那么，我可以做任何重构来在
我正在开发一个基于对象键管理字符串数组的函数。假设它看起来像这样: import React, { useState, useEffect } from "react"; import FieldCo
新的 React Hooks 功能很酷，但有时会让我感到困惑。特别是，我将此代码包装在 useEffect Hook 中: const compA = ({ num }) => { const [
我想将其转换为 useEffect钩: 代码 componentDidMount () { this.messagesRef.on('child_added', snapshot => {
这是我的代码部分。一切正常，但 eslint 给出错误。 React Hook useEffect has missing dependencies: 'dispatch' and 'getData'
当组件安装时，我需要从两个 API 端点获取数据。现在我有: useEffect(() => { dispatch(loadSomeDataOne()); }, [dispatch])
当组件安装时，我需要从两个 API 端点获取数据。现在我有: useEffect(() => { dispatch(loadSomeDataOne()); }, [dispatch])
在 React DOCs 中，关于 useEffect() 钩子(Hook)，我们得到: “使用 useEffect 安排的效果不会阻止浏览器更新屏幕。” Tip Unlike componentDi
我一直试图了解何时取消订阅(useEffect 中的回调)被准确调用。 这是codepen链接:https://codepen.io/deen_john/pen/eYmNdMy 代码 : const
当对状态、效果、上下文等使用钩子(Hook)时，我这样做: import React, { useState, useEffect, useContext } from 'react'; 但是，我注意
我正在尝试像下面这样的 useEffect 示例: useEffect(async () => { try { const response = await fetch(`ht
我在我的 React 应用中构建了一个简单的点赞、书签功能。 const [liked, setLiked] = useState(); const [bookmarked, setBookmarke
我想了解为什么在代码块的底部使用 useEffect，以及它的用途。我认为它与组件生命周期和避免无限循环有关，但我无法完全理解它并全面了解这一切。如果有人能向我解释幕后发生的事情，以及 useEffe
useEffect(() => { return history.replace({ pathname: "path/A", }); }, []); useEffe
我是一名优秀的程序员,十分优秀！