React-hook用法

useState

useEffect

在页面每次渲染完之后都会执行

import React,{ useState,useEffect } from 'react';

const LikeBut = () => {
    const [like, setLike] = useState(0);
    const [on, setOn] = useState(true);
    useEffect(()=>{
        document.title = `点击了${like}次`
    })
    return(
        <div>
            <button onClick={()=>{setLike(like+1)}}>
                {like} @
            </button>
            <button onClick={()=>{setOn(!on)}}>
                {on?'on':'off'}
            </button>
        </div>
    )
}

export default LikeBut;

在document监听click事件会有问题，所以sueEffect提供了清除回调

import React , {useState,useEffect} from 'react';

const Mouse = () => {
    const [ positions, setPositions ] = useState({x: 0, y: 0});

    useEffect(()=>{
        const updateMouse = (event)=>{
            console.log('inner')
            setPositions({x:event.clientX,y:event.clientY})
        }
        console.log('add listener')
        document.addEventListener('click',updateMouse);

        return ()=>{
            console.log('remove listener')
            document.removeEventListener('click',updateMouse)
        }
    })

    return(
        <p>X:{positions.x},Y:{positions.y}</p>
    )

}

export default Mouse;


// 打印顺数 
初始化时  add listener

点击后
inner
remove listener
add listener

控制useEffect的执行

useEffect(()=>{},[])
第二个参数可以被设置成触发条件

自定义hook

自定义hook 胜于 HOC 高阶组件 更加清晰 便于阅读

Hook 规则

• 只在最顶层使用Hook
• 只在React函数中使用Hook