阅读 402

React Hook 学习笔记之-useEffect

执行初始化操作的时机

一般来说,业务组件经常会遇到要通过发起ajax请求来获取业务数据并且执行初始化操作的场景。 在使用class component编程时,我们就可以在class component提供的生命周期钩子函数(比如componentDidMount,constructor等)执行这个操作。如果转到React hooks之后,function component里是没有生命周期钩子函数的,那这个初始化操作怎么办呢?总不能每次遇到这种场景都使用class component来做吧?

解决方案:使用useEffect(想知道useEffect是什么的话,可以点击这里)

useEffect,就是执行有副作用的操作,你可以把它当成componentDidMount,componentDidUpdate,和componentWillUnmount的集合.它的函数声明如下

useEffect(effect: React.EffectCallback, inputs?: ReadonlyArray<any> | undefined)
复制代码
import React,{useEffect} from 'react'
export function BusinessComponent(){
	const initData = async() => {
    	// 发起请求并执行初始化操作
    }
    // 执行初始化操作,需要注意的是,如果你只是想在渲染的时候初始化一次数据,那么第二个参数必须传空数组。
    useEffect(()=>{
      initData();
    }, []);
    return (<div></div>)
}
复制代码

需要注意的是,这里的useEffect的第二个参数必须传空数组,这样它就等价于只在componentDidMount的时候执行。如果不传第二个参数的话,它就等价于componentDidMountcomponentDidUpdate

做一些清理操作

由于我们在实际开发中,经常会遇到需要做一些副作用的场景,比如轮训操作(定时器、轮训请求等)、使用浏览器原生的事件监听机制而不用react的事件机制(这种情况下,组件销毁的时候,需要用户主动去取消事件监听)等。使用class component编程的时候,我们一般都在componentWillUnmount(卸载阶段)的时候去做清理操作,可是使用react hooks的时候,我们要如何处理?

解决方案:使用useEffect第一个参数的返回值(return)

如果useEffect的第一个参数返回了函数的时候,react会在每一次执行新的effects之前执行这个函数来做一些清理操作。因此,我们可以使用它来执行一些清理操作。

例子:比如我们要做一个二维码组件,我们需要根据传入的userId不断轮询地向后台发请求查询扫描二维码的状态,这种情况下,我们就需要在组件unmount的时候清理掉轮询操作。代码如下:

import React, { useEffect } from 'react'

export function QRCode(url, userId) {
  // 根据userId查询扫描状态
  const pollingQueryingStatus = async () => {
  }
  // 取消轮询
  const stopPollingQueryStatus = async() => {
  }

  useEffect(() => {
    pollingQueryingStatus();

    return stopPollingQueryStatus;
  }, []);

  // 根据url生成二维码
  return (<div></div>)
}

复制代码

但是,有时候我们可能需要执行多次清理操作。还是举上面的例子,我们需要在用户传入新的userId的时候,去执行新的查询的操作,同时我们还需要清除掉旧的轮询操作。想一下怎么做比较好。 其实对这种情况,官方也已经给出了解决方案了,useEffect的第二个参数是触发effects的关键,如果用户传入了第二个参数,那么只有在第二个参数的值发生变化(以及首次渲染)的时候,才会触发effects。因此,我们只需要将上面的代码改一下:

mport React, { useEffect } from 'react'

export function QRCode(url, userId) {
  // 根据userId查询扫描状态
  const pollingQueryingStatus = async () => {
  }

  const stopPollingQueryStatus = async() => {
  }
  // 我们只是将useEffect的第二个参数加了个userId
  useEffect(() => {
    pollingQueryingStatus();

    return stopPollingQueryStatus;
  }, [userId]);

  // 根据url生成二维码
  return (<div></div>)
}
复制代码

我们只是在useEffect的第二个,加入一个userId.这样的话,userId的每一次变化都会先触发stopPollingQueryStatus,之后再执行effects。

借鉴:可乐好喝不胖

文章分类
前端
文章标签