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

wwj_2016

已于 2022-05-28 16:58:12 修改

阅读量6.1k

点赞数 3

文章标签： react.js javascript 前端

于 2022-05-28 16:52:31 首次发布

本文链接：https://blog.csdn.net/wwj_2016/article/details/125020048

版权

本文详细解析了React中useEffect钩子的不同用法及其生命周期对应关系。通过具体示例对比了useEffect在传入空数组与不传参时的行为差异，前者类似于componentDidMount仅在首次渲染时执行，后者则会在每次渲染时触发。

摘要由CSDN通过智能技术生成

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

useEffect(func,[])：空数组类似componentDidMount的生命周期，在第一次渲染的时候执行func

useEffect(func): 传空，类似于componentDidMount 和 componentDidUpdate一起的生命周期，在组件的每次render执行的时候，func都会执行

import { useEffect } from 'react';

export default ({ name }) => {
  useEffect(() => {
    console.log('useEffect'); //这是一个子组建，只有第一次渲染的时候会打印，当name发生改变的时候，useEffect不会再次执行
  }, []);
  return <div>async test{name}</div>;
};

import { useEffect } from 'react';

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