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. http发送

    package cn.com.yitong.wdph.util; import java.io.BufferedReader;import java.io.InputStream;import jav ...

  2. 页面渲染html的过程

    浏览器渲染页面的一般过程: 1.浏览器解析html源码,然后创建一个 DOM树.并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文 ...

  3. Docker+Prometheus+Alertmanager+Webhook钉钉告警

    Docker+Prometheus+Alertmanager+Webhook钉钉告警 1.环境部署 1.1 二进制部署 1.2 docker部署 1.2.1 webhook 1.2.2 alertma ...

  4. 华三交换机NTP配置

    clock protocol ntp ntp-service enable ntp-service unicast-server x.x.x.x clock timezone beijing add ...

  5. 2.centos 7清空文件和文件夹

    1.清空文件 测试文件:a.txt 1)方法一,[root@centos test]# > a.txt [root@centos test]# cat a.txt 1hjbfao hjkl23o ...

  6. 2019牛客暑期多校训练营(第五场)C - generator 2 (BSGS)

    题目链接 题意: 给定\(n,x_0,a,b,p\),有递推式\(x_i = (a \cdot x_{i-1} +b)\%p\). 有\(Q\)个询问,每次询问给定一个\(v\),问是否存在一个最小的 ...

  7. P2120 [ZJOI2007] 仓库建设(斜率优化DP)

    题意:\(1\sim N\) 号工厂,第\(i\) 个工厂有\(P_i\)个成品,第\(i\)个工厂建立仓库需要\(C_i\)的费用,该工厂距离第一个工厂的距离为\(X_i\),编号小的工厂只能往编号 ...

  8. 2019牛客多校 Round9

    Solved:3 Rank:181 H Cutting Bamboos 这个东西好像叫整体二分 #include <bits/stdc++.h> using namespace std; ...

  9. 一张图解决ThreadLocal

    一张图解决ThreadLocal 一.前言 年底梳理知识体系时,研究了一下ThreadLocal的源码,整理了一张核心图. 想着,都走到这一步了,那就写一篇深度解读的文章吧.看过我之前文章的小伙伴都知 ...

  10. read()、readline()、readlines() -- Python

    文本文件:readfile.txt 详细描述: read()                  #一次性读取文本中全部的内容,以字符串的形式返回结果 readline()           #只读取 ...