useEffect的详细解析
useEffecf基本使用
我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢?
假如我们现在有一个需求:页面中的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 ( {counter}
) }}export default App登录后复制import React, { memo, useEffect, useState } from "react"const App = memo(() => { const [counter, setCounter] = useState(200) // useEffect传入一个回调函数, 在页面渲染完成后自动执行 useEffect(() => { // 一般在该回调函数在编写副作用的代码(网络请求, 操作DOM, 事件监听) document.title = counter }) return ( {counter}
)})export default App登录后复制清除副作用(Effect)
在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除:
useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B:
type EffectCallback = () => (void | (() => void | undefined));
为什么要在 effect 中返回一个函数?
React 何时清除 effect?
import React, { memo, useEffect } from "react"const App = memo(() => { useEffect(() => { // 监听store数据发生改变 const unsubscribe = store.subscribe(() => { }) // 返回值是一个回调函数, 该回调函数在组件重新渲染或者要卸载时执行 return () => { // 取消监听操作 unsubscribe() } }) return ( App
)})export default App登录后复制使用多个useEffect
使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题:
一个函数组件中可以使用多个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 ( App )})export default App登录后复制Hook允许我们按照代码的用途分离它们， 而不是像生命周期函数那样, 将很多逻辑放在一起:
useEffect性能优化
默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题:
我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢?
案例练习:
import React, { memo, useEffect, useState } from "react"const App = memo(() => { const [counter, setCounter] = useState(100) // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行 useEffect(() => { console.log("网络请求的代码逻辑") }, [counter]) return ( setCounter(counter+1)}>{counter}
)})export default App登录后复制但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []:
import React, { memo, useEffect, useState } from "react"const App = memo(() => { const [counter, setCounter] = useState(100) // 传入空数组表示不受任何数据依赖 useEffect(() => { // 此时传入的参数一这个回调函数: 相当于componentDidMount console.log("监听的代码逻辑") // 参数一这个回调函数的返回值: 相当于componentWillUnmount return () => { console.log("取消的监听代码逻辑") } }, []) return ( setCounter(counter+1)}>{counter}
)})export default App登录后复制总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝
更多编程相关知识，请访问：编程教学！！
以上就是浅析React Hook中useEffecfa函数的使用的详细内容，更多请关注php中文网其它相关文章！
