From 32631c4affbf9afd1c2f9559dd280859b6f40c83 Mon Sep 17 00:00:00 2001 From: blobt Date: Mon, 28 Dec 2020 11:40:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8useRef?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- src/App.tsx | 2 +- src/components/LikeButton.tsx | 17 ++++++++++++++--- src/hooks/useURLLoader.tsx | 2 +- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/.eslintcache b/.eslintcache index d3fb317..ff38469 100644 --- a/.eslintcache +++ b/.eslintcache @@ -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":500,"mtime":1608887700017,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":909,"mtime":1608965553659,"results":"12","hashOfConfig":"10"},{"size":196,"mtime":1608886679432,"results":"13","hashOfConfig":"10"},{"size":717,"mtime":1608950399012,"results":"14","hashOfConfig":"10"},{"size":777,"mtime":1608947625775,"results":"15","hashOfConfig":"10"},{"size":535,"mtime":1608965352064,"results":"16","hashOfConfig":"10"},{"size":483,"mtime":1608965723456,"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["35","36"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",["37"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["38"],{"ruleId":"39","replacedBy":"40"},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","severity":1,"message":"44","line":24,"column":31,"nodeType":"45","endLine":24,"endColumn":75},{"ruleId":"46","severity":1,"message":"47","line":14,"column":8,"nodeType":"48","endLine":14,"endColumn":10,"suggestions":"49"},"no-native-reassign",["50"],"no-negated-in-lhs",["51"],"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.","ArrayExpression",["52"],"no-global-assign","no-unsafe-negation",{"desc":"53","fix":"54"},"Update the dependencies array to be: [url]",{"range":"55","text":"56"},[415,417],"[url]"] \ No newline at end of file +[{"/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":500,"mtime":1608887700017,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":916,"mtime":1608965944428,"results":"12","hashOfConfig":"10"},{"size":196,"mtime":1608886679432,"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"20"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"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",["38"],"import React, { useState } from 'react';\nimport './App.css';\nimport LikeButton from './components/LikeButton';\nimport MouseTracker from './components/MouseTracker';\nimport useMousePosition from './hooks/useMousePosition';\nimport useURLLoader from './hooks/useURLLoader';\n\ninterface IShowResult {\n message: string;\n status: string;\n}\n\nconst App: React.FC = () => {\n const [show, setShow] = useState(true);\n const position = useMousePosition();\n const [data, loading] = useURLLoader(\"https://dog.ceo/api/breeds/image/random\",[show]);\n const dogResult = data as IShowResult;\n return (\n
\n \n {show && }\n

\n

X: {position.x}, Y: {position.y}

\n

{loading ? `小狗读取中` : }

\n
\n );\n}\n\nexport default App;\n","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["39","40"],{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","severity":1,"message":"46","line":24,"column":31,"nodeType":"47","endLine":24,"endColumn":75},{"ruleId":"48","severity":1,"message":"49","line":14,"column":8,"nodeType":"50","endLine":14,"endColumn":12},{"ruleId":"48","severity":1,"message":"51","line":14,"column":8,"nodeType":"50","endLine":14,"endColumn":12,"suggestions":"52"},"no-native-reassign",["53"],"no-negated-in-lhs",["54"],"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","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.",["55"],"no-global-assign","no-unsafe-negation",{"desc":"56","fix":"57"},"Update the dependencies array to be: [url]",{"range":"58","text":"59"},[415,419],"[url]"] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index de06095..ed5f57e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ interface IShowResult { const App: React.FC = () => { const [show, setShow] = useState(true); const position = useMousePosition(); - const [data, loading] = useURLLoader("https://dog.ceo/api/breeds/image/random"); + const [data, loading] = useURLLoader("https://dog.ceo/api/breeds/image/random",[show]); const dogResult = data as IShowResult; return (
diff --git a/src/components/LikeButton.tsx b/src/components/LikeButton.tsx index 7127336..58e3d3c 100755 --- a/src/components/LikeButton.tsx +++ b/src/components/LikeButton.tsx @@ -1,19 +1,30 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; const LikeButton: React.FC = () => { //obj是存储容器，setObj是设置容器的函数名 const [obj, setObj] = useState({ like: 0, on: true }); + //使用useRef,在所有的render中数据都保持一直 + const likeRef = useRef(0); //这个useeffect没渲染完都会执行 useEffect(() => { console.log("like button effect") document.title = `点击了${obj.like}次`; - },[obj.like]); //第二个参数 [obj.like]， 表示只有obj.like发生变化，才会触发effect + }, [obj.like]); //第二个参数 [obj.like]， 表示只有obj.like发生变化，才会触发effect + + function handleAlertClick() { + setTimeout(() => { + setTimeout(() => { + alert('you haved click ' + obj.like + ', you haved click ' + likeRef.current); + }, 3000) + }); + } return (
- +
) } diff --git a/src/hooks/useURLLoader.tsx b/src/hooks/useURLLoader.tsx index fca8508..e8efe25 100755 --- a/src/hooks/useURLLoader.tsx +++ b/src/hooks/useURLLoader.tsx @@ -11,7 +11,7 @@ const useURLLoader = (url: string, deps: any[] = []) => { setData(result.data); setLoading(false); }); - }, []); + }, deps); return [data, loading]; }