浅谈react hook （ useImperativeHandle）

 

import React, { forwardRef, useRef, useImperativeHandle,useState} from "react";

import ReactDOM from "react-dom";

import "./index.css";

 

// useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。

// ref：定义 current 对象的 ref createHandle：一个函数，返回值是一个对象，即这个 ref 的 current

// 对象 [deps]：即依赖列表，当监听的依赖发生变化，useImperativeHandle 才会重新将子组件的实例属性输出到父组件

// ref 的 current 属性上，如果为空数组，则不会重新输出。

//forwardRef获取子组件的Dom

const Forward = forwardRef((props, ref) => {

 

    // 监听当num变化的时候 count 才会传过来

    const inputEl = useRef(null)

    const [num,setNum] = useState(0)

    const [count,setCount] = useState(0)

    useImperativeHandle(ref, () => ({

        name: '武大郎',

            focus: () => {

                inputEl.current.focus()

            },

            count

    }),[num])

    return (

        <div>

            <input type='text' ref={inputEl}></input>

            <h1>{num}</h1>

            <h1>{count}</h1>

            <button onClick={() => {

               setNum(num+1)

            }}>num</button>

            <button onClick={() => {

               setCount(count+1)

            }}>count</button>

        </div>

    )

})

// 子组件的方法和属性暴露给父组件

function App() {

    const el = useRef(null)

    return (

        <div className="App">

            <Forward ref={el}></Forward>

            <button onClick={() => {

                console.log(el.current);

                console.log(el.current.focus);

                el.current.focus()

            }}>获取子组件的方法和属性</button>

 

        </div>

    );

}

ReactDOM.render(<App />, document.getElementById("root"));