react useEffect 模拟生命周期

import React,{ useState,useEffect} from "react"export default function FunComp(){const [ count, setCount ] = useState(0)const [ width, setWidth ] = useState(document.body.clientWidth)const onChange =

Gala&&Ming

905人浏览 · 2021-10-25 12:22:10

Gala&&Ming · 2021-10-25 12:22:10 发布

import React,{ useState,useEffect  } from "react"
export default function FunComp(){
  const [ count, setCount ] = useState(0)
  const [ width, setWidth ] = useState(document.body.clientWidth)
 
  const onChange = () => {
    setWidth(document.body.clientWidth)
  }
   
  useEffect(() => {
    // 相当于 componentDidMount
    window.addEventListener('resize', onChange, false)
    return () => {
        console.log('销毁了')
      // 相当于 componentWillUnmount
      window.removeEventListener('resize', onChange, false)
    }
  }, [])
  useEffect(() => {
    document.title = count
    // 相当于 componentDidUpdate
    })

 
  useEffect(() => {
    console.log(`count change: count is ${count}`)
  }, [ count ])
 
  return (
    <div>
      页面名称: { count }
      页面宽度: { width }
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
  )
}