useEffect 模拟 react 生命周期

• Z时代
• 2024-01-10
• 分类：综合

1.代码

function App () {
  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 () => {
      // 相当于 componentWillUnmount
      window.removeEventListener('resize', onChange, false)
    }
  }, [])
  useEffect(() => {
    // 相当于 componentDidUpdate
    document.title = count
  })
  useEffect(() => {
    console.log(`count change: count is ${count}`)
  }, [ count ])
  return (
    <div>
      页面名称: { count } 
      页面宽度: { width }
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
  )
}

.

以上是 useEffect 模拟 react 生命周期 的全部内容， 来源链接： utcz.com/z/383065.html