Ref从入门到入土-Toy模板网

这篇具有很好参考价值的文章主要介绍了Ref从入门到入土。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先做个对比： Ref从入门到入土,React,javascript,前端,react.js

功能一：引用一个值做持久化记忆

场景：清除定时器

import { useRef } from "react"
import { useState } from "react"
// ref:1.引用一个值 做持久化记忆 
// let num = useRef(1)
// console.log(num.current++);
// 避免渲染ref的值，其值改变时不会触发更新（区别于state）
const App = () => {

    const [count, setCount] = useState(0)

    // let timer = null
    // const handleClick = () => {
    //     setCount(count + 1)

    //     // 不能有效清除定时器，因为每次只能清除当前作用域的timer，但是每次setState都会产生新的作用域，则多次点击会导致定时器累加
    //     clearInterval(timer)
    //     timer = setInterval(() => {
    //         console.log('setInterval...');
    //     }, 1000);
    // }

    let timer = useRef(null)
    const handleClick = () => {
        setCount(count + 1)

        // ref具有记忆性，可以拿到第一次产生的timer，然后清除，保证每次只有一个定时器在
        clearInterval(timer.current)
        timer.current = setInterval(() => {
            console.log('setInterval...');
        }, 1000);
    }


    return (<>
        hello hook
        <button onClick={handleClick}>按钮</button>
        <br />
        count:{count},

    </>)
}

export default App

功能二：在react中操作dom(避免原生写法

const App = () => {

    const myRef = useRef(null)
    const fun = () => {
        console.log(myRef.current.innerHTML);
        myRef.current.style.color = 'skyblue'
    }
    const list = [
        { id: 1, text: 'aaa' },
        { id: 2, text: 'bbb' },
        { id: 3, text: 'ccc' }
    ]
    return (
        <>
            <button onClick={fun}>点击让div变色</button>
            <div ref={myRef}>div</div>

            {/* 循环中操作ref可以使用回调写法 */}
            <ul>
                {
                    list.map((item) => {
                        return <li key={item.id} ref={(mf) => { mf.style.background = 'pink' }}>{item.text}</li>
                    })
                }
            </ul>
        </>
    )
}

export default App

注意：当给子组件添加ref时，需要对其 forwardRef 转发，用于向父组件公开其dom


const Zi = forwardRef(function myInput(props, refs) {
    return <input type="text" ref={refs} />
})

const App = () => {
    const myref = useRef(null)
    const fn = () => {
        myref.current.focus()
        myref.current.style.background = 'skyblue'
    }
    return (<>
        hello App
        <button onClick={fn}>点击变色</button>
        <Zi ref={myref} />
    </>)



}

export default App

进阶：useImperativeHandle用于为组件自定义暴露方法文章来源地址https://www.toymoban.com/news/detail-633245.html

import { useRef, forwardRef, useImperativeHandle } from "react"

const Zi = forwardRef(function myInput(props, refs) {
    const inputRef = useRef(null)
    useImperativeHandle(refs, () => {
        return {
            myFocus() {
                inputRef.current.focus()
            },
            focusAndStyle() {
                inputRef.current.focus()
                inputRef.current.style.background = 'red'
            }
        }
    })
    return (
        <input type="text" ref={inputRef} />
    )
})
const App = () => {
    const myref = useRef(null)
    const fn = () => {
        myref.current.myFocus()
        myref.current.focusAndStyle()
        // 以下会报错 myref.current.focus is not a function，因为只有以上俩方法暴露了
        // myref.current.focus()  
    }
    return (<>
        hello App
        <button onClick={fn}>点击</button>
        <Zi ref={myref} />
    </>)

}

export default App

到了这里，关于Ref从入门到入土的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！