使用useRef

4 years ago · 32631c4aff
4 changed files with 17 additions and 6 deletions
--- 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]"]
+[{"/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    <div className=\"App\">\n      <LikeButton />\n      {show && <MouseTracker />}\n      <p><button onClick={() => { setShow(!show) }}>toogle</button></p>\n      <p>X: {position.x}, Y: {position.y}</p>\n      <p>{loading ? `小狗读取中` : <img src={dogResult && dogResult.message} />}</p>\n    </div>\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]"]
--- 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 (
    <div className="App">
--- 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 (
        <div>
-            <button onClick={() => { setObj({ like: obj.like + 1, on: obj.on }) }}>
+            <button onClick={() => { setObj({ like: obj.like + 1, on: obj.on }); likeRef.current++ }}>
                点赞：{obj.like}
            </button>
+            <button onClick={handleAlertClick}>alert</button>
        </div>
    )
 }
--- 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];
 }