React--useEffect

最新推荐文章于 2024-06-23 15:41:30 发布
最新推荐文章于 2024-06-23 15:41:30 发布
阅读量3.2k 收藏
点赞数 1
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45209973/article/details/124981506
版权

使用 useEffect

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Effect Hook 可以让你在函数组件中执行副作用操作

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

function Counter () {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('Counter Effect -- 1 --')

    document.title = 'Counter ' + count

    return () => {
      console.log('Counter Effect -- 1 -- clear')
    }
  })

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}> Add </button>
    </>
  )
}

该示例声明了一个函数组件，其useEffect函数会在组件每次渲染（包括首次）的时候执行，首次执行一次，控制台打印输出如下：

在这里插入图片描述

点击【Add】–》 函数的count --state变化 --》函数组件刷新 --》 useEffect清理函数 --》新的useEffect函数

什么是副作用操作？

数据网络请求、DOM操作、定时器等

有时候，在 React 更新 DOM 之后运行一些额外的代码，就可以使用一个useEffect函数去操作

比如：在组件渲染之后，需要获取后端数据，可以在该函数内部操作；创建一个定时器、倒计时弹框展示等等
而有些副作用操作，需要在组件卸载之后清理（清除定时器、变量，避免内存泄露），有些就不用（数据请求），useEffect函数返回一个函数，可以在其中执行清理操作

所以，一个useEffect就相当于 componentDidMount， componentDidUpdate 和 componentWillUnmount 这三个函数的组合

useEffect 依赖项

useEffect函数的第一个参数是函数，第二个参数是数组

数组中的记录的是useEffect执行依赖的变量，这些变量可以是state、props或者是上下文等其他数据源，当依赖的变量发生变化后，useEffect才会执行，这可以作为一种性能优化

下面示例主要用于订阅聊天室人员的在线/下线状态

从最基本的开始吧，定义人员类：

class Friend {
  constructor (id, name) {
    this.id = id
    this.name = name
  }
}

class Member extends Friend {
  constructor (id, name, isOnline) {
    super(id, name)
    this.isOnline = isOnline
  }
}

定义聊天室类，添加相关方法

class ChatRoomClass {
  constructor () {
    this.members = []
    this.handlers = {}
  }

  /**
   * 加入聊天室
   * @param {Member} member 
   */
  join (member) {
    this.members.push(member)
  }

  /**
   * 改变在线状态
   * @param {number|string} id 
   */
  changeLineStatus (id) {
    const member = this.members.find(m => m.id === id)
    if (member) {
      member.isOnline = !member.isOnline
      this.trigger(id)
    }
  }

  /**
   * 退出聊天室
   * @param {Member} member 
   */
  out (member) {
    const idx = this.members.findIndex(i => i === member)
    idx > -1 && this.members.splice(idx, 1)
  }

  // 触发订阅了该 id 人员在线状态变化的函数
  trigger (id) {
    const handlerArr = this.handlers[id]
    if (!Array.isArray(handlerArr)) return void 0
    const member = this.members.find(m => m.id === id)
    handlerArr.forEach(fn => fn(member))
  }

  subscribeToFriendStatus (id, fn) {
    const member = this.members.find(m => m.id === id)
    fn(member)
    if (Array.isArray(this.handlers[id])) {
      this.handlers[id].push(fn)
    } else {
      this.handlers[id] = [fn]
    }
  }

  unsubscribeFromFriendStatus (id, fn) {
    const handlerArr = this.handlers[id]
    if (Array.isArray(handlerArr)) {
      const idx = handlerArr.findIndex(h => fn === h)
      idx > -1 && handlerArr.splice(idx, 1)
    }
  }
}

在FriendStatus组件的useEffect函数中添加在线状态的订阅，在清理函数中取消订阅

