位置: IT常识 - 正文
React Hook - useEffecfa函数的使用细节详解
编辑：rootadmin推荐整理分享React Hook - useEffecfa函数的使用细节详解，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state
我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢?
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 AppHook允许我们按照代码的用途分离它们， 而不是像生命周期函数那样, 将很多逻辑放在一起:
React将按照 effect
上一篇：vue导入处理Excel表格详解(导入vue.js)
下一篇：nmap命令 网络探测及端口扫描工具(nmap的命令)
