【无标题】useEffect卸载组件却没有卸载掉定时器出现的问题

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Filled (http://localhost:8000/umi.js:82655:70)
    at div
    at IndexPage
    at Route
    at Switch
    at Router (http://localhost:8000/umi.js:70271:30)
    at RouterComponent (http://localhost:8000/umi.js:9378:23)
    at SrcUmiPlugininitialstateProvider (http://localhost:8000/umi.js:81476:24)
    at SrcUmiPluginmodelProvider (http://localhost:8000/umi.js:81738:23)

得把定时器卸载掉

import React from 'react';
import ReactDom from 'react-dom'

function Filled() {
  const [count,setCount] = React.useState(0);
  const [couTount,setCouTount] = React.useState("Tom");

    function add() {
      //第一种写法  setCount以箭头函数的方式进行写
      // setCount((count)=>{
      //   return count + 1;
      // })
    //  第二种写法
      // @ts-ignore
      setCount(()=>{
        return count+1
      })
    }

    function changeName() {
      // @ts-ignore
      // setCouTount((couTount)=>{
      //   return   "Jurrey"
      // })
      setCouTount("Jerry")
      // @ts-ignore

    }
  //  useEffect  相当于模拟react的生命周期钩子
  // @ts-ignore
  React.useEffect(()=>{
    console.log("11111",count)
  let times =  setInterval(()=>{
   setCount((count)=>{
     return count + 1;
   })
    return ()=>{
     clearInterval(times)
    }
    },1000)
  },[])
    function unmont() {
      // @ts-ignore
      ReactDom.unmountComponentAtNode(document.getElementById("root"))

}

return (
    <div>
      <h2>{count}</h2>
      <h1>{couTount}</h1>
      <button onClick={add}>点我加1</button>
      <button onClick={changeName}>点我更换名字</button>
      <button onClick={unmont}>卸载组件</button>
      </div>
  )

}
export default Filled ;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 React 中,组件卸载是指组件从 DOM 中移除并销毁的过程。当组件不再需要渲染或不再在页面上显示时,React 会自动处理组件卸载。 要在组件卸载时执行特定的操作,你可以使用 `componentWillUnmount` 生命周期方法。在这个方法中,你可以清理定时器、取消订阅、取消网络请求或执行其他必要的清理操作。 在最新版本的 React 中,`componentWillUnmount` 生命周期方法已被废弃,取而代之的是 `componentDidUnmount` 生命周期方法。你可以在这个方法中执行卸载时的清理操作。 下面是一个示例代码,展示了如何使用 `componentDidUnmount` 方法来执行清理操作: ```javascript import React, { Component } from 'react'; class MyComponent extends Component { componentDidMount() { // 在组件挂载后执行一些操作 } componentDidUnmount() { // 在组件卸载时执行一些清理操作 } render() { return ( <div> {/* 组件的渲染内容 */} </div> ); } } export default MyComponent; ``` 请注意,在函数式组件中,你可以使用 `useEffect` 钩子来模拟 `componentDidUnmount` 生命周期方法。使用 `useEffect` 钩子的返回函数即可在组件卸载时执行清理操作。 ```javascript import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // 在组件挂载后执行一些操作 return () => { // 在组件卸载时执行一些清理操作 }; }, []); return ( <div> {/* 组件的渲染内容 */} </div> ); }; export default MyComponent; ``` 希望对你有所帮助!如果你有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值