2019.08.26

pingan8787 · pingan8787 · commit fe5a45b56112 · 2019-08-26T23:24:26.000+08:00
diff --git a/Cute-React/React-Hooks-Learning/src/Example7.js b/Cute-React/React-Hooks-Learning/src/Example7.js
@@ -0,0 +1,31 @@
+import React, { useState, useMemo } from 'react'
+
+function Example7(){
+    const [leo1, setLeo1] = useState('我是leo1')
+    const [leo2, setLeo2] = useState('我是leo2')
+
+    return (
+        <>
+            <button onClick={() => {setLeo1(new Date().getTime())}}>我是leo1</button>
+            <button onClick={() => {setLeo2(new Date().getTime() + ' hello')}}>我是leo2</button>
+            <ChildComponent name={leo1}>{leo2}</ChildComponent>  
+        </>
+    )
+}
+
+function ChildComponent({name, children}){
+
+    function changeLeo1(name){
+        console.log("11111111111111")
+        return name + ',来了'
+    }
+    const action = useMemo(()=>changeLeo1(name), [name]) // 只有[name]中变量发生改变才会执行
+    return (
+        <>  
+            <div> {action} </div>
+            <div> {children} </div>
+        </>
+    )
+}
+
+export default Example7
diff --git a/Cute-React/React-Hooks-Learning/src/Example8.js b/Cute-React/React-Hooks-Learning/src/Example8.js
@@ -0,0 +1,29 @@
+import React, { useState, useRef, useEffect } from 'react'
+
+function Example8(){
+    const inputEl = useRef(null);
+    const onLeo = () => {
+        inputEl.current.value = "hello leo!"
+        console.log(inputEl)
+    }
+
+    const [text, setText] = useState('leo')
+    const textRef = useRef()
+
+    useEffect(() => {
+        textRef.current = text
+        console.log('textRef.current',textRef.current)
+    })
+
+    return (
+        <>
+            <input type="text" ref={inputEl} />
+            <button onClick={onLeo}>在input中展示文字</button>
+            <br />
+            
+            <input value={text} onChange={e=>{setText(e.target.value)}}/>
+        </>
+    )
+}
+
+export default Example8
diff --git a/Cute-React/React-Hooks-Learning/src/Example9.js b/Cute-React/React-Hooks-Learning/src/Example9.js
@@ -0,0 +1,36 @@
+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
+}
+
+function Example9(){
+    const size = useWinSize()
+
+    return (
+        <div>
+            页面尺寸：{size.width} * {size.height}
+        </div>
+    )
+}
+
+export default Example9
diff --git a/Cute-React/React-Hooks-Learning/src/index.js b/Cute-React/React-Hooks-Learning/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Example from './Example6/Example6';
+import Example from './Example9';
 
 ReactDOM.render(<Example />, document.getElementById('root'));
 
