update

Author: introvert-y

src/page/commonHook/index.js

@@ -0,0 +1,22 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+function useWinSize() {
+	const [size, setSize] = useState({});
+
+	const onResize = useCallback(() => {
+		setSize({
+			width: document.documentElement.clientWidth,
+			height: document.documentElement.clientHeight,
+		});
+	}, []);
+
+	useEffect(() => {
+		window.addEventListener("resize", onResize);
+		return () => {
+			console.log("remove");
+			window.removeEventListener("resize", onResize);
+		};
+	});
+	return size;
+}
+export default useWinSize;

src/page/hookTest/index.js

@@ -1,27 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
-
-function useWinSize() {
-	const [size, setSize] = useState({
-		width: document.documentElement.clientWidth,
-		height: document.documentElement.clientHeight,
-	});
-
-	const onResize = useCallback(() => {
-		setSize({
-			width: document.documentElement.clientWidth,
-			height: document.documentElement.clientHeight,
-		});
-	}, []);
-
-	useEffect(() => {
-		window.addEventListener("resize", onResize);
-		return () => {
-			window.removeEventListener("resize", onResize);
-		};
-	});
-
-	return size;
-}
+import React from "react";
+import useWinSize from "../commonHook/index";
 
 function Example() {
 	const size = useWinSize();
@@ -33,4 +11,5 @@ function Example() {
 		</>
 	);
 }
+
 export default Example;

src/page/useCallback/index.js

@@ -0,0 +1,28 @@
+import React, { useState, useCallback } from "react";
+
+function Page() {
+	const [count, setCount] = useState(1);
+	function calculate(count) {
+		let sum = 0;
+		for (let i = 0; i < count * 100; i += 1) {
+			sum += i;
+		}
+		return sum;
+	}
+	const expensive = useCallback(calculate(count), [count]);
+
+	return (
+		<div>
+			<h4>
+				{count}-{calculate(count)}
+			</h4>
+			<div>
+				<button type="button" onClick={() => setCount(count + 1)}>
+					add
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default Page;

src/page/useMemo/index.js

@@ -18,7 +18,6 @@ function Page() {
 				记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于
 				useEffect 的适用范畴，而不是 useMemo。 如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值.
 				<br />
-				useCallback(fn, deps) 相当于 useMemo(() =&gt; fn, deps)
 			</h3>
 			<h4>
 				{count}-{expensive}

src/router/index.js

@@ -12,6 +12,7 @@ import Optimize from "../page/Optimize/index";
 import EchartBox from "../page/echartBox/index";
 import ChinaMap from "../page/chinaMap/index";
 import UseMemo from "../page/useMemo/index";
+import UseCallback from "../page/useCallback/index";
 import Memo from "../page/memoParent/index";
 import HeightEchart from "../page/heightEchart/index";
 import FormBox from "../page/form/index";
@@ -118,6 +119,9 @@ function Header() {
 			<li>
 				<Link to="/useMemo">hook之useMemo，相当于vue中的计算属性computed</Link>
 			</li>
+			<li>
+				<Link to="/useCallback">hook之useCallback，useCallback(fn, deps) 相当于 useMemo(() =&gt; fn, deps)</Link>
+			</li>
 			<li>
 				<Link to="/form">form表单</Link>
 			</li>
@@ -216,6 +220,7 @@ function App({ value, name }) {
 						<Route path="/echart" component={EchartBox} />
 						<Route path="/map" component={ChinaMap} />
 						<Route path="/useMemo" component={UseMemo} />
+						<Route path="/useCallback" component={UseCallback} />
 						<Route path="/memo" component={Memo} />
 						<Route path="/heightEchart" component={HeightEchart} />
 						<Route path="/form" component={FormBox} />