hook系列useRef forwardRef useImperativeHandle useLayoutEffect

useRef

• useRef 返回一个可变的 ref 对象，其.current属性被初始化为传入的参数（initialValue）
• 返回的 ref 对象在组件的整个生命周期内保持不变

forwardRef

• 将ref从父组件中转发到子组件中的dom元素上
• 子组件接受props和ref作为参数

useImperativeHandle

• useImperativeHandle可以让你在使用 ref 时自定义暴露给父组件的实例值
• 在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用
• 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
• 可以使用它来读取 DOM 布局并同步触发重渲染
• 在浏览器执行绘制之前useLayoutEffect内部的更新计划将被同步刷新
• 尽可能使用标准的 useEffect 以避免阻塞视图更新

import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';

//useEffect的销毁
function Counter1() {
    let [state, setState] = useState({ number: 0 });
    //useEffect里面方法会有返回值，返回值是一个函数，一般用来执行清理动作
    //每次执行effect之前都会执行此unEffect函数
    useEffect(() => {
        let $timer = setInterval(() => {
            setState(prevState => ({ number: prevState.number + 1 }));
        }, 1000);
        return () => {
            clearInterval($timer);
        }
    }, []);
    return (
        <div>
            <p>{state.number}</p>
            <button onClick={() => setState(prevState => ({ number: prevState.number + 1 }))}>+</button>
        </div>
    )
}

//一定是第个参数
function Child(props, parentRef) {
    let inputRef = useRef();
    useImperativeHandle(parentRef, () => (
        {
            focus() {
                inputRef.current.focus();
            },
            setValue(newVal) {
                inputRef.current.value = newVal;
            }
        }
    ));
    return (
        <>
            <input type="text" ref={inputRef} />
        </>
    )

}
let ForwardedChild = forwardRef(Child);
function Parent() {
    let [number, setNumber] = useState(0);
    let parentRef = useRef();//{current:null} //每次都会返回同一个对象
    function getFocus() {
        //希望在父组件只能调用focus方法，其它的方法都不能调用
        parentRef.current.focus();//current是此input框 的真实DOM元素
        //inputRef.current.value = 'something';
        parentRef.current.setValue('something');
    }
    return (
        <>
            <ForwardedChild ref={parentRef} />
            <button onClick={() => setNumber(prevState => prevState + 1)}>+</button>
            <button onClick={getFocus}>获得焦点</button>
        </>
    )

}

function Counter3() {
    let [color, setColor] = useState('red');
    useLayoutEffect(() => {
        console.log("useLayoutEffect", document.getElementById('myDiv').style.backgroundColor);
        alert('useLayoutEffect' + color);
    });
    useEffect(() => {
        console.log("useEffect", document.getElementById('myDiv').style.backgroundColor);
        alert('useEffect' + color);
    });
    return (
        <>
            <div id="myDiv" style={{ backgroundColor: color }}>颜色</div>
            <button onClick={() => setColor('red')}>红</button>
            <button onClick={() => setColor('yellow')}>黄</button>
            <button onClick={() => setColor('blue')}>蓝</button>
        </>
    )

}
export default Counter3;