Hooks

useEffect Hook

认识 useEffect Hook

• useEffect 可以来帮助我们完成一些类似于 class 中生命周期的功能

• 事实上，向我们之前的话，在 class 组件里面，我们可能会在 componentDidMount 里面发送 网络请求、或者会做一些手动更新DOM、一些事件的监听等等，这些都称为 React 更新DOM 的一些副作用（Side Effects）

• useEffect Hook 就是帮助我们完成一些类似于 class 组件中 发送网络请求、手动更新DOM、事件监听 等等这些副作用，所以这也是 useEffect 名称的由来

我们可以先通过一个需求来对 useEffect Hook 来一个初步的认识

需求: 页面的 title 总是显示 counter 的数字，分别使用 class 组件和Hook 实现

• 使用 class 组件来实现，从下面代码可以看出，组件渲染完成的时候，我们通过 componentDidMount 这个生命周期函数给 title 赋初始值，当 counter 改变的时候，再通过 componentDidUpdate 这个生命周期函数给 title 赋值，这里相同的逻辑写了俩次，接下来，看看 useEffect Hook 是怎么来实现的

  
  
  class CliassCounterTitleChange extends PureComponent {
    state = {
        counter: 0
    }
    // 在这个生命周期函数来实现 title 的初始化
    componentDidMount() {
    	document.title = this.state.counter
    }
    // 在这个生命周期里面来实现 title 随着 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 })}></button>
            </div>
        )
    }
  }
  
  

• 使用 useEffect Hook 来实现，从下面代码可以看出，只需要使用一个 useEffect Hook 便可以实现需求，说明 useEffect 会在函数组件第一次渲染页面的时候执行一次，每当状态值发生变化的时候也会执行，它现在(也可以模拟 class 中其他的生命周期函数，后面再说)相当于把 class 中的 componentDidMount 和 componentDidUpdate 俩个生命周期函数合二为一了

  
  import React, { useState, useEffect } from 'react'
  
  function HookCounterChangeTitle() {
      const [counter, setCounter] = useState(0)
  
      // useEffect 这个函数会在 return 中的 UI 渲染到真实的 DOM 上就会回调这个 useEffect 函数，useEffect 这个函数不管是 第一次渲染还是状态发生更新时候的渲染都会执行 useEffect 这个函数，它相当于把 class 中的 componentDidMount 和 componentDidUpdate 俩个生命周期函数合二为一了 
      useEffect(() => {
          document.title = counter
      })
      return (
          <div>
              <h2>当前计数: {counter}</h2>
              <button onClick={e => setCounter(counter + 1)}>+1</button>
          </div>
      )
  }
  

useRef hook

• useRef 返回一个 ref 对象，返回的 ref 对象在组件的整个生命周期保持不变