44.React学习笔记.hooks useEffect

一.认识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都重新执行一次；
• 第二个参数传入：依赖的变量的列表，表示变量发生改变时，执行传入的回调函数。
• 第二个参数主要用来优化性能。

五.可以多个useEffect一起使用