import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 100
    }
  }

  // 進(jìn)入頁面時(shí), 標(biāo)題顯示counter
  componentDidMount() {
    document.title = this.state.counter
  }

  // 數(shù)據(jù)發(fā)生變化時(shí), 讓標(biāo)題一起變化
  componentDidUpdate() {
    document.title = this.state.counter
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

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

const App = memo(() => {
  const [counter, setCounter] = useState(200)

  // useEffect傳入一個(gè)回調(diào)函數(shù), 在頁面渲染完成后自動(dòng)執(zhí)行
  useEffect(() => {
    // 一般在該回調(diào)函數(shù)在編寫副作用的代碼(網(wǎng)絡(luò)請(qǐng)求, 操作DOM, 事件監(jiān)聽)
    document.title = counter
  })

  return (
    <div>
      <h2>{counter}</h2>
      <button onClick={() => setCounter(counter+1)}>+1</button>
    </div>
  )
})

export default App

type EffectCallback = () => (void | (() => void | undefined));

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

const App = memo(() => {
  useEffect(() => {
    // 監(jiān)聽store數(shù)據(jù)發(fā)生改變
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一個(gè)回調(diào)函數(shù), 該回調(diào)函數(shù)在組件重新渲染或者要卸載時(shí)執(zhí)行
    return () => {
      // 取消監(jiān)聽操作
      unsubscribe()
    }
  })

  return (
    <div>
      <h2>App</h2>
    </div>
  )
})

export default App

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

const App = memo(() => {
  // 監(jiān)聽的useEffect
  useEffect(() => {
    console.log("監(jiān)聽的代碼邏輯")

    return () => {
      console.log("取消的監(jiān)聽代碼邏輯")
    }
  })

  // 發(fā)送網(wǎng)絡(luò)請(qǐng)求的useEffect
  useEffect(() => {
    console.log("網(wǎng)絡(luò)請(qǐng)求的代碼邏輯")
  })

  // 操作DOM的useEffect
  useEffect(() => {
    console.log("操作DOM的代碼邏輯")
  })

  return (
    <div>
      App
    </div>
  )
})

export default App

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

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 發(fā)送網(wǎng)絡(luò)請(qǐng)求的useEffect, 只有在counter發(fā)生改變時(shí)才會(huì)重新執(zhí)行
  useEffect(() => {
    console.log("網(wǎng)絡(luò)請(qǐng)求的代碼邏輯")
  }, [counter])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

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

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 傳入空數(shù)組表示不受任何數(shù)據(jù)依賴
  useEffect(() => {
    // 此時(shí)傳入的參數(shù)一這個(gè)回調(diào)函數(shù): 相當(dāng)于componentDidMount
    console.log("監(jiān)聽的代碼邏輯")

    // 參數(shù)一這個(gè)回調(diào)函數(shù)的返回值: 相當(dāng)于componentWillUnmount
    return () => {
      console.log("取消的監(jiān)聽代碼邏輯")
    }
  }, [])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App