react hooks基础demo

亦凉 2023-06-13 06:07 91阅读 0赞

### hooks基础demo ###

import React,{ useState,useEffect,createContext,useContext,useMemo,memo,useRef,PureComponent} from 'react'
    
    const CountText = createContext();
    
    //react hooks写法
    /*function Counter(props) { const count = useContext(CountText); return( <h1>{count}</h1> ) }*/
    
    // Counter函数写法，如果使用ref就必须写成class
    /*const Counter = memo(function Counter(props){ console.log('counter render'); return( <h1 onClick={props.clickCounter}>{props.count}</h1> ) })*/
    
    class Counter extends PureComponent{ 
        speak(){ 
            console.log('speak');
        }
        render(){ 
            let { props} = this;
            return(
                <h1 onClick={ props.clickCounter}>{ props.count}</h1>
            )
        }
    }
    
    
    // 自定义hook，命名必须以use开头
    function useCount(defaultCount){ 
        const [myCount,setMyCount] = useState(defaultCount);
        const changeMyCount = ()=>{ 
            setMyCount(myCount+1)
        }
        useEffect(()=>{ 
            document.querySelector("#changeMyCount").addEventListener('click',changeMyCount,false)
        },[myCount])
        return [myCount,setMyCount];
    }
    
    const Hook = function () { 
        const  [myCount,setMyCount] = useCount(0)
        const [count,setCount] = useState(0);
        const [name,setName] = useState('hello world');
        const counterRef = useRef();
        const [size,setSize] = useState({ 
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    
        const onResize = ()=>{ 
            setSize({ 
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            })
        }
    
        const changeCount = ()=>{ 
            setCount(count+1)
            console.log(count)
        }
    
        const changeSize = ()=>{ 
            console.log('size')
        }
    
        const clickCounter = ()=>{ 
            console.log(count)
        }
    
        const getRef = () => { 
            //获取Conter组件的speak方法
            counterRef.current.speak()
        }
    
        useEffect(()=>{ 
            document.title=count;
        })
    
        useEffect(() => { 
            window.addEventListener('resize',onResize,false);
            return () => { 
                window.removeEventListener('resize',onResize,false);
            }
        },[])
    
        // count改变调用
        useEffect(()=>{ 
            console.log(count)
        },[count])
    
        useEffect(()=>{ 
            document.querySelector("#change").addEventListener('click',changeCount,false)
        },[count])
    
        useEffect(()=>{ 
            document.querySelector("#size").addEventListener('click',changeSize,false)
    
            return(
                document.querySelector("#size").removeEventListener('click',changeSize,false)
            )
        })
    
        useEffect(()=>{ 
            document.querySelector("#btn").addEventListener('click',getRef,false)
        },[counterRef])
    
        const double = useMemo(() => { 
            return count*2;
        },[count==3]) //当count==3，这个才有效，这里也可以直接是count
    
        const half = useMemo(() => { 
            return double/2;
        });//可以依赖于上面的useMemo
    
        return(
            <div>
                <button onClick={ ()=>{ setCount(count+1)}}>{ count}</button>
                <button onClick={ ()=>{ setName('你好，react hook')}}>{ name}</button>
                <button id='change'>使用useEffect绑定事件</button>
                <button id='btn'>使用useRef获取Counter</button>
                { size.width}*{ size.height}
    
                <br/>
                { count%2==0
                    ?(<span id="size">我是偶数</span>)
                    :(<span id="size">我是奇数</span>)
                    }
    { /* userContext: <CountText.Provider value={count}> <Counter/> </CountText.Provider>*/}
                <Counter ref={ counterRef} count={ count} clickCounter={ clickCounter}/>
                { double}--{ half}
                <br/>
                <button id='changeMyCount'>自定义hook</button>
                <h3>自定义hook:{ myCount}</h3>
            </div>
        )
    }
    
    export default Hook