• 技术文章 >web前端 >js教程

    浅析React Hook中useEffecfa函数的使用

    青灯夜游青灯夜游2022-11-14 20:02:19转载190
    本篇文章给大家介绍一下React Hook中的useEffecfa函数,聊聊useEffecfa函数的使用细节,希望对大家有所帮助!

    大前端零基础入门到就业:进入学习

    useEffect的详细解析

    useEffecf基本使用

    书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state。【相关推荐:Redis视频教程编程视频

    我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢?

    Effect Hook 可以让你来完成一些类似于class中生命周期的功能;

    事实上,类似于网络请求、手动更新DOM、一些事件的监听,都是React更新DOM的一些副作用(Side Effects);

    所以对于完成这些功能的Hook被称之为 Effect Hook;

    假如我们现在有一个需求:页面中的title总是显示counter的数字,分别使用class组件和Hook实现:

    类组件实现

    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

    函数组件加Hook的实现:

    • 通过useEffect这个Hook,可以告诉React需要在渲染后执行某些操作;
    • useEffect要求我们传入一个回调函数,在React执行完更新DOM操作之后(也就是组件被渲染完成后),就会回调这个函数;
    • 默认情况下,无论是第一次渲染之后,还是每次更新之后,都会执行这个回调函数; 一般情况下我们在该回调函数中都是编写副作用的操作(例如网络请求, 操作DOM, 事件监听)

    因此需要注意的是, 有许多说法说useEffect就是用来模拟生命周期的, 其实并不是; useEffect可以做到模拟生命周期, 但是他主要的作用是用来执行副作用的

    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

    清除副作用(Effect)

    在class组件的编写过程中,某些副作用的代码,我们需要在componentWillUnmount中进行清除:

    比如我们之前的事件总线或Redux中手动调用subscribe;

    都需要在componentWillUnmount有对应的取消订阅;

    Effect Hook通过什么方式来模拟componentWillUnmount呢?

    useEffect传入的回调函数A本身可以有一个返回值,这个返回值是另外一个回调函数B:

    type EffectCallback = () => (void | (() => void | undefined));

    为什么要在 effect 中返回一个函数?

    这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数;

    如此可以将添加和移除订阅的逻辑放在一起;

    它们都属于 effect 的一部分;

    React 何时清除 effect?

    React 会在组件更新和卸载的时候执行清除操作, 将上一次的监听取消掉, 只留下当前的监听 ;

    正如之前学到的,effect 在每次渲染的时候都会执行;

    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

    使用多个useEffect

    使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题:

    比如网络请求、事件监听、手动修改DOM,这些往往都会放在componentDidMount中;

    一个函数组件中可以使用多个Effect Hook,我们可以将逻辑分离到不同的useEffect中:

    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

    Hook允许我们按照代码的用途分离它们, 而不是像生命周期函数那样, 将很多逻辑放在一起:

    React将按照 effect 声明的顺序依次调用组件中的每一个 effect;


    useEffect性能优化

    默认情况下,useEffect的回调函数会在每次渲染时都重新执行,但是这会导致两个问题:

    某些代码我们只是希望执行一次即可(比如网络请求, 组件第一次渲染中执行一次即可, 不需要执行多次),类似于类组件中的componentDidMount和componentWillUnmount中完成的事情;

    另外,多次执行也会导致一定的性能问题;

    我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢?

    useEffect实际上有两个参数:

    • 参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;
    • 参数二: 是一个数组类型, 表示 该useEffect在哪些state发生变化时,才重新执行;(受谁的影响才会重新执行)

    案例练习:

    受count影响的Effect;

    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

    但是,如果一个函数我们不希望依赖任何的内容时,也可以传入一个空的数组 []:

    那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;

    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

    总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝

    更多编程相关知识,请访问:编程教学!!

    以上就是浅析React Hook中useEffecfa函数的使用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:React Hook React
    上一篇:一起聊聊JavaScript中的声明提升 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 一起聊聊Hooks对Vue而言意味着什么• hooks怎么样,为什么vue和react都选择它!• react如何实现hooks?必须依赖 Fiber 么?• javascript的函数可以hook吗• 一文详解Redux Hooks的使用细节
    1/1

    PHP中文网