react day4：useMemo

20_React.js_VIP22/React.js快速进坑.md

@@ -779,6 +779,8 @@ setCount((preCount) => preCount + 1);
 >
 > 其本质，就是用来实现一些生命周期的钩子。
 
+> useEffect(setup, dependencies?)
+
 那么，useEffect 能帮助开发者实现那些生命周期钩子的效果呢？
 
 1. 每一次组件渲染时，都希望执行一些副作用
@@ -816,14 +818,59 @@ setCount((preCount) => preCount + 1);
 4. 监听state或者props，只要有一发生变化就会执行一些副作用
 
    ```jsx
+   // 当组件首次渲染后 以及 title发生变化时 会执行
+   useEffect(() => {
+     console.log('title发生变化');
+   }, [title]);
    ```
 
-   
-
 ### 8.3 useMemo
 
+> `useMemo` is a React Hook that lets you cache the result of a calculation between re-renders.
+>
+> ```js
+> const cachedValue = useMemo(calculateValue, dependencies)
+> ```
+
+**参数**
+
+- calculateValue：函数类型，返回一个想要缓存的值。React会在组件首次渲染时调用此函数或者当依赖发生变化时，其他情况都会读取缓存值。
+- dependencies：计算缓存值所依赖的state或者props。
+
+**返回值**
+
+在最初的渲染中，useMemo返回调用calculateValue的结果。
+
+在接下来的渲染过程中，它要么返回上次渲染时已经存储的值（如果依赖关系没有改变），要么再次调用calculateValue，并返回calculateValue已经返回的结果。
+
+```jsx
+function TestUseMemo() {
+  let [c, setC] = useState(10);
+
+  let doubleC = useMemo(() => c * 2, [c]);
+
+  return (
+    <div>
+      <p>{c}</p>
+      <p>{doubleC}</p>
+    </div>
+  );
+}
+
+export default TestUseMemo;
+```
+
+**小结**
+
+1. useMemo 的使用 是为了提高性能的
+2. 如果 依赖 频繁发生变化的话，useMemo 其实并不能提升多少性能，甚至可能还会损耗性能
+3. 可以在 需要一定计算量的情况下 使用useMemo
+4. 可以在 父子组件 数据传递中，通过 useMemo 去缓存给子组件传递的数据
+
 ### 8.4 useCallback
 
+
+
 ## 9. refs & dom
 
 

20_React.js_VIP22/day-4/code/react-hooks-demo/src/App.js

@@ -2,6 +2,7 @@ import './App.css';
 import TestUseState from './components/TestUseState';
 import Counter from './components/Counter';
 import TestUseEffect from './components/TestUseEffect';
+import Clock from './components/Clock';
 
 function App() {
   return (
@@ -9,7 +10,8 @@ function App() {
       <header className="App-header">
         {/* <TestUseState />
         <Counter /> */}
-        <TestUseEffect />
+        {/* <TestUseEffect /> */}
+        <Clock />
       </header>
     </div>
   );

20_React.js_VIP22/day-4/code/react-hooks-demo/src/components/Clock.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+let timer;
+
+function Clock({ title }) {
+  let [now, updateNow] = useState(new Date());
+
+  useEffect(() => {
+    // 启动定时
+    timer = setInterval(() => {
+      updateNow(new Date());
+    }, 1000);
+    // 返回函数，在组件卸载前清除定时器
+    return () => {
+      console.log(timer);
+      clearInterval(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    console.log(timer);
+  }, [title]);
+
+  return (
+    <div>
+      {title || '时间为'} : {now.toLocaleString()}
+    </div>
+  );
+}
+
+export default Clock;

20_React.js_VIP22/day-4/code/react-hooks-demo/src/components/TestUseEffect.jsx

@@ -32,6 +32,11 @@ export default function TestUseEffect({ name }) {
     console.log('===组件渲染后===');
   }, []);
 
+  // 4 监听state或者props变化，执行setup（组件首次渲染 也会执行setup）
+  useEffect(() => {
+    console.log('msg变化了');
+  }, [msg, name]);
+
   return (
     <div>
       <h3>useEffect</h3>

20_React.js_VIP22/day-4/code/react-hooks-demo/src/components/TestUseMemo.jsx

@@ -0,0 +1,16 @@
+import { useState, useMemo } from 'react';
+
+function TestUseMemo() {
+  let [c, setC] = useState(10);
+
+  let doubleC = useMemo(() => c * 2, [c]);
+
+  return (
+    <div>
+      <p>{c}</p>
+      <p>{doubleC}</p>
+    </div>
+  );
+}
+
+export default TestUseMemo;