react hooks & component will unmount & useEffect & clear up

useEffect & return === unmounted

import React, {
// Component,
useState,
// useRef,
useEffect,
} from 'react'; import { getTrackPicsIdImg } from '@/services'; import "./index.css"; import {
Icon,
Popover,
} from "antd"; const IconsSlot = (props) => {
const [unmount, setUnmount] = useState(false);
const [url, setUrl] = useState(null);
const [visible, setVisible] = useState(false); useEffect(() => {
// clear up === unmounted
return () => {
setUnmount(true);
};
}, [unmount]); const handleVisibleChange = () => {
if(!unmount) {
setVisible(false);
}
}; const gotoUserPageById = (id = ``, type = ``, callback) => {
callback(id);
if(id) {
alert(`got user page`, id, type);
}
}; const showScreenShots = (id = ``, type = ``, callback) => {
// callback(id, type);
if(id) {
getTrackPicsIdImg(id)
.then(res => {
const {
url,
} = res.data;
if(url) {
if(!unmount) {
setVisible(true);
setUrl(url);
}
} else {
if(!unmount) {
setVisible(false);
}
}
// console.log(`res.data`, res.data);
});
}
};
const {
icons,
options,
idCallback,
screenShotCallback,
} = props;
const {
// url,
id,
type,// 1 是页面; 2 是控件
} = options;
return(
<>
{
icons[0]
&&
<span className="icon-user-box" onClick={() => gotoUserPageById(id, type, idCallback)}>
<Icon type="user" className="space-span" />
</span>
}
{
!icons[1]
&&
<span className="icon-image-box" onClick={() => showScreenShots(id, type, screenShotCallback)}>
<Popover
content={
<img
src={url}
alt="截图"
className="image-screenshot"
/>
}
visible={visible}
trigger="click"
onVisibleChange={handleVisibleChange}
>
<Icon type="file-image" className="space-span" />
</Popover>
</span>
}
</>
);
}; export default IconsSlot;

https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks


react hooks & need inside function

useRef bug

bug

// ?

// import React from "react";
// import { connect } from 'dva';
import React, {
// Component,
// useRef,
useState,
// useEffect,
} from 'react';
// import ReactDOM from 'react-dom'; import { getTrackPicsIdImg } from '@/services';
// import { checkFetchIsAborting } from '@/utils/urlUtils'; import "./index.css"; import {
Icon,
// Modal,
Popover,
} from "antd"; const IconsSlot = (props) => {
// const imageRef = useRef(null);
const [url, setUrl] = useState(null);
const [visible, setVisible] = useState(false); const handleVisibleChange = () => {
setVisible(false);
}; const gotoUserPageById = (id = ``, type = ``, callback) => {
callback(id);
if(id) {
alert(`got user page`, id, type);
}
}; const showScreenShots = (id = ``, type = ``, callback) => {
// callback(id, type);
// const dom = ReactDOM.findDOMNode(imageRef.current);
if(id) {
getTrackPicsIdImg(id)
.then(res => {
const {
url,
} = res.data;
if(url) {
setVisible(true);
setUrl(url);
// Modal.info({
// wrapClassName: "image-screenshot-box",
// title: '截图',
// content: (
// <div>
// <img
// src={url}
// // src="http://s1.xmcdn.com/yx/user-analysis-fe/last/dist/static/logo.6ecf7074.png"
// alt="screenshot"
// className="image-screenshot"
// />
// </div>
// ),
// onOk() {},
// okText: "关闭",
// });
} else {
setVisible(false);
}
// console.log(`res `, res);
console.log(`res.data`, res.data);
});
}
};
const {
icons,
options,
idCallback,
screenShotCallback,
} = props;
const {
// url,
id,
type,// 1 是页面; 2 是控件
} = options;
return(
<>
{
icons[0]
&&
<span className="icon-user-box" onClick={() => gotoUserPageById(id, type, idCallback)}>
<Icon type="user" className="space-span" />
</span>
}
{
!icons[1]
&&
<span className="icon-image-box" onClick={() => showScreenShots(id, type, screenShotCallback)}>
<Popover
content={
<img
src={url}
alt="截图"
className="image-screenshot"
/>
}
visible={visible}
trigger="click"
onVisibleChange={handleVisibleChange}
>
<Icon type="file-image" className="space-span" />
{/* <Icon type="file-image" className="space-span" ref={imageRef} /> */}
</Popover>
</span>
}
{/* {
!icons[1]
&&
<span className="icon-image-box" onClick={() => showScreenShots(id, type, screenShotCallback)}>
<Icon type="file-image" className="space-span" ref={imageRef} />
</span>
} */}
</>
);
}; export default IconsSlot;

OK