function FriendStatus (props) {
  const [online, setOnline] = useState(false)

  useEffect(() => {
    console.log('FriendStatus useEffect -- excute')
    function handleStatusChange (status) {
      setOnline(status.isOnline)
    }

    ChatRoom.subscribeToFriendStatus(props.friend.id, handleStatusChange)

    return () => {
      console.log('FriendStatus useEffect -- clean up excute')
      ChatRoom.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
  }, [props.friend.id])

  return (
    <>
      <span align="left">
        <strong>{props.friend.name}</strong>
        &nbsp;&nbsp;&nbsp;
        <span
          style={{
          backgroundColor: online ? '#0F0' : '#F00',
          display: 'inline-block',
          width: '12px',
          height: '12px',
          borderRadius: '50%'
        }} />
      </span>
    </>
  )
}

该组件的使用方式如下：

export default class Home extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      members: ChatRoom.members,
    }
    this.inputNameRef = React.createRef()
    this.handleJoinChat = this.handleJoinChat.bind(this)
    this.changeLineStatus = this.changeLineStatus.bind(this)
  }

  changeLineStatus (id) {
    ChatRoom.changeLineStatus(id)
    this.setState({
      members: [...ChatRoom.members]
    })
  }

  handleJoinChat () {
    const inputVal = this.inputNameRef.current.value
    if (!inputVal) return void 0
    const member = new Member(
      randomID(),
      inputVal,
      true,
    )
    ChatRoom.join(member)
    this.setState({
      members: [...ChatRoom.members]
    }, () => {
      this.inputNameRef.current.value = ''
    })
  }

  render() {
    const members = this.state.members
    const adminWindow = (
      <ul>
        {members.map(m => (
          <li key={m.id}>
            <FriendStatus friend={m} />&nbsp;&nbsp;&nbsp;
            <button onClick={() => this.changeLineStatus(m.id)}>Change</button>
          </li>
        ))}
      </ul>
    )
    const otherUserMemberSplit = members.map((item, idx, arr) => arr.filter(m => m.id !== item.id))
    const otherUserWindows = (
      <div style={{
        width: '100vw',
        display: 'flex'
      }}>
        {members.map((om, idx) => (
          <div style={{
            flex: '1 1 auto',
            borderRight: '1px solid #000'
          }} key={om.id}>
            <h4 style={{
              textDecoration: om.isOnline ? 'none' : 'line-through'
            }}>【{om.name}】窗口</h4>
            <ul>
              {otherUserMemberSplit[idx].map(im => <li key={im.id}>
                <FriendStatus friend={im} />
              </li>)}
            </ul>
          </div>
        ))}
      </div>
    )
    return (
      <>
        <div>
          <input type="text" ref={this.inputNameRef} />
          <input type="button" onClick={this.handleJoinChat} value="加入" />
        </div>
        <hr />
        <h4>管理员窗口</h4>
        {adminWindow}
        <hr />
        <h4>其他用户窗口</h4>
        {otherUserWindows}
      </>
    )
  }
}

代码解释：

  1. 聊天室实例作为在线人员的数据来源，并且存在订阅、取消订阅、加入、改变在线状态等方法
  2. Home组件中定义了整个页面的渲染情况，包含“管理员窗口”（主要用于切换某个用户的在线状态，订阅了该用户在线状态的组件更新），还有"其他人员窗口"（展示除自身以外的其他人员的在线状态 – 订阅）
  3. 改变某位用户的在线状态，其他用户窗口中，同步修改

使用效果：
在这里插入图片描述

比如：在同一个聊天室中，一个用户相当于订阅了其他所有用户的在线状态，当某一个用户的在线状态变更后，其他用户就能够及时看到该用户的状态变化

使用多个 Effect 实现关注点分离

使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题

将Counter和FriendStatus组合起来，互不影响：

