uesRef

来源:3-8 复杂逻辑简单化——useReducer

vspace

2020-11-21 19:02

有点抄文档的感觉啊 花了钱的  感觉细节讲的不是很深入 讲的不是很深入 例如 useRef那一节为什么不用ref就会获取不到值

写回答 关注

1回答

  • yancy
    2021-06-06 12:07:39

    好吧,为了弥补,就在这里做回答吧,先看下代码实现

    const [num, setNum] = useState(1)
    
    let timer
    
    // 第一个effect
    useEffect(() => {
      timer = setInterval(() => {
        console.log(1111);
        setNum(num + 1)
      }, 400)
    }, [])
    // 第二个effect
    useEffect(() => {
      console.log(num, timer);
    }, [num])
    
    return (
      <div className="App">
        {num}
      </div>
    );

    第一个effect在更新渲染的时候,并没有依赖num参数,也就是只执行一次就结束了,但是每次更新num的时候,当前组件是要刷新的,timer也会重新生成一个,此时的timer只是undefined,并没有赋值的过程(第一个effect不执行了)。第一次给timer赋值之后,剩下的所有更新里,timer都是undefined。所以在第二个effect里获取和清空timer,只能获取到undefined。

    如果还有不明白,欢迎再次提问。?

React Hooks2小时快速入门

React Hooks 入门的不二之选

2715 学习 · 22 问题

查看课程