什么是闭包？

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

React面试题第一版专栏收录该内容

32 篇文章

订阅专栏

useState闭包情况

import React from "react";
import { useState } from "react";

export default function Closure() {
  return (
    <div>
      闭包陷阱
      <UseState />
    </div>
  );
}

const UseState = () => {
  const [num, setNum] = useState(0);
  const handleClick = () => {
    setTimeout(() => {
      setNum(num + 1);
    }, 1000);
  };

  return (
    <div>
      <span>{num}</span>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

useEffect闭包情况

import React from "react";
import { useState, useEffect } from "react";

export default function Closure() {
  return (
    <div>
      闭包陷阱
      
      <UseEffect />
    </div>
  );
}


const UseEffect = () => {
  const [num, setNum] = useState(0);
  useEffect(() => {
    setInterval(() => {
      console.log(num);
    }, 1000);
  }, []);

  return (
    <div>
      <span>{num}</span>
      <button onClick={() => setNum(num + 1)}>+</button>
    </div>
  );
};