function FriendStatusWithCounter (props) {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('Counter Effect -- 1 --')

    document.title = 'Counter ' + count

    return () => {
      console.log('Counter Effect -- 1 -- clear')
    }
  }, [count])

  const [online, setOnline] = useState(false)

  useEffect(() => {
    console.log('FriendStatusWithCounter useEffect -- excute')
    function handleStatusChange (status) {
      setOnline(status.isOnline)
    }

    ChatRoom.subscribeToFriendStatus(props.friend.id, handleStatusChange)

    return () => {
      console.log('FriendStatusWithCounter useEffect -- clean up excute')
      ChatRoom.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
  }, [props.friend.id])

  return (
    <div style={{
      display: 'inline-block',
      width: 'auto',
      padding: '10px',
      border: '1px solid #AAA',
      marginBottom: '10px',
    }}>
      <div align="left">
        <strong>{props.friend.name}</strong>
        &nbsp;&nbsp;&nbsp;
        <span
          style={{
          backgroundColor: online ? '#0F0' : '#F00',
          display: 'inline-block',
          width: '12px',
          height: '12px',
          borderRadius: '50%'
        }} />
      </div>
      {!props.admin && <div>
        <strong>Count: {count}</strong>&nbsp;&nbsp;&nbsp;
        <button onClick={() => setCount(count + 1)}> Add </button>
      </div>}
    </div>
  )
}

完整代码如下：

import React, { useState, useEffect } from "react";
import './index.css'

function randomID () {
  return Math.random().toString(36).slice(-6)
}


class Friend {
  constructor (id, name) {
    this.id = id
    this.name = name
  }
}

class Member extends Friend {
  constructor (id, name, isOnline) {
    super(id, name)
    this.isOnline = isOnline
  }
}

class ChatRoomClass {
  constructor () {
    this.members = []
    this.handlers = {}
  }

  /**
   * 加入聊天室
   * @param {Member} member 
   */
  join (member) {
    this.members.push(member)
  }

  /**
   * 改变在线状态
   * @param {number|string} id
   */
  changeLineStatus (id) {
    const member = this.members.find(m => m.id === id)
    if (member) {
      member.isOnline = !member.isOnline
      this.trigger(id)
    }
  }

  /**
   * 退出聊天室
   * @param {Member} member 
   */
  out (member) {
    const idx = this.members.findIndex(i => i === member)
    idx > -1 && this.members.splice(idx, 1)
  }

  // 触发订阅了该 id 人员在线状态变化的函数
  trigger (id) {
    const handlerArr = this.handlers[id]
    if (!Array.isArray(handlerArr)) return void 0
    const member = this.members.find(m => m.id === id)
    handlerArr.forEach(fn => fn(member))
  }

  subscribeToFriendStatus (id, fn) {
    const member = this.members.find(m => m.id === id)
    fn(member)
    if (Array.isArray(this.handlers[id])) {
      this.handlers[id].push(fn)
    } else {
      this.handlers[id] = [fn]
    }
  }

  unsubscribeFromFriendStatus (id, fn) {
    const handlerArr = this.handlers[id]
    if (Array.isArray(handlerArr)) {
      const idx = handlerArr.findIndex(h => fn === h)
      idx > -1 && handlerArr.splice(idx, 1)
    }
  }
}

const ChatRoom = new ChatRoomClass()


function FriendStatusWithCounter (props) {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('Counter Effect -- 1 --')

    document.title = 'Counter ' + count

    return () => {
      console.log('Counter Effect -- 1 -- clear')
    }
  }, [count])

  const [online, setOnline] = useState(false)

  useEffect(() => {
    console.log('FriendStatusWithCounter useEffect -- excute')
    function handleStatusChange (status) {
      setOnline(status.isOnline)
    }

    ChatRoom.subscribeToFriendStatus(props.friend.id, handleStatusChange)

    return () => {
      console.log('FriendStatusWithCounter useEffect -- clean up excute')
      ChatRoom.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
  }, [props.friend.id])

  return (
    <div style={{
      display: 'inline-block',
      width: 'auto',
      padding: '10px',
      border: '1px solid #AAA',
      marginBottom: '10px',
    }}>
      <div align="left">
        <strong>{props.friend.name}</strong>
        &nbsp;&nbsp;&nbsp;
        <span
          style={{
          backgroundColor: online ? '#0F0' : '#F00',
          display: 'inline-block',
          width: '12px',
          height: '12px',
          borderRadius: '50%'
        }} />
      </div>
      {!props.admin && <div>
        <strong>Count: {count}</strong>&nbsp;&nbsp;&nbsp;
        <button onClick={() => setCount(count + 1)}> Add </button>
      </div>}
    </div>
  )
}

