[react] 请说说什么是useEffect？

useEffect是副作用函数，第一个参数是函数，第二个参数是依赖的数据数组，当依赖数组中的数据变化时，触发第一个参数函数的执行。有以下的几种使用方式

  1. 模拟componentDidMount：常用作初始ajax请求，获取ref节点等操作
import { useEffect } from 'react';
function Demo() {
  useEffect(() => {
    // ...
  }, []);
  return <h1>Demo</h1>;
}
  1. 模拟componentWillUnMount: 用作取消订阅、清除定时器，需要随着组件的卸载而从内存中移除的操作放在这里
import { useEffect } from 'react';
function Demo() {
  useEffect(() => {
    return () => {
      // ...
    }
  }, []);
  return <h1>Demo</h1>;
}
  1. 监听state值的变化，用最新的值进行副作用的操作
import { useState, useEffect } from 'react';
const [userId, setUserId] = useState(null);
function Demo() {
  useEffect(() => {
    if (userId) {
      // ...
    }
  }, [userId]);
  return <h1>Demo</h1>;
}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论











主目录

与歌谣一起通关前端面试题