"React中useEffect的依赖数组：空数组与不写数组的区别"

在React中，useEffect 是一个用来处理副作用操作的Hook。当你在使用useEffect时，可以传入一个依赖数组作为第二个参数。

当依赖数组为空时（[]），useEffect中的回调函数只会在组件挂载和卸载时执行。这意味着它只会执行一次，类似于类组件中的componentDidMount和componentWillUnmount。

useEffect(() => {  // 这里的代码只会在组件挂载和卸载时执行}, []);

例如：

//10秒内连续点击按钮5次，控制台的输出结果是什么
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      console.log(count)
    }, 10 * 1000);
  },[]) 
  //控制台只会输出一个0
  //因为count更新只是组件状态更新，而此时的useeffect只在组件加载和卸载时候执行只执行一次
  
   <button onClick={() =>{setCount(count+1)}}>点击count加1</button>

2. 当你不传入依赖数组时，useEffect中的回调函数会在每次组件渲染时都执行。这意味着它会在组件挂载、更新和卸载时都执行。

useEffect(() => {  // 这里的代码会在每次组件渲染时执行});

例如：

//10秒内连续点击按钮5次，控制台的输出结果是什么
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      console.log(count)
    }, 10 * 1000);
  }) 
  //控制台只会输出0，1，2，3，4，5
  //因为count更新，组件状态更新会重新渲染组件，而此时的useeffect在组件更新渲染的时候都会执行所以会执行对应的点击次数次在控制台中打印对应的次数
  
   <button onClick={() =>{setCount(count+1)}}>点击count加1</button>

因此，如果你希望useEffect中的回调函数只在组件挂载和卸载时执行，你可以传入一个空的依赖数组；如果你希望useEffect中的回调函数在每次组件渲染时都执行，你可以不传入依赖数组。