ReactHook技巧

一 概念

1.什么是hook?

2.为什么要用hook?

-: 为函数组件提供状态管理能力, 扩展
-: 在Function组件中勾入更多React 特性, 以use开头

二 useState

./components/LikeButton.tsx

// rafc  tsrafe
import React, { useState } from 'react'

const LikeButton: React.FC = () => {
    const [like, setLike] = useState(0)
    const [on, setOn] = useState(true)

    return (
        <div>
            <button onClick={() => setLike(like + 1)}>
                {like} 👍
            </button>
            <button onClick={() => setOn(!on)}>
                {on ? 'ON':'OFF' }
            </button>
        </div>
    )
}

export default LikeButton

改变函数内组件状态,在每次组件更新时候, 记住状态值

三 useEffect

纯函数:输入确定, 输出确定,无副作用

副作用:网络请求,手动dom操作,订阅数据来源, … 与纯函数界面渲染不同

两种场景:

• 1. 无需清除副作用(Effect)
• 2. 需要清除的副作用

3.1 无需清除副作用(Effect)

实现: 使用useEffect 修改DOM 完成标题更新

class实现:

hooks实现:

// rafc  tsrafe
import React, { useEffect, useState } from 'react'

const LikeButton: React.FC = () => {
    const [like, setLike] = useState(0)
 ...
    useEffect(()=>{//渲染和更新时候执行.
        document.title = `点击了 ${like} 次`
    })

    return (
        <div>
            <button onClick={() => setLike(like + 1)}>
                {like} 👍
            </button>
          ...
        </div>
    )
}

export default LikeButton

3.2 需要清除副作用(Effect)

dom操作需要清除监听, 防止内存泄漏,卡顿页面

实现: 使用useEffect 完成鼠标跟踪器(鼠标移动时候显示鼠标位置)

原理:挂载document上, 点击click,修改state,当前值

class实现:

hooks实现:// 无依赖时候, 会多次重复调用effect 注册,执行

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

const MouseTracker: React.FC = () => {
    const [position, setPosition] = useState({ x: 0, y: 0 })

    useEffect(() => {
        console.log('add effect',position.x);

        const updateMouse = (e: MouseEvent) => {
            console.log('inner');
            setPosition({
                x: e.clientX,
                y: e.clientY
            })
        }

        document.addEventListener('click', updateMouse)
        return () => {
            console.log('remove effect',position.x);

            document.removeEventListener('click', updateMouse)

        }
    })

    console.log('before render',position.x);
    return (
        <div>
            X :{position.x} {` `} Y :{position.y}
        </div>
    )
}

export default MouseTracker

*忘记react声明周期,重新接触react effect,发现每次渲染都会调用effect(有些浪费), 思考如何规避多次调用------>控制effect调用次数

3.3 控制(Effect)调用次数