useEffect执行问题

来源:3-6 useEffect 可控 effect

wykun

2019-11-23

老师,通过学习useEffect我发现一个问题就是useEffect在不添加第二个参数的时候等同于不使用useEffect

import React, { useState, useEffect } from 'react';

const App = () => {
  const [num, setNum] = useState(0)
  console.log(num)
  
  useEffect(() => {
    console.log('hello')
  })

  return (
    <div>
      <p>{num}</p>
      <button onClick={() => {setNum(num + 1)}}>increase</button>
      <button onClick={() => {setNum(num - 1)}}>decrease</button>
    </div>
  )
}
 
export default App;

通过这段代码我发现只要num变化的话即使不加useEffect也是可以实现componentDidMount 和 componentDidUpdate
那是不是这种情况就可以不使用useEffect了呢?

写回答

1回答

张轩

2019-11-23

同学你好 执行顺序不同,useEffect 总是在渲染完毕以后才执行的,你那里的 console.log(num) 是在渲染之前进行的,一些 DOM 操作一般会选择在DOM 结果完全渲染完毕之后才执行,所以两者概念不同,不能替代。

0
0

2024更新 Electron+React+七牛云实战跨平台桌面应用

开发一款自动云同步的 Markdown 文件管理软件

1253 学习 · 463 问题

查看课程