[react] 请说说什么是useEffect？

Posted 2021-12-19 前端小歌谣

[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>;

个人简介

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

主目录

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