export default class Home extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      members: ChatRoom.members,
    }
    this.inputNameRef = React.createRef()
    this.handleJoinChat = this.handleJoinChat.bind(this)
    this.changeLineStatus = this.changeLineStatus.bind(this)
  }

  changeLineStatus (id) {
    ChatRoom.changeLineStatus(id)
    this.setState({
      members: [...ChatRoom.members]
    })
  }

  handleJoinChat () {
    const inputVal = this.inputNameRef.current.value
    if (!inputVal) return void 0
    const member = new Member(
      randomID(),
      inputVal,
      true,
    )
    ChatRoom.join(member)
    this.setState({
      members: [...ChatRoom.members]
    }, () => {
      this.inputNameRef.current.value = ''
    })
  }

  render() {
    const members = this.state.members
    const adminWindow = (
      <ul>
        {members.map(m => (
          <li key={m.id}>
            <FriendStatusWithCounter admin friend={m} />&nbsp;&nbsp;&nbsp;
            <button onClick={() => this.changeLineStatus(m.id)}>Change</button>
          </li>
        ))}
      </ul>
    )
    const otherUserMemberSplit = members.map((item, idx, arr) => arr.filter(m => m.id !== item.id))
    const otherUserWindows = (
      <div style={{
        width: '100vw',
        display: 'flex'
      }}>
        {members.map((om, idx) => (
          <div style={{
            flex: '1 1 auto',
            borderRight: '1px solid #000'
          }} key={om.id}>
            <h4 style={{
              textDecoration: om.isOnline ? 'none' : 'line-through'
            }}>【{om.name}】窗口</h4>
            <ul>
              {otherUserMemberSplit[idx].map(im => <li key={im.id}>
                <FriendStatusWithCounter friend={im} />
              </li>)}
            </ul>
          </div>
        ))}
      </div>
    )
    return (
      <>
        <div>
          <input type="text" ref={this.inputNameRef} />
          <input type="button" onClick={this.handleJoinChat} value="加入" />
        </div>
        <hr />
        <h4>管理员窗口</h4>
        {adminWindow}
        <hr />
        <h4>其他用户窗口</h4>
        {otherUserWindows}
      </>
    )
  }
}

小结

  • useState、useEffectHooks用于在函数组件中勾入相当于类组件生命周期的功能，使函数组件具有了状态
  • useEffect函数用于处理组件中的副作用，副作用包括数据获取、DOM操作、定时器等，当然不仅限于此。它相当于 componentDidMount， componentDidUpdate 和 componentWillUnmount 这三个函数的组合
  • 还可以使用useEffect实现分离关注点，抽离出细致的功能，封装成函数在适当地时机执行
