Feature/3 use effect

hooks/src/App.js

@@ -1,15 +1,15 @@
 import React from 'react'
-import './App.css';
-import ClassCounter from "./components/ClassCounter";
-import HookCounter from "./components/HookCounter";
+import './App.css'
+import IntervalClassCounter from "./components/IntervalClassCounter";
+import IntervalHookCounter from "./components/IntervalHookCounter";
 
 function App() {
-  return (
-    <div className="App">
-      {/*<ClassCounter/>*/}
-      <HookCounter/>
-    </div>
-  );
+ return (
+  <div className='App'>
+    <IntervalClassCounter/>
+    <IntervalHookCounter/>
+  </div>
+ )
 }
 
-export default App;
+export default App

hooks/src/components/IntervalClassCounter.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+class IntervalClassCounter extends Component {
+  constructor(props){
+   super(props)
+    this.state = {
+      count: 0
+    }
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(this.tick,1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  tick = () => {
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+
+  render() {
+      return <h1>{this.state.count}</h1>
+  }
+}
+
+export default IntervalClassCounter

hooks/src/components/IntervalHookCounter.js

@@ -0,0 +1,32 @@
+import React,{useState,useEffect} from 'react'
+
+ function IntervalHookCounter() {
+    const [count,setCount] =useState(0)
+
+    const tick = () => {
+        setCount(count + 1)
+    }
+
+
+    useEffect(() => {
+        function doSomething() {
+
+        }
+        doSomething()
+        const  interval = setInterval(tick,1000)
+        return() => {
+         clearInterval(interval)
+        }
+    },)
+
+   return(
+    <div>
+        {count}
+    </div>
+   )
+
+ }
+
+ export default IntervalHookCounter
+
+//カウンターの道理はまだ理解出来ていない(9/23現在)為、使うことがあったら再度戻っての復習を行う。