React（五）UseEffect、UseRef

(一)useEffect

useEffect – React 中文文档

useEffect hook用于模拟以前的class组件的生命周期，但比原本的生命周期有着更强大的功能

1.类组件的生命周期

在类组件编程时，网络请求，订阅等操作都是在生命周期中完成

import React, { Component } from 'react'

export default class App extends Component {
  // 组件挂载后执行
  componentDidMount(){
    // 发送请求
    // 事件总线绑定
    // 创建定时器等
  }
  // 组件更新后执行
  componentDidUpdate(){

  }
  // 组件销毁前执行
  componentWillUnmount(){
    // 事件总线解绑
    // 清除定时器
  }

  render() {
    return (
      <div>App</div>

2.函数式组件的生命周期

函数式组件没有明确的生命周期，使用useEffect来模拟生命周期

useEffect(setup, dependencies?)

在useRffect的第一个参数传入回调函数，执行请求、挂载等操作

useEffect会在组件每次挂载、更新后调用回调

import { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0)

  useEffect(()=>{
    // 发送请求
    // store仓库订阅subscribe
    // 事件总线绑定 eventbus.on
    // 操作外部dom
    document.title = count
  })

  return (
    <>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
    </>
  )
}

如何在组件销毁前取消订阅或者移除绑定？

只需要在第一个回调里返回一个回调函数即可，useEffect会在组件销毁前/组件更新前调用

useEffect(()=>{
    // 发送请求
    // store仓库订阅subscribe
    // 事件总线绑定 eventbus.on
    // 操作外部dom
    document.title = count
    // 计数器
    const time = setInterval(()=>{
      console.log(1);
    },1000)

    return ()=>{
      // store仓库取消订阅 unsubscribe
      // 清除事件总线
      // 清除计数器等操作
      clearInterval(time)
    }
  })

回调函数内的代码太长了

拆分useEffect，每个功能都可以单独写一个useEffect，react会自动处理

  useEffect(()=>{
    // 发送请求
  })
  useEffect(()=>{
    // store仓库订阅subscribe
    return ()=>{
      // store仓库取消订阅 unsubscribe
    }
  })
  useEffect(()=>{
    // 计数器
    const time = setInterval(()=>{
      console.log(count);
    },1000)

    return ()=>{
      // 清除计数器等操作
      clearInterval(time)
    }
  })

执行次数会不会太多了？

向上面那样书写的话，每次update都会执行回调，更新一次dom就请求一次、绑定一次事件这样子也太蠢了，因此useEffect可以传入第二个参数，用来控制依据什么来决定是否执行，和之前useCallback、useMemo一样，都会传入dependencies这个参数

  // 只执行一次
  useEffect(()=>{
    // 发送请求
  },[])
  // 只执行一次
  useEffect(()=>{
    // store仓库订阅subscribe
    return ()=>{
      // store仓库取消订阅 unsubscribe
    }
  },[])
  // count改变才执行
  useEffect(()=>{
    document.title = count
  },[count])

useEffect先简单写到这里，useEffect虽然是模拟生命周期，但它能做的事比生命周期更多，能够根据传入的数组参数判断是否执行

(二)useRef

useRef – React 中文文档

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值

useRef(initialValue)

initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略

useRef hook主要有两个功能：

绑定dom元素
保存一个数据，在整个生命周期中可以保存不变

1.绑定dom元素

初始化const xxx = useRef();通过ref={xxx}来绑定ref

import { useState, useRef } from 'react'
function App() {
  const [count, setCount] = useState(0)

  const nameRef = useRef()
  console.log(nameRef.current);

  return (
    <>
      <div ref={nameRef}>csq</div>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
    </>
  )
}

通过xxx.current获取该dom元素

2.绑定一个值（解决闭包陷阱）

先说说闭包陷阱：

闭包陷阱是指使用react hooks的时候，由于闭包特性，在某些函数内获取useState或者props的值时获取到的是旧的值，而实际值已经改变

使用 ref 可以确保：

可以在重新渲染之间 存储信息（普通对象存储的值每次渲染都会重置）。
改变它 不会触发重新渲染（状态变量会触发重新渲染）。
对于组件的每个副本而言，这些信息都是本地的（外部变量则是共享的）。

改变 ref 不会触发重新渲染，所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要，使用 state 代替。

将新增count的操作放到useCallback回调里，会导致读取到的count始终为0

const [count, setCount] = useState(0)

  const increment = useCallback(()=>{
    setCount(count+1) // set(0+1)
    console.log(count); // 0
  },[])

  return (
    <>
      <div>{count}</div>
      <button onClick={()=>increment()}>加1</button>
    </>
  )

因为useCallback传入的依赖为空，意味着increment函数只生成一次，只能读取到生成时count的状态，即0（我感觉我也是蒙的）

这样就形成了闭包陷阱！

解决办法：

(1)添加useCallback的依赖即可

const increment = useCallback(()=>{
    setCount(count+1) 
    console.log(count)
  },[count])

(2)使用useRef

const [count, setCount] = useState(0)
  const countRef = useRef()
  // count改变会引起重新渲染，这样countRef的值每次都和count相等
  countRef.current = count

  const increment = useCallback(()=>{
    setCount(countRef.current+1) 
  },[])

  return (
    <>
      <div>{count}</div>
      <button onClick={()=>increment()}>加1</button>
    </>
  )

这里肯定不是应用useRef的最好场景，毕竟加个依赖项就解决了

但使用useRef的话，increment函数就不会重新加载了！