qq_45209973
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-opencvjs
05-18
useEffect ( ( ) => { openCV ( { onLoaded : ( ) => console . log ( 'open cv loaded' ) , onFailed : ( ) => console . log ( 'open cv failed to load' ) , version : '4.5.1' } ) } , [ ] ) // if open ...
react useEffect详解
weixin_45760365的博客
04-24 2万+
useEffect详解 useEffect使用时有以下4种情况 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 useEffect(()=>{undefined console.log(props.number) setNumber(props.number) }) //所有更新都执行 2、传递空数组 useEffect(()=>
React之useEffect
m0_72560900的博客
06-23 530
在React中，useEffect是一个非常重要的Hook，它用于管理副作用操作。副作用指的是那些不直接与组件渲染相关的操作，例如数据获取、订阅、手动DOM操作等。本文将详细介绍useEffect的概念、基础使用、参数说明以及如何清除副作用，并提供多个实用的使用案例。
React 之 useEffect 详解
subsistent的博客
08-17 4156
useEffect 可以让你在函数组件中执行副作用操作,接收两个参数，第一个参数是要执行的函数 callback，第二个参数是可选的依赖项数组 dependencies。其中依赖项是可选的，如果不指定，那么 callback 就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行。简单来说就是当我们的依赖项发生发生变化的时候，可以。注意：useEffect是在render之后执行。
react 使用 useEffect 及踩坑
热门推荐
秋来九月八
02-25 2万+
useEffect时reactHook中最重要，最常用的hook之一。useEffect相当于react中的什么生命周期呢？这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？
[react] useEffect详解
Madman528的博客
04-10 1488
外部影响内部:从外部获取到数据，对内部渲染的结果产生影响其实英文叫side·effect 我理解为旁边,外边对你的作用中文里副作用有坏处的意思,所以这里用外部作用更合适一点。
react-ReactTickerfortheWeb
08-14
4. **事件处理**：可能包含事件监听器，如`useEffect`来监听特定事件，如数据更新，以便在数据变化时自动更新ticker内容。 5. **性能优化**：通过`shouldComponentUpdate`或`React.memo`来避免不必要的重渲染，提高...
uiw-react-baidu-map-master_react-baidu-map_React_
10-01
5. **使用React Hooks**：这个组件库支持React Hooks，如`useState`和`useEffect`，使得状态管理和副作用处理更加简洁和高效。 6. **自定义样式**：可以调整地图的样式，比如改变图层颜色、控制图例等，以适应你的...
react-18.2.0
03-17
6. **Hooks API**：React 16.8引入的Hooks使得状态管理和其他生命周期功能可以在函数组件中使用，如useState、useEffect、useContext、useReducer等。这些Hooks简化了代码结构，提高了代码复用性。 7. **Ref和...
react-reacttypewriterhook用reacthooks来实现打字机的效果
08-15
在React开发中，为了增强用户体验，我们经常需要创建各种动态效果。其中，打字机效果是一种常见的动画形式，它模拟了文字逐个显示的过程，给用户带来一种正在实时输入的感觉。`react-typewriter-hook`就是这样一个库...
react-学习学习学习
02-07
React 16.8版本引入了Hooks，如`useState`、`useEffect`和`useContext`等，它们允许在不编写类组件的情况下使用状态和生命周期方法。`useState`用于添加状态管理，`useEffect`用于副作用处理，`useContext`则用于...
react-useeffect-example:让我们实现react的使用效果
04-11
问：让我们实现理解react的useEffect函数。 功能要求 它存储执行效果的功能和相关性数据。 允许您在渲染html元素后运行效果。 它比较依赖性数据并决定是否执行效果。 通过效果功能更改文档标题。 功能操作图 如何...
react-基于react的自定义滚动条组件
08-14
在React组件中，我们可以使用`useEffect`或`componentDidMount`生命周期方法来添加事件监听器，使用`useEffect`的`cleanup`函数或`componentWillUnmount`来移除监听器，以避免内存泄漏。 4. **自定义滚动逻辑**：...
react-自定义钩子来调试useEffect
08-15
在React的 hooks 机制中，`useEffect` 是一个至关重要的功能组件，它允许我们在React应用中处理副作用，如数据获取、订阅或者手动更改DOM。然而，在开发过程中，正确理解和调试`useEffect` 可能会遇到一些挑战。为了...
react-demo
03-22
然而，随着React Hooks的引入，很多生命周期方法已被新的钩子函数所替代，如`useState`用于管理状态，`useEffect`用于执行副作用。 在"react-demo"项目中，我们可能还会发现一些其他关键文件，比如`index.html`作为...
React useEffect 两个参数你用对了吗，这也许是最全的使用说明书
梅花寺
06-09 8526
3. 参数二：deps 第二个参数可以是 现象： useEffect 会在第一次渲染以及每次更新渲染后都执行。原因： 第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect没有比较值，useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。 现象： useEffect 会在第一次渲染后执行一次。原因： 第一次渲染后执行一次一次useEffect，useEffec
React useEffect详解
qq_41985405的博客
06-09 825
参数1：逻辑处理函数；参数2：数组或者不传。
react中的useEffect
Sapling
11-07 1424
是函数组件中执行的副作用，副作用就是指每次组件更新都会执行的函数，可以用来取代生命周期。
react-typewriter-hook 配置项
最新发布
07-06
`react-typewriter-hook`是一个React Hooks库，用于模拟文字逐行滚动显示的效果，类似于动态加载的文字效果。它提供了一个简单的API来配置动画。以下是几个主要的配置项： 1. **text**: 字符串数组，包含要显示的一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值