React:useEffect使用

15_React/day-4/code/my-app/src/App.js

@@ -1,12 +1,14 @@
 import logo from './logo.svg';
 import './App.css';
 import LearnUseState from './components/LearnUseState';
+import LearnUseEffect from './components/LearnUseEffect';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <LearnUseState />
+        <LearnUseEffect />
       </header>
     </div>
   );

15_React/day-4/code/my-app/src/components/LearnUseEffect.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+function LearnUseEffect() {
+  let timer;
+  let [count, setCount] = useState(0);
+  let [time, setTime] = useState(new Date());
+  //! 第一种方式 直接传入 一个函数:当组件第一次渲染后（或者 组件更新后） 会执行该回调
+  // componentDidMount componentDidUpdate componentWillUnmount
+  // useEffect(() => {
+  //   console.log(`output->effect`);
+  // });
+  //! 第二种方式： 传入两个参数，第一个为回调函数，第二个 为 空数组
+  // 只有组件第一次渲染完后执行一次回调，之后不会在执行
+  // useEffect(() => {
+  //   console.log(`output->只有组件渲染后执行一次`);
+  // }, []);
+
+  //! 第三种：传入两个参数，第一个为回调函数，第二个 为 数组，在数组中指定该副作用依赖的状态
+  //   当组件第一次渲染后执行一次，之后当依赖的数组中状态发生改变时 才会再执行该回调
+
+  // useEffect(() => {
+  //   console.log(`output->只有组件渲染后执行一次`);
+  // }, [count]);
+  // 该副作用可以依赖多个状态
+
+  //! 第四种:  如果给传入的回调函数 返回一个函数fn，该fn会在组件卸载前执行
+
+  useEffect(() => {
+    timer = setInterval(() => {
+      console.log(`output->timer`, timer);
+      setTime(new Date());
+    }, 1000);
+
+    return () => {
+      // 会在组件卸载前执行
+      clearInterval(timer);
+    };
+  }, []);
+  // useEffect(() => {
+  //   console.log(`output->只有组件渲染后执行一次`);
+  // }, [count, time]);
+
+  return (
+    <div>
+      <p>
+        学习useEffect：{count}, {time.toLocaleString()}
+      </p>
+      <button onClick={() => setCount(10)}>change</button>
+      <button onClick={() => setTime(new Date())}>change time</button>
+    </div>
+  );
+}
+
+export default LearnUseEffect;