修改hello，测试了useEffect的生命周期

4 years ago · 633c9e7236
4 changed files with 28 additions and 24 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":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]"]
+[{"/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]"]
--- 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 (
    <div className="App">
-      <LikeButton />
-      {show && <MouseTracker />}
-      <p><button onClick={() => { setShow(!show) }}>toogle</button></p>
-      <p>X: {position.x}, Y: {position.y}</p>
-      <p>{loading ? `小狗读取中` : <img src={dogResult && dogResult.message} />}</p>
+      <Hello message="sasa" />
    </div>
  );
 }
--- 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<IHelloProps> = (props) =>{
-    return <h2>{props.message}</h2>
+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;
--- 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没渲染完都会执行