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,而对于容器组件,函数组件就显得无能为力,我们依赖 ...
随机推荐
- http发送
package cn.com.yitong.wdph.util; import java.io.BufferedReader;import java.io.InputStream;import jav ...
- 页面渲染html的过程
浏览器渲染页面的一般过程: 1.浏览器解析html源码,然后创建一个 DOM树.并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文 ...
- Docker+Prometheus+Alertmanager+Webhook钉钉告警
Docker+Prometheus+Alertmanager+Webhook钉钉告警 1.环境部署 1.1 二进制部署 1.2 docker部署 1.2.1 webhook 1.2.2 alertma ...
- 华三交换机NTP配置
clock protocol ntp ntp-service enable ntp-service unicast-server x.x.x.x clock timezone beijing add ...
- 2.centos 7清空文件和文件夹
1.清空文件 测试文件:a.txt 1)方法一,[root@centos test]# > a.txt [root@centos test]# cat a.txt 1hjbfao hjkl23o ...
- 2019牛客暑期多校训练营(第五场)C - generator 2 (BSGS)
题目链接 题意: 给定\(n,x_0,a,b,p\),有递推式\(x_i = (a \cdot x_{i-1} +b)\%p\). 有\(Q\)个询问,每次询问给定一个\(v\),问是否存在一个最小的 ...
- P2120 [ZJOI2007] 仓库建设(斜率优化DP)
题意:\(1\sim N\) 号工厂,第\(i\) 个工厂有\(P_i\)个成品,第\(i\)个工厂建立仓库需要\(C_i\)的费用,该工厂距离第一个工厂的距离为\(X_i\),编号小的工厂只能往编号 ...
- 2019牛客多校 Round9
Solved:3 Rank:181 H Cutting Bamboos 这个东西好像叫整体二分 #include <bits/stdc++.h> using namespace std; ...
- 一张图解决ThreadLocal
一张图解决ThreadLocal 一.前言 年底梳理知识体系时,研究了一下ThreadLocal的源码,整理了一张核心图. 想着,都走到这一步了,那就写一篇深度解读的文章吧.看过我之前文章的小伙伴都知 ...
- read()、readline()、readlines() -- Python
文本文件:readfile.txt 详细描述: read() #一次性读取文本中全部的内容,以字符串的形式返回结果 readline() #只读取 ...