首页 > 其他分享 >react hooks 中 useEffect 第二个参数,不传和传空数组的区别

react hooks 中 useEffect 第二个参数,不传和传空数组的区别

时间:2022-09-07 14:36:07浏览次数:100  
标签:不传 hooks 数组 react func 传空 useEffect name

之前一直觉得,useEffect的第二个参数传空数组或者不传,没什么区别来着。
今天试试确实是有所不同:

  • useEffect(func,[]):空数组类似 componentDidMount 的生命周期,只在第一次 render 的时候执行func
  • useEffect(func): 类似于 componentDidMountcomponentDidUpdate 一起的生命周期,在组件的每次 render 执行或更新的时候,func都会执行
import { useEffect } from 'react';
 
export default ({ name }) => {

  /**
   * 传空数组:只有第一次渲染的时候会打印。
   * 当name发生改变的时候,useEffect不会再次执行。
   */
  useEffect(() => {
    console.log('useEffect'); 
  }, []);

  return <div>async test{name}</div>;
};

import { useEffect } from 'react';
 
export default ({ name }) => {

  /**
   * 不传入第二个参数,当第一次渲染会执行打印。
   * 后续,每一次name有变化,都会打印
   */
  useEffect(() => {
    console.log('useEffect');
  });
  return <div>async test{name}</div>;
};


ref:
https://blog.csdn.net/wwj_2016/article/details/125020048

标签:不传,hooks,数组,react,func,传空,useEffect,name
From: https://www.cnblogs.com/eddyz/p/16665283.html

相关文章