React Hook中的useEffecfa函数的使用小结

import React, { PureComponent } from 'react'

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

    this.state = {
      counter: 100
    }
  }

  // 进入页面时, 标题显示counter
  componentDidMount() {
    document.title = this.state.counter
  }

  // 数据发生变化时, 让标题一起变化
  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传入一个回调函数, 在页面渲染完成后自动执行
  useEffect(() => {
    // 一般在该回调函数在编写副作用的代码(网络请求, 操作DOM, 事件监听)
    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(() => {
    // 监听store数据发生改变
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一个回调函数, 该回调函数在组件重新渲染或者要卸载时执行
    return () => {
      // 取消监听操作
      unsubscribe()
    }
  })

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

export default App

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

const App = memo(() => {
  // 监听的useEffect
  useEffect(() => {
    console.log("监听的代码逻辑")

    return () => {
      console.log("取消的监听代码逻辑")
    }
  })

  // 发送网络请求的useEffect
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  })

  // 操作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)
  
  // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  }, [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)
  
  // 传入空数组表示不受任何数据依赖
  useEffect(() => {
    // 此时传入的参数一这个回调函数: 相当于componentDidMount
    console.log("监听的代码逻辑")

    // 参数一这个回调函数的返回值: 相当于componentWillUnmount
    return () => {
      console.log("取消的监听代码逻辑")
    }
  }, [])

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

export default App