import React, {
useState,
useEffect,
useRef,
} from 'react';
import ReactDOM from 'react-dom'; import StepBox from './StepBox';
import ChartBox from './ChartBox'; import {
STEPS,
} from './STEPS'; import "./index.css"; import {
Row,
Col,
} from "antd"; const stepsShaper = (steps = [], total = 0) => {
const len = steps.length;
return steps.map(
(obj, i) => {
const index = i + 1;
const {
id,
name,
count,
type,
screenshot,
} = obj;
return {
id,
title: name,
num: count,
type,
url: screenshot,
value: (index === len) ? total : steps[index].transRate,
};
}
);
}; const StepsGenerator = (props) => {
const widthRef = useRef(null);
const refClick = () => {
const dom = ReactDOM.findDOMNode(widthRef.current);
const width = dom ? dom.getBoundingClientRect().width : 50;
return width - 50;
};
const [width, setWidth] = useState(null);
useEffect(() => {
const width = refClick();
setWidth(width);
}, [width], refClick);
const {
titleSlot,
iconsSlot,
dataSource,
} = props;
const {
steps,
total,
} = dataSource;
if(!steps.length) {
return(
<Row>
<Col span={24}>
<div className="funel-chart-no-data">
暂无数据!
</div>
</Col>
</Row>
);
}
return stepsShaper(steps, total).map((data, i) => {
return (
<Row className="funnel-chart-container" key={`uid_100${i}`}>
<Col span={8} className="step-box">
<StepBox
step={STEPS[i]}
data={data}
titleSlot={titleSlot}
iconsSlot={iconsSlot}
/>
</Col>
<Col span={16} className="chart-box" ref={widthRef}>
<ChartBox
isFirst={i === 0}
data={data}
refClick={refClick}
/>
</Col>
</Row>
);
});
}; const FunnelChart = (props) => {
const {
titleSlot,
iconsSlot,
dataSource,
} = props;
return (
<>
<StepsGenerator
titleSlot={titleSlot}
iconsSlot={iconsSlot}
dataSource={dataSource}
/>
</>
);
}; export default FunnelChart;

react hooks & component will unmount & useEffect & clear up的更多相关文章

  1. React Hooks 实现react-redux

    Redux 是目前 React 系统中最常用的数据管理工具,它落实并发扬了 Flux 的数据单向流动模式,被实践证明为一种成熟可用的模式. 尽管承受着一些非议,Redux 在 React 数据管理界的 ...

  2. React Hooks vs React Class vs React Function All In One

    React Hooks vs React Class vs React Function All In One React Component Types React Hooks Component ...

  3. [React] Refactor a Class Component with React hooks to a Function

    We have a render prop based class component that allows us to make a GraphQL request with a given qu ...

  4. React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案

    本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例.注意,本文假设了:1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档.(其实有过翻译的想法, ...

  5. React Hooks --- useState 和 useEffect

    首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...

  6. React Hooks: useEffect All In One

    React Hooks: useEffect All In One useEffect https://reactjs.org/docs/hooks-effect.html https://react ...

  7. react hooks useEffect 取消 promise

    react hooks useEffect 取消 promise cancel promise https://github.com/facebook/react/issues/15006#issue ...

  8. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  9. React Hooks用法大全

    前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...

随机推荐

  1. new() 和 make() 的区别 var arr1 = new([5]int) var arr2 [5]int

    Effective Go - The Go Programming Language https://golang.org/doc/effective_go.html#allocation_new A ...

  2. .NET并发编程-函数式编程

    本系列学习在.NET中的并发并行编程模式,实战技巧 函数式编程 和面向过程编程POP(procedure oriented Programming)面向对象编程OOP(object oriented ...

  3. LOJ10096掠夺计划

    题目传送门:https://loj.ac/problem/10096 ----------------------------------------------------------------- ...

  4. 分布式缓存 — redis

    redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存,事件发布或订阅,高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串,哈希,列表,队列,集合结构直接存取, ...

  5. (四)Springboot以jar包方式启动、关闭、重启脚本

    Springboot以jar包方式启动.关闭.重启脚本 1.启动 2.关闭 3.重启 4.脚本授权 SpringBoot: nohup java -jar zlkj-data-server-1.0-S ...

  6. js基础(使用Canvas画图)

    HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像. 图形是在一个特定的上下文中创建的,而上下文对象目前有两种.第一种是2D上下文,可以执行原始的绘图操作, 比如: ...

  7. Java IO--字节流与字符流OutputStream/InputStream/Writer/Reader

    流的概念 程序中的输入输出都是以流的形式保存的,流中保存的实际上全都是字节文件. 字节流与字符流 内容操作就四个类:OutputStream.InputStream.Writer.Reader 字节流 ...

  8. 用鸿蒙开发AI应用(七)触摸屏控制LED

    [小年答谢,新春送礼]免费抽取1000元京东卡+更多新春好礼~查看详情>>> 目录:前言背景知识编译用户程序框架子系统基于AbilityKit开发的Ability总结 前言上一篇,我 ...

  9. LIS(nlogn)算法描述//线性DP经典类型

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  10. hdu 1166 敌兵布阵 线段树区间修改、查询、单点修改 板子题

    题目链接:敌兵布阵 题目: C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视 ...