blobt
4 years ago
8 changed files with 79 additions and 95 deletions
-
2.eslintcache
-
10package-lock.json
-
2package.json
-
14src/App.tsx
-
60src/components/Button/button.tsx
-
31src/components/Hello.tsx
-
32src/components/LikeButton.tsx
-
23src/components/MouseTracker.tsx
@ -1 +1 @@ |
|||
[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8"},{"size":508,"mtime":1609414907652,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":273,"mtime":1609509849169,"results":"12","hashOfConfig":"10"},{"size":627,"mtime":1609135687431,"results":"13","hashOfConfig":"10"},{"size":1138,"mtime":1609126836504,"results":"14","hashOfConfig":"10"},{"size":777,"mtime":1608947625775,"results":"15","hashOfConfig":"10"},{"size":535,"mtime":1608965352064,"results":"16","hashOfConfig":"10"},{"size":485,"mtime":1608970157307,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"46l3t",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["36","37"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",["38"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],["39","40"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["41","42"],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":13,"column":8,"nodeType":"49","endLine":13,"endColumn":10,"suggestions":"50"},{"ruleId":"43","replacedBy":"51"},{"ruleId":"45","replacedBy":"52"},{"ruleId":"47","severity":1,"message":"53","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12},{"ruleId":"47","severity":1,"message":"55","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12,"suggestions":"56"},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.","ArrayExpression",["59"],["57"],["58"],"React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["60"],"no-global-assign","no-unsafe-negation",{"desc":"61","fix":"62"},{"desc":"63","fix":"64"},"Update the dependencies array to be: [data]",{"range":"65","text":"66"},"Update the dependencies array to be: [url]",{"range":"67","text":"68"},[280,282],"[data]",[415,419],"[url]"] |
|||
[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx":"6"},{"size":508,"mtime":1609414907652,"results":"7","hashOfConfig":"8"},{"size":425,"mtime":1608882568140,"results":"9","hashOfConfig":"8"},{"size":425,"mtime":1609589147292,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1301,"mtime":1609588234575,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"46l3t",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["28","29"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],["30","31"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["32","33"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"34","replacedBy":"38"},{"ruleId":"36","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12},{"ruleId":"40","severity":1,"message":"43","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12,"suggestions":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],["45"],["46"],"react-hooks/exhaustive-deps","React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["47"],"no-global-assign","no-unsafe-negation",{"desc":"48","fix":"49"},"Update the dependencies array to be: [url]",{"range":"50","text":"51"},[415,419],"[url]"] |
|||
@ -0,0 +1,60 @@ |
|||
import React from 'react'; |
|||
import classNames from 'classnames'; |
|||
|
|||
export enum ButtonSize { |
|||
Large = 'lg', |
|||
Samll = 'sm' |
|||
} |
|||
|
|||
export enum ButtonType { |
|||
Primary = 'primary', |
|||
Default = 'default', |
|||
Danger = 'danger', |
|||
Link = 'link' |
|||
} |
|||
|
|||
interface BaseButtonProps { |
|||
className?: string; |
|||
disabled?: boolean; |
|||
size?: ButtonSize; |
|||
btnType?: ButtonType; |
|||
children: React.ReactNode; |
|||
href?: string; |
|||
} |
|||
|
|||
const Button: React.FC<BaseButtonProps> = (props) => { |
|||
const { btnType, disabled, size, children, href } = props; |
|||
|
|||
const classes = classNames('btn', { |
|||
[`btn-${btnType}`]: btnType, |
|||
[`btn-${size}`]: size, |
|||
'disabled': (btnType === ButtonType.Link) && disabled |
|||
}); |
|||
|
|||
if (btnType === ButtonType.Link && href) { |
|||
return ( |
|||
<a |
|||
className={classes} |
|||
href={href} |
|||
> |
|||
{children} |
|||
</a> |
|||
); |
|||
} else { |
|||
return ( |
|||
<button |
|||
className={classes} |
|||
disabled={disabled} |
|||
> |
|||
{children} |
|||
</button> |
|||
); |
|||
} |
|||
} |
|||
|
|||
Button.defaultProps = { |
|||
disabled: false, |
|||
btnType: ButtonType.Default |
|||
} |
|||
|
|||
export default Button; |
|||
@ -1,31 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
|
|||
|
|||
interface IHelloProps { |
|||
message: string; |
|||
} |
|||
|
|||
const Hello: React.FC<IHelloProps> = (props) => { |
|||
const [data, setData] = useState(1); |
|||
|
|||
useEffect(() => { |
|||
console.log("use effect - " + data); |
|||
}, []); |
|||
|
|||
useEffect(() => { |
|||
console.log("use effect2 - " + data); |
|||
}); |
|||
|
|||
function click() { |
|||
const d: any = data + 1; |
|||
setData(d); |
|||
} |
|||
return ( |
|||
<> |
|||
<h2>{props.message} {data}</h2> |
|||
<button onClick={click}> button </button> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
export default Hello; |
|||
@ -1,32 +0,0 @@ |
|||
import React, { useState, useEffect, useRef } from 'react'; |
|||
|
|||
const LikeButton: React.FC = () => { |
|||
//obj是存储容器，setObj是设置容器的函数名
|
|||
const [obj, setObj] = useState({ like: 0, on: true }); |
|||
//使用useRef,在所有的render中数据都保持一直，修改这个变量也不会引起组件从新render
|
|||
const likeRef = useRef(0); |
|||
|
|||
//这个useeffect没渲染完都会执行
|
|||
useEffect(() => { |
|||
console.log("like button effect") |
|||
document.title = `点击了${obj.like}次`; |
|||
}, [obj.like]); //第二个参数 [obj.like]， 表示只有obj.like发生变化，才会触发effect
|
|||
|
|||
function handleAlertClick() { |
|||
setTimeout(() => { |
|||
setTimeout(() => { |
|||
alert('you haved click ' + obj.like + ', you haved click ' + likeRef.current); |
|||
}, 3000) |
|||
}); |
|||
} |
|||
return ( |
|||
<div> |
|||
<button onClick={() => { setObj({ like: obj.like + 1, on: obj.on }); likeRef.current++ }}> |
|||
点赞：{obj.like} |
|||
</button> |
|||
<button onClick={handleAlertClick}>alert</button> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default LikeButton; |
|||
@ -1,23 +0,0 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
|
|||
const MouseTracker: React.FC = () => { |
|||
const [position, setPosition] = useState({ x: 0, y: 0 }); |
|||
useEffect(() => { |
|||
|
|||
const updateMouse = (e: MouseEvent) => { |
|||
console.log("updateMouse"); |
|||
setPosition({ x: e.clientX, y: e.clientY }); |
|||
} |
|||
|
|||
document.addEventListener('click', updateMouse);console.log("addEvent"); |
|||
|
|||
//因为每次都会添加监听器，所以这里要返回一个清除监听器的函数
|
|||
return () => { |
|||
console.log("removeEvent"); |
|||
document.removeEventListener('click', updateMouse); |
|||
} |
|||
},[]); |
|||
return (<p>X: {position.x}, Y: {position.y}</p>); |
|||
} |
|||
|
|||
export default MouseTracker; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue