用 useEffect 模拟组件生命周期

useEffect

让函数组件模拟生命周期

• 默认函数组件没有生命周期
• 函数组件是一个纯函数，执行完后即销毁，自己无法实现生命周期
• 使用 Effect Hook 把生命周期 “钩” 到纯函数中

例子

import React, {useState, useEffect} from "react";

function LifeCycles() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('lzw.')

  // 模拟 class 组件的 DidMount 和 DidUpdate
  // useEffect(() => {
  //   console.log('此处发送一个 Ajax 请求')
  // })

  // 模拟 class 组件的 DidMount
  useEffect(() => {
    console.log('加载完了')
  }, []) // 第二个参数是 [] （不依赖任何 state）

  // 模拟 class 组件的 DidUpdate
  useEffect(() => {
    console.log('更新了')
  }, [count, name]) // 第二个参数是依赖的 state

  // 模拟 class 组件的 DidMount
  useEffect(() => {
    // let timerId = setInterval(() => {
    //   console.log(Date.now())
    // }, 1000)

    // 返回函数
    // 模拟 class 组件的 WillUnMount
    return () => {
      clearInterval(timerId)
    }
  }, [])

  function setVal() {
    setCount(count + 1)
    setName(name + '-' + count)
  }

  return <div>
    <p>你点击了多少次 {count} 次 {name}</p>
    <button onClick={setVal}>点击</button>
  </div>
}

export default LifeCycles

useEffect 使用总结

• 模拟 componentDidMount - useEffect 依赖 []
• 模拟 componentDidUpdate - useEffect 依赖 []，或者依赖 [a,b]
• 模拟 componentWillUnmount - useEffect 中返回一个函数

useEffect 让纯函数有了副作用

• 默认情况下，执行纯函数，输入参数，返回结果，无副作用
• 所谓副作用，就是对函数之外造成影响，如设置全局定制任务
• 而组件需要副作用，所有需要 useEffect “钩” 到纯函数中

用 useEffect 模拟 WillUnMount 时的注意事项

先看一个好友在线的例子

使用 class 组件实现

import React from "react";

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      status: false // 默认当前不在线
    }
  }

  render() {
    return <div>
      好友 {this.props.friendId} 在线状态: {this.state.status}
    </div>
  }

  componentDidMount() {
    console.log(`开始监听 ${this.props.friendId} 的在线状态`)
  }

  componentWillUnmount() {
    console.log(`结束监听 ${this.props.friendId} 的在线状态`)
  }

  // friendId 更新
  componentDidUpdate(prevProps) {
    console.log(`结束监听 ${prevProps.friendId} 的在线状态`)
    console.log(`开始监听 ${this.props.friendId} 的在线状态`)
  }
}

export default FriendStatus

然后调用

import React, {useState} from "react";
import FriendStatus from "./FriendStatusClass";

function App() {
  const [flag, setFlag] = useState(true)
  const [id, setId] = useState(1)

  return <div>
    <button onClick={() => setFlag(false)}>设置 flag</button>
    <button onClick={() => setId(id + 1)}>设置 ID</button>
    {flag && <FriendStatus friendId={id}></FriendStatus>}
  </div>
}

export default App

执行结果为

开始监听 1 的在线状态
结束监听 1 的在线状态
开始监听 2 的在线状态
结束监听 2 的在线状态

使用函数组件实现

import React, {useEffect, useState} from "react";

function FriendStatus({friendId}) {
  const [status, setStatus] = useState(false)

  // DidMount 和 DidUpdate
  useEffect(() => {
    console.log(`开始监听 ${friendId} 的在线状态`)

    // 【特别注意】
    // 此处并不完全等同于 willUnMount
    // props 发生变化，即更新，也会执行结束监听
    // 准确的说：返回函数，会在下一次 effect 执行之前，被执行
    return () => {
      console.log(`结束监听 ${friendId} 的在线状态`)
    }
  })

  return <div>
    好友 {friendId} 在线状态: {status.toString()}
  </div>
}

export default FriendStatus

useEffect 中返回函数 fn

• useEffect 依赖 []，组件销毁时执行 fn，等于 WillUnMount
• useEffect 无依赖或依赖 [a,b]，组件更新时执行 fn
• 即，下一次执行 useEffect 之前，就会执行 fn，无论更新或卸载