React 基础 useEffect 操作 DOM

使用技巧

• 参数：在获取DOM 时 ，一般都设置Null
• 返回值：返回一个带有 Current 属性的对象，通过该对象可以得到DOM对象或者类组件实例

 useEffect 获取DOM

1.使用useRef 创建一个有 current 属性的 ref 对象，{current：null}

const xxxRef = useRef(null)

2.通过DOM 的ref 属性 和上面创建的对象进行关联

<div ref={xxxRef}></div>

3. 通过 xxxRef.current 就可以访问到对应的 DOM 

import React, { useRef } from 'react'

const App = () => {
    const inputRef = useRef(null)
    const add = () => {
        console.log(inputRef.current.value)
    }
    return (
        <section>
            <input placeholder='请输入内容' ref={inputRef} />
            <button onClick={add}>添加</button>
        </section>
    )
}

export default App

useEffect 获取类组件

App.js

import React, { useRef } from 'react'
import Test from './Test'

const App = () => {
    const testClassCmp = useRef(null)
    const add = () => {
        testClassCmp.current.handleClick()
    }
    return (
        <section>
            <Test ref={testClassCmp} />
            <button onClick={add}>添加</button>
        </section>
    )
}

export default App

Test.js

import React, { Component } from 'react'

export default class Test extends Component {
    handleClick() {
        console.log(1)
    }
    render() {
        return <div>类组件</div>
    }
}

useRef 共享数据

更新时期都是同一个 ref 对象 ， 可以先理解为是一个全局变量，但和全局变量不同的是他在组件内部的，多个组件实例组件不会互相影响

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

export default function App() {
    const [count, setCount] = useState(10)
    const ref = useRef(null)
    useEffect(() => {
        ref.current = setInterval(() => {
            setCount((count) => count - 1)
        }, 1000)
    }, [])
    const handleStop = () => {
        clearInterval(ref.current)
    }
    return (
        <div>
            <h3>{count}</h3>
            <button onClick={handleStop}>停止定时器</button>
        </div>
    )
}