Day22-生命周期

前言

这几天我们已经学习了Props外来传递资料，还有State组件本身状态。

今天要来学习很重要的一个使用观念【生命周期】。

而为甚麽我们需要了解所谓的生命周期呢???

这是因为了解组件如何被挂载和被释放，可以使我们更能够运用这时间差来达到获取API或是额外的操作。

今日会学习到的Hooks

useEffect
useLayoutEffect

Class component

在React官方文档中有提供我们学习类组件的生命周期
Lifecycle
Lifecycle method

依照组件的挂载与销毁进度

constructor -> render(回传JSX)-> componentDidUpdate -> componentWillUnmount -> componentDidMount

useEffect

useEffect是React Hooks中针对生命周期的一个API

syntax

  useEffect(() => {
    // call
  }, [dependency])

若第二个参数为空，即每次只要有组件被更新就会执行

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

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
   console.log('changed'); 
  })
  return (
    <div></div>
  )
}

export default App

若第二个参数只有[ ] ，则只会执行一次

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

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
   console.log('changed'); 
  },[])
  return (
    <div></div>
  )
}

export default App

若第二参数我们有指定监控的对象，即该对象更新才会执行

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

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
   console.log('changed'); 
  },[count])
  return (
    <div>
      <button onClick={() => setCount(count + 1) }>Click</button>
      {count}
    </div>
  )
}

export default App

useLayoutEffect

syntax

  useLayoutEffect(() => {
   // call
  }, [dependency])

你说奇怪为什麽React要用两个这麽像的API???

以下的code 如果把button按快一点会造成页面的闪烁

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

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
   if(count === 0){
     setCount(1)
   }
  },[count])

  return (
    <div>
      <button onClick={() => setCount(0)}>Click</button>
      { count}    
    </div>
  )
}

export default App

如果改成使用useLayoutEffect，就会很顺畅并不会闪烁。

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

function App() {
  const [count, setCount] = useState(0)
  useLayoutEffect(() => {
   if(count === 0){
     setCount(1)
   }
  },[count])

  return (
    <div>
      <button onClick={() => setCount(0)}>Click</button>
      { count}    
    </div>
  )
}

export default App

为什麽会有以上两种差别呢???

原因在於当我们使用useEffect状态快速切换时会造成UI也会快速更新，进而变成画面跟不上我们点击的速度。

而如果是使用useLayoutEffect的话，相当於在UI更新前已经先执行好更新状态，所以状态提前被准备好。