react生命周期

利用的是useEffect函数实现生命周期

useEffect的使用

挂载时

注意：第二个参数为空数组 表示是挂载。只执行一次

useEffect(() => {
   console.log('建立连接： music 房间')
}, [])

更新时

注意：第二个参数为你想要监控的字段：该调用方式会在组件 挂载以及更新 时都会执行

useEffect(() => {
   console.log(`建立连接： ${roomId} 房间`)
}, [roomId])

卸载时

注意：特点是第二个入参是空数组，并且需要返回一个函数。

useEffect(() => {
    return () => {
      console.log('断开连接')
    }
  }, [])

最佳实践

一般实际开发中，通常将一个完整的业务写在一个useEffect生命周期中。这样看起来比较容易理解。 比如：

useEffect(() => {
    console.log(`1 建立连接： ${roomId} 房间`)
    return () => {
      // 清理函数
      console.log(`2 断开连接： ${roomId} 房间`)
    }
  }, [roomId])

聊天室例子

App.js

import { useEffect } from 'react'
import { useState } from 'react'
import './App.scss'

// useEffect 的扩展
/*
 * 需求：在线聊天室的连接和关闭
 */

// 聊天室
const ChatRoom = ({ roomId }) => {
  /*
   * 方式一：以【生命周期钩子函数】为主
   *        分别在每个钩子函数中，实现一个完整功能的部分效果
   */

  /*
   * 方案二：以【功能】为主
   *        一个功能的所有效果放在一起实现
   */

  const [count, setCount] = useState(0)
  let age = 10
  // 扩展1
  // 推荐：一个 useEffect 负责一个完整的功能
  // 代码执行过程： 1挂载 ①  2更新 ②①重复  3卸载 ②

  // 扩展2
  // 依赖项的说明
  // 指定依赖项的原则：Effect函数中用到的，并且是可变的值（props/state/组件中创建的变量等）
  // 一定要正确指定 useEffect 的依赖项，否则，会Bug
  useEffect(() => {
    console.log(`1 建立连接： ${roomId} 房间`, count, age)
    return () => {
      // 清理函数
      console.log(`2 断开连接： ${roomId} 房间`)
    }
  }, [roomId, count, age])
  // }, [])

  // 1. 挂载时，和默认聊天室建立连接
  // useEffect(() => {
  //   console.log('建立连接： music 房间')
  // }, [])

  // 2. 更新时，和最新聊天室建立连接
  // 注意：该调用方式会在组件挂载以及更新时都会执行
  // useEffect(() => {
  //   console.log(`建立连接： ${roomId} 房间`)
  // }, [roomId])

  // 3. 卸载时，和聊天室断开连接
  // useEffect(() => {
  //   return () => {
  //     console.log('断开连接')
  //   }
  // }, [])

  return (
    <div className="chat-room">
      <h1>欢迎来到 {roomId} 房间！</h1>
    </div>
  )
}

const App = () => {
  // 房间id
  const [roomId, setRoomId] = useState('music')
  // 是否正在聊天
  const [chatting, setChatting] = useState(true)

  return (
    <div className="app">
      <button onClick={() => setChatting(!chatting)}>
        {chatting ? '退出聊天' : '开始聊天'}
      </button>

      {chatting ? (
        <div>
          <label>
            选择聊天室：
            <select value={roomId} onChange={e => setRoomId(e.target.value)}>
              <option value="music">music</option>
              <option value="travel">travel</option>
              <option value="sports">sports</option>
            </select>
          </label>
          {/* 聊天室 */}
          <ChatRoom roomId={roomId} />
        </div>
      ) : (
        <p>点击【开始聊天】按钮，开始吧~</p>
      )}
    </div>
  )
}

export default App

App.scss

.app {
  position: relative;
  height: 500px;
  width: 600px;
  margin: 50px auto 0;
  padding: 10px;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
}

.chat-room {
  height: 400px;
  margin-top: 10px;
  padding: 10px;
  border: 2px dashed skyblue;
}