• 本文基于之前创建的react-app脚手架文件
  • App.tsx 
import React from 'react'

function App() {
   
  const [count, setCount] = React.useState(5)
  console.log('1')

  React.useEffect(() => {
   
    // 实现count每一秒-1
    console.log('2')

    let timer = setInterval(() => {
   
      if (count > 0) {
   
        // console.log('count:', count)
        setCount(count - 1)
      }
    }, 1000)
    return () => {
   
      clearInterval(timer)
    }
  }, [count])
  console.log('3')

  return (
    <div className="App">
      <p>Hello,Dust</p>
      <span>count:{
   count}</span>
    </div>
  )
}

export default App
  • 执行结果:
  • 注意观察每个console.log的位置,执行结果是实现一个5s的倒计时,每秒console里都会打印出"1,3,2"
  • 说明useEffect的内容是最后执行,先执行之前之后的内容,这样也好理解"副作用"这个定义.
简单一点:去掉倒计时功能
import React from 'react'

function App() {
   
  console.log('1')

  React.useEffect(() => {
   
    console.log('2')
  }, [])
  console.log('3')

  return (
    <div className="App">
      <p>Hello,Dust</p>
    </div>
  )
}

export default App
  • 执行结果:(是不是直观多了)