From 633c9e723690b0f07d07cf9b68d22469751d38f6 Mon Sep 17 00:00:00 2001 From: blobt Date: Mon, 28 Dec 2020 14:39:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9hello=EF=BC=8C=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E4=BA=86useEffect=E7=9A=84=E7=94=9F=E5=91=BD=E5=91=A8?= =?UTF-8?q?=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- src/App.tsx | 21 +++------------------ src/components/Hello.tsx | 27 +++++++++++++++++++++++---- src/components/LikeButton.tsx | 2 +- 4 files changed, 28 insertions(+), 24 deletions(-) diff --git a/.eslintcache b/.eslintcache index ff38469..557162d 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":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 +[{"/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":226,"mtime":1609134973403,"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]"] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index ed5f57e..9c39857 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,12 @@ -import React, { useState } from 'react'; +import React from 'react'; import './App.css'; -import LikeButton from './components/LikeButton'; -import MouseTracker from './components/MouseTracker'; -import useMousePosition from './hooks/useMousePosition'; -import useURLLoader from './hooks/useURLLoader'; +import Hello from './components/Hello'; -interface IShowResult { - message: string; - status: string; -} const App: React.FC = () => { - const [show, setShow] = useState(true); - const position = useMousePosition(); - const [data, loading] = useURLLoader("https://dog.ceo/api/breeds/image/random",[show]); - const dogResult = data as IShowResult; return (
- - {show && } -

-

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

-

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

+
); } diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx index 98b67a6..13d4c67 100755 --- a/src/components/Hello.tsx +++ b/src/components/Hello.tsx @@ -1,12 +1,31 @@ +import React, { useEffect, useState } from 'react'; -import React from 'react'; interface IHelloProps { - message: string + message: string; } -const Hello: React.FC = (props) =>{ - return

{props.message}

+const Hello: React.FC = (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 ( + <> +

{props.message} {data}

+ + + ) } export default Hello; \ No newline at end of file diff --git a/src/components/LikeButton.tsx b/src/components/LikeButton.tsx index 58e3d3c..9b6426d 100755 --- a/src/components/LikeButton.tsx +++ b/src/components/LikeButton.tsx @@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react'; const LikeButton: React.FC = () => { //obj是存储容器，setObj是设置容器的函数名 const [obj, setObj] = useState({ like: 0, on: true }); - //使用useRef,在所有的render中数据都保持一直 + //使用useRef,在所有的render中数据都保持一直，修改这个变量也不会引起组件从新render const likeRef = useRef(0); //这个useeffect没渲染完都会执行