react hooks & component will unmount & useEffect & clear up
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的更多相关文章
- React Hooks 实现react-redux
Redux 是目前 React 系统中最常用的数据管理工具,它落实并发扬了 Flux 的数据单向流动模式,被实践证明为一种成熟可用的模式. 尽管承受着一些非议,Redux 在 React 数据管理界的 ...
- 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 ...
- [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 ...
- React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例.注意,本文假设了:1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档.(其实有过翻译的想法, ...
- React Hooks --- useState 和 useEffect
首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...
- React Hooks: useEffect All In One
React Hooks: useEffect All In One useEffect https://reactjs.org/docs/hooks-effect.html https://react ...
- react hooks useEffect 取消 promise
react hooks useEffect 取消 promise cancel promise https://github.com/facebook/react/issues/15006#issue ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- React Hooks用法大全
前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...
随机推荐
- 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 ...
- .NET并发编程-函数式编程
本系列学习在.NET中的并发并行编程模式,实战技巧 函数式编程 和面向过程编程POP(procedure oriented Programming)面向对象编程OOP(object oriented ...
- LOJ10096掠夺计划
题目传送门:https://loj.ac/problem/10096 ----------------------------------------------------------------- ...
- 分布式缓存 — redis
redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存,事件发布或订阅,高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串,哈希,列表,队列,集合结构直接存取, ...
- (四)Springboot以jar包方式启动、关闭、重启脚本
Springboot以jar包方式启动.关闭.重启脚本 1.启动 2.关闭 3.重启 4.脚本授权 SpringBoot: nohup java -jar zlkj-data-server-1.0-S ...
- js基础(使用Canvas画图)
HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像. 图形是在一个特定的上下文中创建的,而上下文对象目前有两种.第一种是2D上下文,可以执行原始的绘图操作, 比如: ...
- Java IO--字节流与字符流OutputStream/InputStream/Writer/Reader
流的概念 程序中的输入输出都是以流的形式保存的,流中保存的实际上全都是字节文件. 字节流与字符流 内容操作就四个类:OutputStream.InputStream.Writer.Reader 字节流 ...
- 用鸿蒙开发AI应用(七)触摸屏控制LED
[小年答谢,新春送礼]免费抽取1000元京东卡+更多新春好礼~查看详情>>> 目录:前言背景知识编译用户程序框架子系统基于AbilityKit开发的Ability总结 前言上一篇,我 ...
- LIS(nlogn)算法描述//线性DP经典类型
题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...
- hdu 1166 敌兵布阵 线段树区间修改、查询、单点修改 板子题
题目链接:敌兵布阵 题目: C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视 ...