React（五）useEffect、useRef、useImperativeHandle、useLayoutEffect

(一)useEffect

useEffect – React 中文文档

useEffect hook用于模拟以前的class组件的生命周期，但比原本的生命周期有着更强大的功能

1.类组件的生命周期

在类组件编程时，网络请求，订阅等操作都是在生命周期中完成

import React, { Component } from 'react'

export default class App extends Component {
  // 组件挂载后执行
  componentDidMount(){
    // 发送请求
    // 事件总线绑定
    // 创建定时器等
  }
  // 组件更新后执行
  componentDidUpdate(){

  }
  // 组件销毁前执行
  componentWillUnmount(){
    // 事件总线解绑
    // 清除定时器
  }

  render() {
    return (
      
App

2.函数式组件的生命周期

函数式组件没有明确的生命周期，使用useEffect来模拟生命周期

useEffect(setup, dependencies?)

在useRffect的第一个参数传入回调函数，执行请求、挂载等操作

useEffect会在组件每次挂载、更新后调用回调 

import { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0)

  useEffect(()=>{
    // 发送请求
    // store仓库订阅subscribe
    // 事件总线绑定 eventbus.on
    // 操作外部dom
    document.title = count
  })

  return (
    <>
      
{count}
      {setCount(count+1)}}>加1
    
  )
}

如何在组件销毁前取消订阅或者移除绑定？

只需要在第一个回调里返回一个回调函数即可，useEffect会在组件销毁前/组件更新前调用

useEffect(()=>{
    // 发送请求
    // store仓库订阅subscribe
    // 事件总线绑定 eventbus.on
    // 操作外部dom
    document.title = count
    // 计数器
    const time = setInterval(()=>{
      console.log(1);
    },1000)

    return ()=>{
      // store仓库取消订阅 unsubscribe
      // 清除事件总线
      // 清除计数器等操作
      clearInterval(time)
    }
  })

回调函数内的代码太长了

拆分useEffect，每个功能都可以单独写一个useEffect，react会自动处理

<