一.认识Effect Hook
在Hook中，如何对应生命周期呢？：
- Effect Hook起到了类似class中生命周期的功能。
- 类似于网络请求，手动更新DOM，一些事件监听，都是React更新DOM的一些副作用（Side Effect）；
- 对应于完成这些功能的Hook被称为Effect Hook；
import React, { PureComponent } from 'react'
export default class ClassCounterTitleChange extends PureComponent {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
componentDidMount() {
document.title = this.state.counter;
}
componentDidUpdate(){
document.title = this.state.counter;
}
render() {
return (
<div>
<h2>当前计数：{this.state.counter}</h2>
<button onClick={e => this.setState({ counter: this.state.counter + 1 })}>+1</button>
</div>
)
}
}
使用class：改变tab名称，初始化和更新时都要进行一个操作，代码比较多。
二.使用Effect Hook
useEffect参数：第一个参数为回调函数，等到组件渲染到真实DOM上后，回调第一个参数的返回函数，且不管是第一次渲染，还是发生更新后的渲染，都会执行。
使用useEffect：
import React, { useState, useEffect } from 'react'
export default function HookCounterChangeTitle() {
const [counter, setCounter] = useState(0);
useEffect(() => {
document.title = counter;
});
return (
<div>
<h2>当前计数：{counter}</h2>
<button onClick={e => setCounter(counter + 1)}>+1</button>
</div>
)
}
三.Effect Hook和生命周期函数做个对比
生命周期：
- 可以在componentDidMount订阅事件；在componentWillUnmount取消事件订阅；
四.Effect Hook模拟订阅&取消订阅
useEffect：接收一个函数，该函数可以有一个返回值（另一个函数）。
-
当我们更新或准备卸载时，会回到接收函数返回的函数中。
image.png
import React, { useEffect, useState } from 'react'
export default function EffectHookCancelDemo() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("订阅一些事件");
return () => {
console.log("取消订阅事件");
}
})
return (
<div>
<h2>EffectHookCancelDemo</h2>
<h2>{count}</h2>
<button onClick={e => setCount(count + 1)}>+1</button>
</div>
)
}
- 这种情况就会造成频繁地订阅与取消订阅：当组件更新，会立马执行返回函数，再执行回调函数；
- 这个时候我们就需要第二个参数了：传入[]空数组作为第二个参数；
- 第二个参数不传入：代表若组件重新渲染，所有useEffect都重新执行一次；
- 第二个参数传入：依赖的变量的列表，表示变量发生改变时，执行传入的回调函数。
- 第二个参数主要用来优化性能。
